react-select#components TypeScript Examples

DefaultOptionRenderer = (props: any) => {
  const { classNamePrefix, enableTermSearch, inputValue, mode } = props?.selectProps;
  const OptionRenderer = props?.selectProps?.optionRenderer;
  const isSelected = props.isSelected;
  const isSearchHeaderOption = props?.data?.searchHeader;
  if (props.selectProps?.autoScrollToCurrent) {
    React.useEffect(() => {
      if (props.isSelected) {
        const domItem = document.getElementById(props.innerProps.id);
        !!domItem?.scrollIntoView &&
          domItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
      }
    }, [isSelected]);
  }
  const rendererProps = {
    data: props.data,
    inputValue: props.selectProps?.inputValue,
  };

  return isSearchHeaderOption && enableTermSearch ? (
    inputValue &&
    <components.Option {...props}>
      <HeaderComp {...props} />
    </components.Option>
  ) : <>
    {OptionRenderer ?
      <div className="tk-option" role="option">
        <components.Option {...props}>
          <OptionRenderer {...rendererProps} />
        </components.Option>
      </div>
      : <div className="tk-option" role="option">
        <components.Option {...props} className={classNames(classNamePrefix && mode ? `${classNamePrefix}__option--${mode}` : null)} />
      </div>
    }
  </>;
}

Input = (props: InputProps) => {
  if (
    props.isHidden ||
    !props.selectProps.menuIsOpen ||
    !props.selectProps.isSearchable
  ) {
    return <components.Input {...props} className="pointer-events-none" />
  }

  return (
    <div className="w-full flex items-center h-full space-between">
      <div className="w-full flex items-center">
        <span className="text-grey-40 mr-2">
          <SearchIcon size={20} />
        </span>
        <components.Input {...props} />
      </div>
      <span className="text-grey-40 hover:bg-grey-5 cursor-pointer rounded">
        {typeof props.value === "string" && props.value !== "" && (
          <XCircleIcon size={20} />
        )}
      </span>
    </div>
  )
}

Menu = ({ className, ...props }: MenuProps) => {
  return (
    <components.Menu
      className={clsx({
        "-mt-1 z-60": !props.selectProps.isSearchable,
      })}
      {...props}
    >
      {props.children}
    </components.Menu>
  )
}

Select: React.FC<SelectProps> = ({ placeholder, options, values, setValues, handleChange, handleTouch }) => {
	const onSortEnd = ({ oldIndex, newIndex }) => {
		const newValue = arrayMove(values, oldIndex, newIndex)
		setValues(newValue)
	}
	return <SortableSelect useDragHandle axis='xy' distance={4} getHelperDimensions={({ node }) => node.getBoundingClientRect()} onSortEnd={onSortEnd}
	// select props
		styles={{
			control: (provided) => {
				return { ...provided, border: 'none' }
			},
			option: (provided) => {
				return { ...provided, cursor: 'pointer', ':hover': {
					opacity: '0.7'
				} }
			}
		}} isMulti className='border border-grey-light dark:border-transparent rounded' classNamePrefix='outline-none text-black dark:bg-very-black dark:text-white cursor-pointer ' placeholder={placeholder || '선택해주세요.'} options={options} onChange={handleChange} onBlur={handleTouch} noOptionsMessage={() => '검색 결과가 없습니다.'}
		value={values.map(el => ({ label: el, value: el}))}
		components={{
			MultiValue: SortableMultiValue as ComponentType<MultiValueProps<OptionTypeBase, GroupTypeBase<{ label: string, value: string}>>>,
			MultiValueLabel: SortableMultiValueLabel,
		}}
		closeMenuOnSelect={false}
	/>
}

SortableMultiValue = SortableElement(props => {
	// this prevents the menu from being opened/closed when the user clicks
	// on a value to begin dragging it. ideally, detecting a click (instead of
	// a drag) would still focus the control and toggle the menu, but that
	// requires some magic with refs that are out of scope for this example
	const onMouseDown = e => {
		e.preventDefault()
		e.stopPropagation()
	}
	const innerProps = { ...props.innerProps, onMouseDown }
	return <components.MultiValue {...props} innerProps={innerProps} />
})

