migrated Select to .tsx

Author: recondesigns

components/Form/Select/Select.tsx

@@ -1,14 +1,3 @@
-import {
-  arrayOf,
-  bool,
-  func,
-  number,
-  object,
-  objectOf,
-  oneOfType,
-  shape,
-  string,
-} from 'prop-types';
 import { ErrorMessage } from 'formik';
 import Alert from 'components/Alert/Alert';
 import Label from 'components/Form/Label/Label';
@@ -52,39 +41,6 @@ export type SelectPropsType = {
   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 },

components/Form/Select/ThemedReactSelect.tsx

@@ -1,7 +1,5 @@
 // eslint-disable-next-line no-restricted-imports
 import ReactSelect from 'react-select'; // the only spot this import is allowed
-
-import { array, bool, oneOfType, string } from 'prop-types';
 import {
   primary,
   rgbValuesPrimary,
@@ -10,29 +8,10 @@ import {
   errorDeep,
 } from 'common/styles/themeMap';
 
-// ThemedReactSelect.propTypes = {
-//   disabled: bool,
-//   hasErrors: bool,
-//   hasValidationStyling: bool,
-//   id: string,
-//   instanceId: string,
-//   isMulti: bool,
-//   isSearchable: bool,
-//   // TODO: Resolve why multiselects can end up with touched: { key: array }
-//   // see ThemedReactSelect as well
-//   // isTouched: bool,
-//   isTouched: oneOfType([array, bool]),
-// };
-
 type OptionType = {
   [key: string]: any;
 };
 
-// type OptionType = {
-//   label: string
-//   value: string
-// }
-
 type OptionsType = OptionType[];
 
 type ValueType = string | OptionType | OptionsType;
@@ -47,24 +26,11 @@ export type ThemedReactSelect = {
   isMulti?: boolean;
   isSearchable?: boolean;
   isTouched?: any[] | boolean;
-  name?: string
-  onBlur?: () => void
-  onChange?: (selected: any) => void
+  name?: string;
+  onBlur?: () => void;
+  onChange?: (selected: any) => void;
   value?: ValueType;
-} 
-
-// & React.InputHTMLAttributes<HTMLInputElement>;
-
-// ThemedReactSelect.defaultProps = {
-//   disabled: false,
-//   hasErrors: false,
-//   hasValidationStyling: true,
-//   id: undefined,
-//   instanceId: undefined,
-//   isMulti: false,
-//   isSearchable: true,
-//   isTouched: false,
-// };
+};
 
 function ThemedReactSelect({
   disabled = false,

components/Form/Select/__tests__/Select.test.tsx

@@ -2,12 +2,11 @@ import { Formik, Field } from 'formik';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import createSnapshotTest from 'test-utils/createSnapshotTest';
 import { KEY_CODES } from 'test-utils/identifiers';
-
 import { LABEL } from 'common/constants/testIDs';
 import Form from '../../Form';
 import Select from '../Select';
 
-const getReactSelect = domElement => domElement.querySelector('[id^=react-select]');
+const getReactSelect = (domElement: any) => domElement.querySelector('[id^=react-select]');
 
 describe('Select', () => {
   const name = 'someSelectName';