Multiselect.tsx

/**
 * @license
 * Copyright 2018-2022 Streamlit Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from "react"
import without from "lodash/without"
import { withTheme } from "@emotion/react"
import { FormClearHelper } from "src/components/widgets/Form"
import { WidgetStateManager, Source } from "src/lib/WidgetStateManager"
import { MultiSelect as MultiSelectProto } from "src/autogen/proto"
import {
  TYPE,
  Select as UISelect,
  Option,
  OnChangeParams,
} from "baseui/select"
import {
  WidgetLabel,
  StyledWidgetLabelHelp,
} from "src/components/widgets/BaseWidget"
import { StyledUISelect } from "src/components/widgets/Multiselect/styled-components"
import TooltipIcon from "src/components/shared/TooltipIcon"
import { Placement } from "src/components/shared/Tooltip"
import { VirtualDropdown } from "src/components/shared/Dropdown"
import { fuzzyFilterSelectOptions } from "src/components/shared/Dropdown/Selectbox"
import { Theme } from "src/theme"

export interface Props {
  disabled: boolean
  element: MultiSelectProto
  theme: Theme
  widgetMgr: WidgetStateManager
  width: number
}

interface State {
  /**
   * The value specified by the user via the UI.
   */
  value: number[]
}

interface MultiselectOption {
  label: string
  value: string
}

class Multiselect extends React.PureComponent<Props, State> {
  private readonly formClearHelper = new FormClearHelper()

  public state: State = {
    value: this.initialValue,
  }

  get initialValue(): number[] {
    // If WidgetStateManager knew a value for this widget, initialize to that.
    // Otherwise, use the default value from the widget protobuf.
    const storedValue = this.props.widgetMgr.getIntArrayValue(
      this.props.element
    )
    return storedValue !== undefined ? storedValue : this.props.element.default
  }

  public componentDidMount(): void {
    if (this.props.element.setValue) {
      this.updateFromProtobuf()
    } else {
      this.commitWidgetValue({ fromUi: false })
    }
  }

  public componentDidUpdate(): void {
    this.maybeUpdateFromProtobuf()
  }

  public componentWillUnmount(): void {
    this.formClearHelper.disconnect()
  }

  private maybeUpdateFromProtobuf(): void {
    const { setValue } = this.props.element
    if (setValue) {
      this.updateFromProtobuf()
    }
  }

  private updateFromProtobuf(): void {
    const { value } = this.props.element
    this.props.element.setValue = false
    this.setState({ value }, () => {
      this.commitWidgetValue({ fromUi: false })
    })
  }

  /** Commit state.value to the WidgetStateManager. */
  private commitWidgetValue = (source: Source): void => {
    this.props.widgetMgr.setIntArrayValue(
      this.props.element,
      this.state.value,
      source
    )
  }

  /**
   * If we're part of a clear_on_submit form, this will be called when our
   * form is submitted. Restore our default value and update the WidgetManager.
   */
  private onFormCleared = (): void => {
    this.setState({ value: this.props.element.default }, () =>
      this.commitWidgetValue({ fromUi: true })
    )
  }

  private get valueFromState(): MultiselectOption[] {
    return this.state.value.map(i => {
      const label = this.props.element.options[i]
      return { value: i.toString(), label }
    })
  }

  private generateNewState(data: OnChangeParams): State {
    const getIndex = (): number => {
      const valueId = data.option?.value
      return parseInt(valueId, 10)
    }

    switch (data.type) {
      case "remove": {
        return { value: without(this.state.value, getIndex()) }
      }
      case "clear": {
        return { value: [] }
      }
      case "select": {
        return { value: this.state.value.concat([getIndex()]) }
      }
      default: {
        throw new Error(`State transition is unknown: ${data.type}`)
      }
    }
  }

  private onChange = (params: OnChangeParams): void => {
    const newState = this.generateNewState(params)
    this.setState(newState, () => this.commitWidgetValue({ fromUi: true }))
  }

  private filterOptions = (
    options: readonly Option[],
    filterValue: string
  ): readonly Option[] => {
    // We need to manually filter for previously selected options here
    const unselectedOptions = options.filter(
      option => !this.state.value.includes(Number(option.value))
    )

    return fuzzyFilterSelectOptions(
      unselectedOptions as MultiselectOption[],
      filterValue
    )
  }

  public render(): React.ReactNode {
    const { element, theme, width, widgetMgr } = this.props
    const style = { width }
    const { options } = element
    const disabled = options.length === 0 ? true : this.props.disabled
    const placeholder =
      options.length === 0 ? "No options to select." : "Choose an option"
    const selectOptions: MultiselectOption[] = options.map(
      (option: string, idx: number) => {
        return {
          label: option,
          value: idx.toString(),
        }
      }
    )

    // Manage our form-clear event handler.
    this.formClearHelper.manageFormClearListener(
      widgetMgr,
      element.formId,
      this.onFormCleared
    )

    return (
      <div className="row-widget stMultiSelect" style={style}>
        <WidgetLabel label={element.label} disabled={disabled}>
          {element.help && (
            <StyledWidgetLabelHelp>
              <TooltipIcon
                content={element.help}
                placement={Placement.TOP_RIGHT}
              />
            </StyledWidgetLabelHelp>
          )}
        </WidgetLabel>
        <StyledUISelect>
          <UISelect
            options={selectOptions}
            labelKey="label"
            valueKey="value"
            placeholder={placeholder}
            type={TYPE.select}
            multi
            onChange={this.onChange}
            value={this.valueFromState}
            disabled={disabled}
            size={"compact"}
            filterOptions={this.filterOptions}
            overrides={{
              IconsContainer: {
                style: () => ({
                  paddingRight: ".5rem",
                }),
              },

              ControlContainer: {
                style: () => ({
                  // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
                  borderLeftWidth: "1px",
                  borderRightWidth: "1px",
                  borderTopWidth: "1px",
                  borderBottomWidth: "1px",
                }),
              },

              ValueContainer: {
                style: () => ({
                  /*
                    This minHeight is needed to fix a bug from BaseWeb in which the
                    div that contains the options changes their height from 40px to 44px.

                    You could check this behavior in their documentation as well:
                    https://v8-17-1.baseweb.design/components/select/#select-as-multi-pick-search

                    Issue related: https://github.com/streamlit/streamlit/issues/590
                  */
                  minHeight: "40px",
                  paddingLeft: ".5rem",
                }),
              },
              ClearIcon: {
                style: {
                  color: theme.colors.darkGray,
                },
              },
              SearchIcon: {
                style: {
                  color: theme.colors.darkGray,
                },
              },
              Tag: {
                props: {
                  overrides: {
                    Root: {
                      style: {
                        borderTopLeftRadius: theme.radii.md,
                        borderTopRightRadius: theme.radii.md,
                        borderBottomRightRadius: theme.radii.md,
                        borderBottomLeftRadius: theme.radii.md,
                        fontSize: theme.fontSizes.sm,
                        paddingLeft: theme.spacing.sm,
                        marginLeft: 0,
                        marginRight: theme.spacing.sm,
                        height: "28px",
                      },
                    },
                    Action: {
                      style: {
                        paddingLeft: 0,
                      },
                    },
                    Text: {
                      style: {
                        fontSize: theme.fontSizes.md,
                      },
                    },
                  },
                },
              },
              MultiValue: {
                props: {
                  overrides: {
                    Root: {
                      style: {
                        fontSize: theme.fontSizes.sm,
                      },
                    },
                  },
                },
              },
              Dropdown: { component: VirtualDropdown },
            }}
          />
        </StyledUISelect>
      </div>
    )
  }
}

export default withTheme(Multiselect)