diff options
Diffstat (limited to 'src/components/atoms/forms/select.tsx')
| -rw-r--r-- | src/components/atoms/forms/select.tsx | 79 |
1 files changed, 0 insertions, 79 deletions
diff --git a/src/components/atoms/forms/select.tsx b/src/components/atoms/forms/select.tsx deleted file mode 100644 index 14f85dc..0000000 --- a/src/components/atoms/forms/select.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { ChangeEvent, FC, SelectHTMLAttributes, SetStateAction } from 'react'; -import styles from './forms.module.scss'; - -export type SelectOptions = { - /** - * The option id. - */ - id: string; - /** - * The option name. - */ - name: string; - /** - * The option value. - */ - value: string; -}; - -export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & { - /** - * Field id attribute. - */ - id: string; - /** - * Field name attribute. - */ - name: string; - /** - * True if the field is required. Default: false. - */ - options: SelectOptions[]; - /** - * Callback function to set field value. - */ - setValue: (value: SetStateAction<string>) => void; - /** - * Field value. - */ - value: string; -}; - -/** - * Select component - * - * Render a HTML select element. - */ -export const Select: FC<SelectProps> = ({ - className = '', - options, - setValue, - ...props -}) => { - const selectClass = `${styles.field} ${styles['field--select']} ${className}`; - - /** - * Update select value when an option is selected. - * @param e - The option change event. - */ - const updateValue = (e: ChangeEvent<HTMLSelectElement>) => { - setValue(e.target.value); - }; - - /** - * Get the option elements. - * @returns {JSX.Element[]} An array of HTML option elements. - */ - const getOptions = (): JSX.Element[] => - options.map((option) => ( - <option key={option.id} value={option.value}> - {option.name} - </option> - )); - - return ( - <select {...props} className={selectClass} onChange={updateValue}> - {getOptions()} - </select> - ); -}; |
