48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import clsx from 'clsx';
|
|
import React from 'react';
|
|
|
|
export type KintonePluginSelectOptionData = {
|
|
value: string;
|
|
label: string;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
export type KintonePluginSelectProps = {
|
|
className?: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
options: KintonePluginSelectOptionData[];
|
|
};
|
|
|
|
const KintonePluginSelect: React.FC<KintonePluginSelectProps> = (props) => {
|
|
const { className, value, onChange, options } = props;
|
|
const optionWithKeys = React.useMemo(
|
|
() =>
|
|
options.map((option) => ({
|
|
...option,
|
|
key: crypto.randomUUID(),
|
|
})),
|
|
[options],
|
|
);
|
|
if (options.length === 0) {
|
|
return null;
|
|
}
|
|
const handleOnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
onChange(e.target.value);
|
|
};
|
|
return (
|
|
<div className={clsx('kintoneplugin-select-outer', className)}>
|
|
<div className="kintoneplugin-select">
|
|
<select value={value} onChange={handleOnChange}>
|
|
{optionWithKeys.map(({ key, value: itemValue, label, disabled }) => (
|
|
<option key={key} value={itemValue} disabled={disabled}>
|
|
{label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default KintonePluginSelect;
|