import React , { MouseEventHandler } from 'react' ; import Select , { components , MultiValueGenericProps , MultiValueProps , OnChangeValue , Props , } from 'react-select' ; import { SortableContainer , SortableContainerProps , SortableElement , SortEndHandler , SortableHandle , } from 'react-sortable-hoc' ; import { ColourOption , colourOptions } from '../data' ; function arrayMove < T > ( array , from , to ) { const slicedArray = array . slice ( ) ; slicedArray . splice ( to < 0 ? array . length + to : to , 0 , slicedArray . splice ( from , 1 ) [ 0 ] ) ; return slicedArray ; } const SortableMultiValue = SortableElement ( ( props ) => { const onMouseDown = ( e ) => { e . preventDefault ( ) ; e . stopPropagation ( ) ; } ; const innerProps = { ... props . innerProps , onMouseDown } ; return < components . MultiValue { ... props } innerProps = { innerProps } / > ; } ) ; const SortableMultiValueLabel = SortableHandle ( ( props ) => < components . MultiValueLabel { ... props } / > ) ; const SortableSelect = SortableContainer ( Select ) as React . ComponentClass < Props < ColourOption , true > & SortableContainerProps > ; export default function MultiSelectSort ( ) { const [ selected , setSelected ] = React . useState < readonly ColourOption [ ] > ( [ colourOptions [ 4 ] , colourOptions [ 5 ] , ] ) ; const onChange = ( selectedOptions ) => setSelected ( selectedOptions ) ; const onSortEnd = ( { oldIndex , newIndex } ) => { const newValue = arrayMove ( selected , oldIndex , newIndex ) ; setSelected ( newValue ) ; console . log ( 'Values sorted:' , newValue . map ( ( i ) => i . value ) ) ; } ; return ( < SortableSelect useDragHandle axis = "xy" onSortEnd = { onSortEnd } distance = { 4 } getHelperDimensions = { ( { node } ) => node . getBoundingClientRect ( ) } isMulti options = { colourOptions } value = { selected } onChange = { onChange } components = { { MultiValue : SortableMultiValue , MultiValueLabel : SortableMultiValueLabel , } } closeMenuOnSelect = { false } / > ) ; }