DropdownIndicator: React.FunctionComponent<
  React.PropsWithChildren<IndicatorProps<SelectOption>>
> = (indicatorProps) => {
  return components.DropdownIndicator == null ? null : (
    <components.DropdownIndicator {...indicatorProps}>
      <SmallerIcons.ExpansionArrowDown />
    </components.DropdownIndicator>
  )
}

MenuList = (props: MenuListComponentProps<SelectOption>) => {
  const ref = React.useRef<HTMLDivElement>(null)
  const refCurrent = ref.current
  const propsValue = props.getValue()
  React.useEffect(() => {
    if (refCurrent != null) {
      const index = getIndexOfValue(propsValue, [])
      refCurrent.scrollTo({
        top: calculateMenuScrollPosition(index, refCurrent.clientHeight),
      })
    }
  }, [refCurrent, propsValue])

  return <components.MenuList {...props} innerRef={ref} />
}

ControlledDropdownIndicator: React.FunctionComponent<
  React.PropsWithChildren<IndicatorProps<SelectOption>>
> = (indicatorProps) => {
  return components.DropdownIndicator == null ? null : (
    <components.DropdownIndicator {...indicatorProps}>
      <Icons.ExpansionArrowControlled />
    </components.DropdownIndicator>
  )
}

DropdownIndicator: React.FunctionComponent<
  React.PropsWithChildren<IndicatorProps<SelectOption>>
> = (indicatorProps) => {
  return components.DropdownIndicator == null ? null : (
    <components.DropdownIndicator {...indicatorProps}>
      <Icons.ExpansionArrow />
    </components.DropdownIndicator>
  )
}

MultiSelect = (
  props: Props & {
    zIndex: number;
  }
) => {
  return (
    <Select
      isMulti
      {...props}
      components={{
        DropdownIndicator,
        IndicatorSeparator: () => null
      }}
      styles={{
        container: (provided, state) => ({
          ...provided,
          maxWidth: '30rem',
          zIndex: props.zIndex
        }),
        control: (provided, state) => ({
          ...provided,
          borderColor: '#565c65',
          borderWidth: 1,
          marginTop: '0.5rem',
          minHeight: '2.5rem',
          borderRadius: 0
        })
      }}
    />
  );
}

Control = ({ children, selectProps, ...props }: any) => {
  const { iconName } = selectProps;
  return (<div>
    <components.Control {...props} className="tk-select__container">
      {iconName && <Icon iconName={iconName} className="tk-input__icon" />}
      {children}
    </components.Control>
  </div>);
}

DropdownIndicator = (props: any) => {
  const { displayArrowIndicator, menuIsOpen } = props?.selectProps;

  return !displayArrowIndicator ?
    null :
    <components.DropdownIndicator
      {...props}
      innerProps={{ 'data-testid': props.selectProps['data-testid'] }}
    >
      <Icon
        className="tk-select__single-value"
        iconName={menuIsOpen ? 'drop-up' : 'drop-down'}
      />
    </components.DropdownIndicator>;
}

Input = (props: any) => {
  const inputAlwaysDisplayed = props?.selectProps?.inputAlwaysDisplayed;
  return <components.Input
    {...props}
    onCopy={props?.selectProps?.onCopy}
    onCut={props?.selectProps?.onCut}
    onDrag={props?.selectProps?.onDrag}
    onKeyUp={props?.selectProps?.onKeyUp}
    isHidden={inputAlwaysDisplayed ? !inputAlwaysDisplayed : false}
  />;
}

SingleValue = ({ children, data, selectProps, ...props }: any) => {
  const InputRenderer = selectProps?.tagRenderer;
  const inputValue = selectProps?.parentInstance?.searchHeaderOption?.value;
  const rendererProps = { data };
  const isSearchHeaderSelected = rendererProps.data.searchHeader;
  return (
    <components.SingleValue {...props}>
      {isSearchHeaderSelected ? <div>{inputValue}</div> : (InputRenderer ? <InputRenderer {...rendererProps} /> : children)}
    </components.SingleValue>);
}

