react-select#MultiValueProps TypeScript Examples

The following examples show how to use react-select#MultiValueProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: ReactSelectCustomization.tsx From ke with MIT License

6 votes

export function MultiValue<OptionType>(props: MultiValueProps<OptionType>): JSX.Element {
  const { children, className, cx, getStyles, innerProps, isDisabled, removeProps, data, selectProps } = props

  const { multiValueContainer, multiValueLabel, multiValueRemove } = useStyles()

  const externalClassName = (selectProps as ExtendedProps).componentsClasses?.MultiValue

  return (
    <ClassNames>
      {({ css, cx: emotionCx }) => (
        <Tag data={data} sx={multiValueContainer} {...innerProps} className={classNames(className, externalClassName)}>
          <TagLabel sx={multiValueLabel} className={className}>
            {children}
          </TagLabel>
          <TagCloseButton
            className={emotionCx(
              css(getStyles('multiValueRemove', props)),
              cx(
                {
                  'multi-value__remove': true,
                },
                className
              )
            )}
            isDisabled={isDisabled}
            {...removeProps}
            sx={multiValueRemove}
          />
        </Tag>
      )}
    </ClassNames>
  )
}

Example #2

Source File: Selects.tsx From core with GNU Affero General Public License v3.0

6 votes

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}
	/>
}

Example #3

Source File: index.tsx From admin with MIT License

6 votes

MultiValueLabel = ({ ...props }: MultiValueProps) => {
  const isLast =
    props.data === props.selectProps.value[props.selectProps.value.length - 1]

  if (props.selectProps.menuIsOpen && props.selectProps.isSearchable) {
    return <></>
  }

  return (
    <div
      className={clsx("bg-grey-5 mx-0 inter-base-regular p-0", {
        "after:content-[',']": !isLast,
      })}
    >
      {props.children}
    </div>
  )
}

Example #4

Source File: FeSelect.tsx From frontegg-react with MIT License

4 votes

FeSelect = (props: SelectProps) => {
  const [open, setOpen] = useState(false);
  const { t } = useT();
  const {
    label,
    value,
    onChange,
    onClose,
    options,
    onOpen,
    name,
    open: openProps,
    loading,
    noOptionsText,
    loadingText,
    multiselect,
    getOptionLabel,
    renderOption,
    fullWidth,
    onBlur,
    disableMenuPortalTarget,
  } = props;

  const getState = useCallback(
    (option: MultiValueProps<any> | any) => ({
      selected: option.selectProps.isSelected,
      disabled: option.selectProps.isDisabled,
      index: option.selectProps.options?.findIndex(
        (o: SelectOptionProps<string>) => o.value === option.selectProps.value
      ),
    }),
    []
  );

  const MultiValueLabel = useCallback(
    (props) => (
      <components.MultiValueLabel {...props}>{renderOption?.(props.data, getState(props))}</components.MultiValueLabel>
    ),
    [renderOption]
  );

  const customStyles = {
    container: (provided: any, { selectProps: { width } }: any) => ({
      ...provided,
      minWidth: '14em',
      width: typeof fullWidth === 'boolean' ? width : '100%',
      maxWidth: '100%',
    }),
    menuPortal: (provided: any) => {
      const { zIndex, ...rest } = provided;
      return { ...rest, zIndex: 1051 };
    },
  };

  const className = classNames(
    ClassNameGenerator.generate({
      prefixCls: 'fe-select',
      className: props.className,
      isFullWidth: props.fullWidth,
    }),
    {
      'fe-input__in-form ': props.inForm,
    }
  );

  return (
    <Select
      isDisabled={props.disabled}
      classNamePrefix={'fe-select'}
      name={name}
      className={className}
      styles={customStyles}
      isMulti={multiselect ?? false}
      placeholder={label}
      value={value}
      width={fullWidth ? '100%' : 'max-content'}
      components={renderOption ? { MultiValueLabel } : {}}
      options={options}
      menuPortalTarget={disableMenuPortalTarget ? undefined : document.body}
      isLoading={loading ?? false}
      {...(multiselect && { closeMenuOnSelect: false })}
      onBlur={(e) => {
        onBlur && onBlur({ ...e, target: { ...e.target, name } });
      }}
      menuIsOpen={openProps ?? open}
      loadingMessage={() => loadingText ?? `${t('common.loading')}...`}
      noOptionsMessage={() => noOptionsText ?? t('common.empty-items')}
      onMenuOpen={() => (onOpen ? onOpen : setOpen(true))}
      onMenuClose={() => (onClose ? onClose : setOpen(false))}
      onChange={(newValues, e: any) => onChange?.(e, newValues ?? [])}
      getOptionLabel={(option) => (getOptionLabel ? getOptionLabel(option) : option.label)}
    />
  );
}