index.js
82 lines
| 1 | /** |
| 2 | * Vendor dependencies |
| 3 | */ |
| 4 | import PropTypes from 'prop-types'; |
| 5 | import Select from 'react-select'; |
| 6 | |
| 7 | /** |
| 8 | * WordPress dependencies |
| 9 | */ |
| 10 | const { useInstanceId } = wp.compose; |
| 11 | const { BaseControl } = wp.components; |
| 12 | const { __ } = wp.i18n; |
| 13 | |
| 14 | /** |
| 15 | * Styles |
| 16 | */ |
| 17 | import './style.scss'; |
| 18 | |
| 19 | const MultiSelectControl = ( { name, label, help, className, value, placeholder, hideLabelFromVision, isLoading, isDisabled, onChange, options } ) => { |
| 20 | const instanceId = useInstanceId( MultiSelectControl ); |
| 21 | const id = `give-multi-select-control-${ name }-${ instanceId }`; |
| 22 | |
| 23 | if ( options && options.length < 1 ) { |
| 24 | return null; |
| 25 | } |
| 26 | return ( |
| 27 | <BaseControl |
| 28 | label={ label } |
| 29 | hideLabelFromVision={ hideLabelFromVision } |
| 30 | id={ id } |
| 31 | help={ help } |
| 32 | className={ className } |
| 33 | > |
| 34 | <Select |
| 35 | isLoading={ isLoading } |
| 36 | inputId={ id } |
| 37 | value={ value } |
| 38 | onChange={ ( selectedOptions ) => onChange( selectedOptions ) } |
| 39 | options={ options } |
| 40 | maxMenuHeight="200px" |
| 41 | isDisabled={ isDisabled } |
| 42 | placeholder={ placeholder } |
| 43 | isMulti={ true } |
| 44 | theme={ ( theme ) => ( { |
| 45 | ...theme, |
| 46 | colors: { |
| 47 | ...theme.colors, |
| 48 | primary: '#007cba', |
| 49 | primary75: '#31a6e0', |
| 50 | primary50: '#5dbae8', |
| 51 | primary25: '#9edaf7', |
| 52 | }, |
| 53 | } ) } |
| 54 | /> |
| 55 | </BaseControl> |
| 56 | ); |
| 57 | }; |
| 58 | |
| 59 | MultiSelectControl.propTypes = { |
| 60 | label: PropTypes.string, |
| 61 | value: PropTypes.any.isRequired, |
| 62 | onChange: PropTypes.func, |
| 63 | options: PropTypes.array.isRequired, |
| 64 | name: PropTypes.string.isRequired, |
| 65 | help: PropTypes.string, |
| 66 | className: PropTypes.string, |
| 67 | hideLabelFromVision: PropTypes.bool, |
| 68 | isLoading: PropTypes.bool, |
| 69 | isDisabled: PropTypes.bool, |
| 70 | placeholder: PropTypes.string, |
| 71 | }; |
| 72 | |
| 73 | MultiSelectControl.defaultProps = { |
| 74 | label: null, |
| 75 | value: null, |
| 76 | onChange: null, |
| 77 | placeholder: `${ __( 'Select', 'give' ) }...`, |
| 78 | options: null, |
| 79 | }; |
| 80 | |
| 81 | export default MultiSelectControl; |
| 82 |