react-select#OptionTypeBase TypeScript Examples

The following examples show how to use react-select#OptionTypeBase. 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: utils.ts    From utopia with MIT License 7 votes vote down vote up 
/**
 * A type guard for React Select's onChange values, which can either be a value
 * or an array of values.
 */
export function isOptionsType<T extends OptionTypeBase>(
  value: ValueType<T>,
): value is OptionsType<T> {
  return Array.isArray(value)
}
Example #2
Source File: ReactSelectCustomization.tsx    From ke with MIT License 6 votes vote down vote up 
modifyStyles = <OptionType extends OptionTypeBase, IsMulti extends boolean>(
  externalStyles?: StylesConfig<OptionType, IsMulti>
): StylesConfig<OptionType, IsMulti> => ({
  ...externalStyles,
  valueContainer(prevStyles, state) {
    const defaultStyles: CSSObject = {
      ...prevStyles,
      padding: '2px 0',
      marginLeft: state.isMulti ? '-2px' : undefined,
    }
    if (externalStyles?.valueContainer) {
      return externalStyles.valueContainer(defaultStyles, state)
    }
    return defaultStyles
  },
  control(_, state) {
    if (externalStyles?.control) {
      return externalStyles.control({}, state)
    }
    return {}
  },
})
Example #3
Source File: Select.tsx    From ke with MIT License 6 votes vote down vote up 
Select = <
  OptionType extends OptionTypeBase = { label: string; value: string },
  IsMulti extends boolean = false
>({
  components: externalComponents,
  styles,
  ...props
}: Props<OptionType, IsMulti>): JSX.Element => (
  // Это обёртка
  // eslint-disable-next-line react/jsx-props-no-spreading
  <BaseSelect components={{ ...components, ...externalComponents }} styles={modifyStyles(styles)} {...props} />
)
Example #4
Source File: StatefulAsyncSelect.tsx    From ke with MIT License 6 votes vote down vote up 
StatefullAsyncSelect = <OptionType extends OptionTypeBase>({
  resource,
  searchParamName = 'search',
  ...props
}: StatefullAsyncSelecProps<OptionType, number>): React.ReactElement => {
  const fetchResource = useFetchResource<ListResponse<OptionType>>(resource)

  const handleLoadOptoins: LoadOptions<OptionType, number> = useCallback(
    async (search: string, _, page = 0) => {
      const data = await fetchResource({
        requestConfig: {
          params: {
            [searchParamName]: search,
            page,
          },
        },
      })

      return {
        hasMore: !!data.meta?.next_url,
        options: data.data,
        additional: data.meta.page + 1,
      }
    },
    [fetchResource, searchParamName]
  )
  // Это обёртка
  // eslint-disable-next-line react/jsx-props-no-spreading
  return <AsyncPaginate {...(props as any)} loadOptions={handleLoadOptoins} />
}
Example #5
Source File: utils.ts    From utopia with MIT License 6 votes vote down vote up 
/**
 * A type guard for React Select's onChange values, which can either be a value
 * or an array of values.
 */
export function isOptionType<T extends OptionTypeBase>(value: ValueType<T>): value is T {
  return value != null && !Array.isArray(value)
}
Example #6
Source File: Selects.tsx    From core with GNU Affero General Public License v3.0 6 votes vote down vote up 
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}
	/>
}