| 1 |
import classnames from 'classnames/dedupe'; |
| 2 |
import selectStyles from 'gutenberg-react-select-styles'; |
| 3 |
import Select, { components } from 'react-select'; |
| 4 |
import { AutoSizer, List } from 'react-virtualized'; |
| 5 |
|
| 6 |
const rowHeight = 26; |
| 7 |
|
| 8 |
function MenuList(props) { |
| 9 |
const { children, maxHeight } = props; |
| 10 |
|
| 11 |
if (!children.length) { |
| 12 |
return null; |
| 13 |
} |
| 14 |
|
| 15 |
return ( |
| 16 |
<AutoSizer disableHeight> |
| 17 |
{({ width }) => { |
| 18 |
return ( |
| 19 |
<List |
| 20 |
height={maxHeight} |
| 21 |
rowCount={children.length} |
| 22 |
rowHeight={rowHeight} |
| 23 |
rowRenderer={({ index, key, style }) => { |
| 24 |
return ( |
| 25 |
<div key={key} style={style}> |
| 26 |
{children[index]} |
| 27 |
</div> |
| 28 |
); |
| 29 |
}} |
| 30 |
width={width} |
| 31 |
/> |
| 32 |
); |
| 33 |
}} |
| 34 |
</AutoSizer> |
| 35 |
); |
| 36 |
} |
| 37 |
|
| 38 |
const { Option: DefaultOption } = components; |
| 39 |
function Option(props) { |
| 40 |
return ( |
| 41 |
<DefaultOption {...props}> |
| 42 |
{props?.data?.icon || ''} |
| 43 |
{props.data.label} |
| 44 |
</DefaultOption> |
| 45 |
); |
| 46 |
} |
| 47 |
|
| 48 |
/** |
| 49 |
* Component Class |
| 50 |
* |
| 51 |
* @param props |
| 52 |
*/ |
| 53 |
export default function SelectComponent(props) { |
| 54 |
const { className, ...restProps } = props; |
| 55 |
|
| 56 |
const selectProps = { |
| 57 |
...(props.grouped |
| 58 |
? { |
| 59 |
groupHeaderHeight: 50, |
| 60 |
} |
| 61 |
: {}), |
| 62 |
...restProps, |
| 63 |
}; |
| 64 |
|
| 65 |
// Add virtualized if there are > 30 items. |
| 66 |
const withVirtualized = props?.options?.length > 30; |
| 67 |
|
| 68 |
return ( |
| 69 |
<Select |
| 70 |
styles={{ |
| 71 |
...selectStyles, |
| 72 |
option(styles, state) { |
| 73 |
const newStyles = selectStyles.option(styles, state); |
| 74 |
|
| 75 |
newStyles['> svg'] = { |
| 76 |
width: '24px', |
| 77 |
height: 'auto', |
| 78 |
marginRight: '5px', |
| 79 |
}; |
| 80 |
|
| 81 |
return newStyles; |
| 82 |
}, |
| 83 |
}} |
| 84 |
components={{ ...(withVirtualized ? { MenuList } : {}), Option }} |
| 85 |
className={classnames('ghostkit-control-select', className)} |
| 86 |
{...selectProps} |
| 87 |
/> |
| 88 |
); |
| 89 |
} |
| 90 |
|