DefaultTagRenderer = (props: any) => {
  const TagRender = props.selectProps?.tagRenderer;
  const rendererProps = { remove: props.removeProps.onClick, data: props.data };
  return (<>
    {TagRender ?
      <div onMouseDown={stopPropagation}>
        <TagRender {...rendererProps} />
      </div>
      : <components.MultiValue {...props}>
        <div onMouseDown={stopPropagation} className="tk-tag__container">
          <div className="tk-tag">
            {props.selectProps.getOptionLabel(props.data)}
          </div>
          <Icon className="tk-tag__close-icon" iconName="cross-round" onClick={props.removeProps.onClick} tabIndex={0} />
        </div>
      </components.MultiValue>}
  </>
  );
}

private innerSelectButtonRender(defaultValue: SelectOptionInterface, index: number):JSX.Element {
        const SingleValue:(props:SingleValueProps<OptionPropsInterface,false,GroupOptionPropsInterface>)=>JSX.Element = (props:SingleValueProps<OptionPropsInterface,false,GroupOptionPropsInterface>) => {
            const label: string = typeof props.data.shortLabel === "string" ? props.data.shortLabel : props.data.label;
            return (
                <components.SingleValue {...props}>
                    {label}
                </components.SingleValue>
            )
        };
        let options: OptionsOrGroups<OptionPropsInterface,GroupOptionPropsInterface>;
        if((this.props.options as Array<GroupedOptionsInterface>)[0].options == null){
            options = (this.props.options as Array<SelectOptionInterface>).map((opt,index)=>{
                const props: OptionPropsInterface = {...opt,value:index};
                return props;
            });
        }else{
            let i: number = 0;
            options = (this.props.options as Array<GroupedOptionsInterface>).map((group,n)=>({
                label: group.label,
                options: group.options.map(opt=>({
                    ...opt,
                    value:i++
                }))
            }))
        }
        const title: JSX.Element = typeof this.props.dropdownTitle === "string" ? <div style={{color:"grey",fontWeight:"bold",fontSize:12}}>{this.props.dropdownTitle}</div> : null;
        return(
            <div style={{display:"inline-block"}}>
                {title}
                <div >
                    <Select<OptionPropsInterface,false,GroupOptionPropsInterface>
                        options={options}
                        isSearchable={false}
                        onChange={this.change.bind(this)}
                        styles={this.configStyle()}
                        components={{ SingleValue, Option: this.props.optionProps ? (props)=>{
                                return this.props.optionProps({...props,children:<components.Option {...props} children={props.children}/>});
                            } : ((props)=>(<components.Option {...props} children={props.children}/>)) }}
                        defaultValue={{...defaultValue,value:index}}
                    />
                </div>
            </div>
        );
    }

DropdownList = ({ selectProps, ...props }: any) => {
  if (selectProps?.enableTermSearch) {
    const select = selectProps?.selectRef?.current?.select;
    const selectValueSync = select?.state?.selectValue;
    const selectValueAsync = select?.state?.value?.searchHeader;
    const { searchHeaderOption } = selectProps?.parentInstance;
    const { inputValue } = selectProps;
    // Focus on first option and differenciate between Group Options and simple options
    let focusThis = props?.children[1]?.props.data;
    if (focusThis?.options) {
      focusThis = props?.children[1].props?.options[0]?.data;
    }
    focusThis = focusThis || searchHeaderOption;
    // Clear the value if header option is selected
    if (selectValueSync && selectValueSync[0]?.searchHeader) {
      select?.clearValue();
    }
    if (selectValueAsync) {
      select?.select?.clearValue();
    }
    // Initially, remove the focus from the headerOption
    React.useEffect(() => {
      select?.setState({ focusedOption: null });
    }, [selectProps.selectRef]);
    // Update the focus depending on the inputValue. 
    React.useEffect(() => {
      select?.setState({ focusedOption: focusThis });
      selectProps.parentInstance.searchHeaderOption.value = inputValue;
    }, [inputValue]);
    // Skip focusing on the headerOption if the inputValue is empty
    React.useEffect(() => {
      if (select?.state?.focusedOption?.value === '') {
        select?.setState({ focusedOption: focusThis });
      }
    }, [select?.state?.focusedOption]);
  }
  return <components.MenuList
    className={'tk-mt-1 tk-mb-1'}
    {...props}
  >
    {props.children}
  </components.MenuList>;
}

