migrated Select component to .tsx

Author: recondesigns

components/Form/Select/Select.js renamed to components/Form/Select/Select.tsx

@@ -15,64 +15,101 @@ import Label from 'components/Form/Label/Label';
 import ThemedReactSelect from './ThemedReactSelect';
 import styles from './Select.module.css';
 
-Select.propTypes = {
-  field: shape({
-    name: string.isRequired,
-    value: oneOfType([string, number, bool, arrayOf(string), arrayOf(number), arrayOf(bool)])
-      .isRequired,
-  }).isRequired,
-  form: shape({
-    // TODO: Resolve why multiselects can end up with touched: { key: array }
-    // see ThemedReactSelect as well
-    // touched: objectOf(bool).isRequired,
-    touched: object.isRequired,
-    errors: objectOf(string).isRequired,
-    setFieldTouched: func.isRequired,
-    setFieldValue: func.isRequired,
-  }).isRequired,
-  hasValidationStyling: bool,
-  id: oneOfType([string, number]),
-  isLabelHidden: bool,
-  isMulti: bool,
-  isSearchable: bool,
-  label: string.isRequired,
-  options: arrayOf(shape({ label: string.isRequired, value: string.isRequired }).isRequired)
-    .isRequired,
+type FieldType = {
+  name: string;
+  value: string | string[] | number | number[] | boolean | boolean[];
 };
 
-Select.defaultProps = {
-  hasValidationStyling: true,
-  id: undefined,
-  isLabelHidden: false,
-  isMulti: false,
-  isSearchable: true,
+type TouchedType = Record<string, any>;
+
+type ErrorsType = {
+  [key: string]: string;
+};
+
+type FormType = {
+  touched: TouchedType;
+  errors: ErrorsType;
+  setFieldTouched: (name: string) => void;
+  setFieldValue: (name: string, value: string | string[]) => void;
+};
+
+type SelectOptionType = {
+  label: string;
+  value: string;
+};
+
+type SelectOptionsType = SelectOptionType[];
+
+export type SelectPropsType = {
+  field: FieldType;
+  form: FormType;
+  options: SelectOptionsType;
+  label: string;
+  hasValidationStyling?: boolean;
+  id?: string;
+  isLabelHidden?: boolean;
+  isMulti?: boolean;
+  isSearchable?: boolean;
 };
 
+// Select.propTypes = {
+//   field: shape({
+//     name: string.isRequired,
+//     value: oneOfType([string, number, bool, arrayOf(string), arrayOf(number), arrayOf(bool)])
+//       .isRequired,
+//   }).isRequired,
+//   form: shape({
+//     // TODO: Resolve why multiselects can end up with touched: { key: array }
+//     // see ThemedReactSelect as well
+//     // touched: objectOf(bool).isRequired,
+//     touched: object.isRequired,
+//     errors: objectOf(string).isRequired,
+//     setFieldTouched: func.isRequired,
+//     setFieldValue: func.isRequired,
+//   }).isRequired,
+//   hasValidationStyling: bool,
+//   id: oneOfType([string, number]),
+//   isLabelHidden: bool,
+//   isMulti: bool,
+//   isSearchable: bool,
+//   label: string.isRequired,
+//   options: arrayOf(shape({ label: string.isRequired, value: string.isRequired }).isRequired)
+//     .isRequired,
+// };
+
+// Select.defaultProps = {
+//   hasValidationStyling: true,
+//   id: undefined,
+//   isLabelHidden: false,
+//   isMulti: false,
+//   isSearchable: true,
+// };
+
 export default function Select({
   field: { name, value: fieldValue },
   form: { errors, setFieldTouched, setFieldValue, touched },
-  hasValidationStyling,
+  hasValidationStyling = true,
   id,
-  isLabelHidden,
-  isMulti,
-  isSearchable,
+  isLabelHidden = false,
+  isMulti = false,
+  isSearchable = true,
   label,
   options,
   ...props // disabled, placeholder, etc.
-}) {
+}: SelectPropsType) {
   /**
    * @description handle changing of non-multi select
    * @param {string} selected
    */
-  const onChangeSingle = selected => {
+  const onChangeSingle = (selected: SelectOptionType) => {
     setFieldValue(name, selected === null ? '' : selected.value);
   };
 
   /**
    * @description handle changing of multi select
    * @param {string[]} selectedArray
    */
-  const onChangeMulti = selectedArray => {
+  const onChangeMulti = (selectedArray: SelectOptionsType) => {
     if (selectedArray) {
       setFieldValue(
         name,
@@ -96,7 +133,17 @@ export default function Select({
    * @returns {{ label: string; value: string; }[]}
    */
   const getValueFromMulti = () => {
-    return options.filter(option => fieldValue.includes(option.value));
+    if (Array.isArray(fieldValue)) {
+      return fieldValue
+        .map(
+          value =>
+            options.find((option: SelectOptionType) => option.value === value) as SelectOptionType,
+        )
+        .filter(Boolean);
+    } else {
+      return [];
+    }
+    // return options.filter(option => fieldValue.includes(option.value));
   };
 
   const handleBlur = () => {
@@ -126,13 +173,13 @@ export default function Select({
           isSearchable={isSearchable}
           name={name}
           onBlur={handleBlur}
-          onChange={onChangeHandler}
+          onChange={() => onChangeHandler}
           options={options}
           value={value || ''}
         />
 
         <ErrorMessage name={name}>
-          {message => {
+          {(message: string) => {
             return hasErrors ? (
               <Alert className={styles.errorMessage} type="error">
                 {message}

components/Form/Select/ThemedReactSelect.js

@@ -37,15 +37,15 @@ describe('Select', () => {
 
   it('should render with required props', () => {
     createSnapshotTest(
-      <Formik>
+      <Formik initialValues={{}} onSubmit={() => {}}>
         <Select {...requiredProps} />
       </Formik>,
     );
   });
 
   it('should render with label, even if hidden', () => {
     const { queryAllByTestId } = render(
-      <Formik>
+      <Formik initialValues={{}} onSubmit={() => {}}>
         <Select {...requiredProps} isLabelHidden />
       </Formik>,
     );
@@ -59,7 +59,7 @@ describe('Select', () => {
       const validate = () => ({ [fieldName]: 'Required' });
 
       const { container, findByText } = render(
-        <Formik initialValues={{ [fieldName]: '' }} validate={validate}>
+        <Formik initialValues={{ [fieldName]: '' }} validate={validate} onSubmit={() => {}}>
           <Form>
             <Field
               name={fieldName}
@@ -81,7 +81,7 @@ describe('Select', () => {
 
     it('should fire formik-related callbacks when changing non-multi select', async () => {
       const { container } = render(
-        <Formik>
+        <Formik initialValues={{}} onSubmit={() => {}}>
           <Select {...requiredProps} />
         </Formik>,
       );
@@ -99,7 +99,7 @@ describe('Select', () => {
 
     it('should fire formik-related callbacks when changing multi select', async () => {
       const { container } = render(
-        <Formik>
+        <Formik initialValues={{}} onSubmit={() => {}}>
           <Select {...requiredProps} field={{ name: 'test', value: [] }} isMulti />
         </Formik>,
       );
@@ -125,7 +125,7 @@ describe('Select', () => {
 
     it('should be able to remove multiselect options', async () => {
       const { container } = render(
-        <Formik>
+        <Formik initialValues={{}} onSubmit={() => {}}>
           <Select {...requiredProps} field={{ name: 'test', value: [] }} isMulti />
         </Formik>,
       );