Convert Form Components to TypeScript

frontend/src/Components/Form/SelectInput.tsx

@@ -0,0 +1,76 @@
+import classNames from 'classnames';
+import React, { ChangeEvent, SyntheticEvent, useCallback } from 'react';
+import { InputChanged } from 'typings/inputs';
+import styles from './SelectInput.css';
+
+interface SelectInputOption {
+  key: string;
+  value: string | number | (() => string | number);
+}
+
+interface SelectInputProps<T> {
+  className?: string;
+  disabledClassName?: string;
+  name: string;
+  value: string | number;
+  values: SelectInputOption[];
+  isDisabled?: boolean;
+  hasError?: boolean;
+  hasWarning?: boolean;
+  autoFocus?: boolean;
+  onChange: (change: InputChanged<T>) => void;
+  onBlur?: (event: SyntheticEvent) => void;
+}
+
+function SelectInput<T>({
+  className = styles.select,
+  disabledClassName = styles.isDisabled,
+  name,
+  value,
+  values,
+  isDisabled = false,
+  hasError,
+  hasWarning,
+  autoFocus = false,
+  onBlur,
+  onChange,
+}: SelectInputProps<T>) {
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLSelectElement>) => {
+      onChange({
+        name,
+        value: event.target.value as T,
+      });
+    },
+    [name, onChange]
+  );
+
+  return (
+    <select
+      className={classNames(
+        className,
+        hasError && styles.hasError,
+        hasWarning && styles.hasWarning,
+        isDisabled && disabledClassName
+      )}
+      disabled={isDisabled}
+      name={name}
+      value={value}
+      autoFocus={autoFocus}
+      onChange={handleChange}
+      onBlur={onBlur}
+    >
+      {values.map((option) => {
+        const { key, value: optionValue, ...otherOptionProps } = option;
+
+        return (
+          <option key={key} value={key} {...otherOptionProps}>
+            {typeof optionValue === 'function' ? optionValue() : optionValue}
+          </option>
+        );
+      })}
+    </select>
+  );
+}
+
+export default SelectInput;