export function Dropdown<T>({
  className = '',
  components = {},
  formatOptionLabel,
  isDisabled = false,
  isSearchable = false,
  onChange: _onChange,
  options = [],
  placeholder,
  value: _value,
}: DropdownProps<T>) {
  const onChange = useCallback(
    (option: DropdownOption<T> | null): void => {
      option && _onChange(option.value);
    },
    [_onChange]
  );

  const value = useMemo(() => {
    if (isGroupedOptions(options)) {
      return options
        .reduce((result: DropdownOption<T>[], { options }) => [...result, ...options], [])
        .find(({ value }) => value === _value);
    }

    return (options as DropdownOption<T>[]).find(({ value }) => value === _value);
  }, [options, _value]);

  return (
    <Select
      className={classes('dropdown', className)}
      classNamePrefix="dropdown"
      components={{ Control, DropdownIndicator, Input, Option, ...components }}
      formatOptionLabel={formatOptionLabel}
      isDisabled={isDisabled}
      isSearchable={isSearchable}
      onChange={onChange}
      options={options}
      placeholder={placeholder}
      styles={{
        dropdownIndicator: provided => ({ ...provided, padding: '0.25rem' }),
        input: provided => ({ ...provided, color: 'unset' }),
        option: () => ({}),
      }}
      value={value}
    />
  );
}

function Input<T>(props: InputProps<DropdownOption<T>, false>) {
  return (
    <components.Input
      {...props}
      inputClassName="dark:text-white outline-none border-none shadow-none focus:ring-transparent"
    />
  );
}

function Control<T>(props: ControlProps<DropdownOption<T>, false>) {
  return <components.Control {...props} className={classes(props.className, 'min-h-0')} />;
}

Option = ({ className, ...props }: OptionProps) => {
  return (
    <components.Option
      {...props}
      className="my-1 py-0 py-0 px-2 bg-grey-0 active:bg-grey-0"
    >
      <div
        className={`item-renderer h-full hover:bg-grey-10 py-2 px-2 cursor-pointer rounded`}
      >
        <div className="items-center h-full flex">
          {props.data?.value !== "all" && props.data?.label !== "Select All" ? (
            <>
              {props.isMulti ? (
                <CheckboxAdornment {...props} />
              ) : (
                <RadioAdornment {...props} />
              )}
              <span className="ml-3 text-grey-90 inter-base-regular">
                {props.data.label}
              </span>
            </>
          ) : (
            <span className="text-grey-90 inter-base-regular">
              {props.data.label}
            </span>
          )}
        </div>
      </div>
    </components.Option>
  )
}

SingleValue = ({ children, ...props }: SingleValueProps) => {
  if (props.selectProps.menuIsOpen && props.selectProps.isSearchable) {
    return null
  }

  return <components.SingleValue {...props}>{children}</components.SingleValue>
}

Placeholder = (props: PlaceholderProps) => {
  return props.selectProps.menuIsOpen ? null : (
    <components.Placeholder {...props} />
  )
}

SortableMultiValueLabel = SortableHandle(props => (
	<components.MultiValueLabel {...props} />
))

SingleValue = (props: SingleValueProps<SelectOption>) => {
  return (
    <components.SingleValue {...props}>
      {props.data.icon == null ? null : <Icn {...props.data.icon} />}
      <span style={{ paddingLeft: 4 }}>{props.children}</span>
    </components.SingleValue>
  )
}

MultiValueContainerOverride = ({ children, ...props }: any) =>
  <components.MultiValueContainer {...props}>
    <div>{children}</div>
  </components.MultiValueContainer>

Input = (props: InputProps) => {
  const value = (props as any).value
  const isHidden = value.length !== 0 ? false : props.isHidden
  return <components.Input {...props} isHidden={isHidden} />
}

ClearIndicator = (props: any) =>
  <components.ClearIndicator {...props}>
    <Icon className="tk-select__close-icon" iconName="cross-round" onKeyPress={props.clearValue} tabIndex={0} />
  </components.ClearIndicator>

NoOptionsMessage = ({ selectProps, ...props }: any) =>
  <components.NoOptionsMessage {...props}>
    <div>{selectProps?.noOptionMessage}</div>
  </components.NoOptionsMessage>