export default function Select( props ) {
return (
<select multiple={ props.multiple } className={ props.className } value={ props.value } onChange={ props.onChange } ref={ props.elRef } onClick={ () => props.onClick?.() }>
{ props.options.map( ( option ) =>
option.children
? <optgroup label={ option.label } key={ option.label }>
{ option.children.map( ( childOption ) =>
<option key={ childOption.value } value={ childOption.value }>
{ childOption.label }
</option>,
) }
</optgroup>
: <option key={ option.value } value={ option.value }>
{ option.label }
</option>,
) }
</select>
);
}
Select.propTypes = {
className: PropTypes.string,
onChange: PropTypes.func,
options: PropTypes.array,
elRef: PropTypes.object,
multiple: PropTypes.bool,
value: PropTypes.oneOfType( [ PropTypes.array, PropTypes.string ] ),
onClick: PropTypes.func,
};
Select.defaultProps = {
className: '',
options: [],
};