Skip to content

Instantly share code, notes, and snippets.

@davidgilbertson
Last active April 18, 2021 06:45
Show Gist options
  • Save davidgilbertson/fdf93b467ab198fd5fe86511086ad48f to your computer and use it in GitHub Desktop.
Save davidgilbertson/fdf93b467ab198fd5fe86511086ad48f to your computer and use it in GitHub Desktop.
type Nullable<IdType, RequiredType> = RequiredType extends true ? IdType : IdType | null;
export type SelectProps<IdType extends string, RequiredType extends boolean> = {
options: Array<{id: IdType; name: string}>;
selectedItemId: Nullable<IdType, RequiredType>;
onSelect: (id: Nullable<IdType, RequiredType>) => void;
required?: RequiredType;
};
const Select = <IdType extends string, RequiredType extends boolean>(
props: SelectProps<IdType, RequiredType>,
) => (
<select
value={props.selectedItemId ?? 'NULL_SELECTION'}
required={props.required}
onChange={e => {
const selectedId = e.target.value === 'NULL_SELECTION' ? null : e.target.value;
props.onSelect(selectedId as Nullable<IdType, RequiredType>);
}}
>
{!props.required && <option value="NULL_SELECTION">None selected</option>}
{props.options.map(option => (
<option key={option.id} value={option.id}>
{option.name}
</option>
))}
</select>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment