react-select#GroupTypeBase TypeScript Examples

The following examples show how to use react-select#GroupTypeBase. 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: 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}
	/>
}