import Select from '../atoms/select';
import './select2.scss';
/**
* Default settings of the select 2
*
* @return {{placeholder: string, allowClear: boolean, dir: string}}
*/
const getDefaultSettings = () => ( {
allowClear: true,
placeholder: '',
dir: elementorCommon.config.isRTL ? 'rtl' : 'ltr',
} );
/**
* Main component
*
* @param {*} props
* @return {*} component
* @function Object() { [native code] }
*/
export default function Select2( props ) {
const ref = React.useRef( null );
// Initiate the select 2 library, call to onReady after initiate, and
// listen to select event on the select instance.
React.useEffect( () => {
const $select2 = jQuery( ref.current )
.select2( {
...getDefaultSettings(),
...props.settings,
placeholder: props.placeholder,
} )
.on( 'select2:select select2:unselect', props.onChange );
if ( props.onReady ) {
props.onReady( $select2 );
}
return () => {
$select2.select2( 'destroy' ).off( 'select2:select select2:unselect' );
};
}, [ props.settings, props.options ] );
// Listen to changes in the prop `value`, if changed update the select 2.
React.useEffect( () => {
jQuery( ref.current ).val( props.value ).trigger( 'change' );
}, [ props.value ] );
return <Select
multiple={ props.multiple }
value={ props.value }
onChange={ props.onChange }
elRef={ ref }
options={ props.options }
placeholder={ props.placeholder }
/>;
}
Select2.propTypes = {
value: PropTypes.oneOfType( [ PropTypes.array, PropTypes.string ] ),
onChange: PropTypes.func,
onReady: PropTypes.func,
options: PropTypes.array,
settings: PropTypes.object,
multiple: PropTypes.bool,
placeholder: PropTypes.string,
};
Select2.defaultProps = {
settings: {},
options: [],
dependencies: [],
placeholder: '',
};