Untitled
unknown
javascript
3 years ago
1.5 kB
6
Indexable
type Placeholder<TOption> = { label: string; value: TOption } | string; type SingleValueProps<TOption> = { onChange?: (value: TOption) => void; value: TOption; }; type MultipleValueProps<TOption> = SingleValueProps<TOption[]>; type DropdownOptionsBoxProps<TOption> = { placeholder: Placeholder<TOption>; } & (SingleValueProps<TOption> | MultipleValueProps<TOption>); const DropdownOptionsBox = <TOption,>(props: DropdownOptionsBoxProps<TOption>) => { return <Checkbox onChange={props.onChange}>{props.value}</Checkbox>; }; type DropdownProps<TOption> = { placeholder: Placeholder<TOption>; onChange?: (value: TOption) => void; value: TOption; }; const Dropdown = <TOption,>(props: DropdownProps<TOption>) => { return ( <div> <DropdownOptionsBox placeholder={props.placeholder} value={props.value} onChange={props.onChange} /> </div> ); }; type MultiselectDropdownProps<TOption> = { placeholder: Placeholder<TOption>; onChange?: (value: TOption[]) => void; value: TOption[]; }; const MultiselectDropdown = <TOption,>(props: MultiselectDropdownProps<TOption>) => { return ( <div> <DropdownOptionsBox placeholder={props.placeholder} value={props.value} onChange={props.onChange} /> </div> ); };
Editor is loading...