Merge pull request #507 from cornell-dti/dka34/select

Select Component - dropdown with fuzzy search and multi-select capability

frontend/package.json

@@ -33,6 +33,7 @@
     "react-router-dom": "^6.26.2",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "^5.0.1",
+    "react-select": "^5.8.1",
     "reactjs-popup": "^2.0.6"
   },
   "scripts": {
@@ -71,4 +72,4 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "2.8.8"
   }
-}
+}

frontend/src/components/FormElements/FormElements.tsx

@@ -1,6 +1,14 @@
 import React, { SelectHTMLAttributes } from 'react';
 import cn from 'classnames';
 import styles from './formelements.module.css';
+import Select, { ActionMeta, Props as SelectProps } from 'react-select';
+import {
+  Control,
+  RegisterOptions,
+  useController,
+  Path,
+  FieldValues,
+} from 'react-hook-form';
 
 type LabelType = React.DetailedHTMLProps<
   React.LabelHTMLAttributes<HTMLLabelElement>,
@@ -73,3 +81,61 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     );
   }
 );
+
+type Option = {
+  id: string;
+  name: string;
+};
+
+type SelectOption = {
+  value: string;
+  label: string;
+};
+
+type SelectComponentProps<TFieldValues extends FieldValues> = SelectProps & {
+  control: Control<TFieldValues>;
+  name: Path<TFieldValues>;
+  datalist: Option[];
+  className?: string;
+  rules?: RegisterOptions<TFieldValues>;
+};
+
+export const SelectComponent = <TFieldValues extends FieldValues>({
+  control,
+  name,
+  datalist,
+  className,
+  rules,
+  ...rest
+}: SelectComponentProps<TFieldValues>) => {
+  const {
+    field: { onChange, value, ref, ...inputProps },
+  } = useController<TFieldValues>({
+    name,
+    control,
+    rules,
+  });
+
+  const transformedOptions = datalist.map((data) => ({
+    value: data.id,
+    label: data.name,
+  }));
+
+  const selectedOption = transformedOptions.find(
+    (option) => option.value === value
+  );
+
+  return (
+    <Select
+      {...inputProps}
+      options={transformedOptions}
+      className={cn(styles.customSelect, className)}
+      onChange={(newValue: unknown) => {
+        const option = newValue as SelectOption | null;
+        onChange(option?.value);
+      }}
+      value={selectedOption}
+      {...rest}
+    />
+  );
+};