72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { Icon, chevronDown } from '@wordpress/icons';
|
|
import { useCallback, useId } from '@wordpress/element';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
|
|
type SelectProps = Omit<
|
|
React.SelectHTMLAttributes< HTMLSelectElement >,
|
|
'onChange'
|
|
> & {
|
|
options: { value: string; label: string }[];
|
|
label: string;
|
|
onChange: ( newVal: string ) => void;
|
|
};
|
|
|
|
export const Select = ( props: SelectProps ) => {
|
|
const { onChange, options, label, value, className, size, ...restOfProps } =
|
|
props;
|
|
|
|
const selectOnChange = useCallback(
|
|
( event: React.ChangeEvent< HTMLSelectElement > ) => {
|
|
onChange( event.target.value );
|
|
},
|
|
[ onChange ]
|
|
);
|
|
|
|
const generatedId = useId();
|
|
|
|
const inputId =
|
|
restOfProps.id || `wc-blocks-components-select-${ generatedId }`;
|
|
|
|
return (
|
|
<div className={ `wc-blocks-components-select ${ className || '' }` }>
|
|
<div className="wc-blocks-components-select__container">
|
|
<label
|
|
htmlFor={ inputId }
|
|
className="wc-blocks-components-select__label"
|
|
>
|
|
{ label }
|
|
</label>
|
|
<select
|
|
className="wc-blocks-components-select__select"
|
|
id={ inputId }
|
|
size={ size !== undefined ? size : 1 }
|
|
onChange={ selectOnChange }
|
|
value={ value }
|
|
{ ...restOfProps }
|
|
>
|
|
{ options.map( ( option ) => (
|
|
<option
|
|
key={ option.value }
|
|
value={ option.value }
|
|
data-alternate-values={ `[${ option.label }]` }
|
|
>
|
|
{ option.label }
|
|
</option>
|
|
) ) }
|
|
</select>
|
|
<Icon
|
|
className="wc-blocks-components-select__expand"
|
|
icon={ chevronDown }
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|