Revert "refactor: 💡 Convert SQFormCheckboxGroup to typescript Ref #244"

This reverts commit 533c9db.

src/components/SQForm/SQFormCheckboxGroup.tsx → src/components/SQForm/SQFormCheckboxGroup.js

@@ -1,41 +1,15 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {useFormikContext} from 'formik';
 import FormControl from '@material-ui/core/FormControl';
 import FormLabel from '@material-ui/core/FormLabel';
 import Grid from '@material-ui/core/Grid';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import FormGroup from '@material-ui/core/FormGroup';
-import {CheckboxProps} from '@material-ui/core';
 import SQFormCheckboxGroupItem from './SQFormCheckboxGroupItem';
 import SQFormCheckbox from './SQFormCheckbox';
 import {useForm} from './useForm';
 
-interface CheckboxOption {
-  label: string;
-  value: unknown;
-  isDisabled?: boolean;
-  inputProps?: CheckboxProps;
-}
-
-interface SQFormCheckboxGroupProps {
-  /** Name of the checkbox group */
-  name: string;
-  /** Label to display above the group */
-  groupLabel: string;
-  /** Whether this a selection in this group is required */
-  isRequired?: boolean;
-  /** Function to call on value change */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Whether to display the group in a row */
-  shouldDisplayInRow?: boolean;
-  /** Whether to display the select all checkbox */
-  shouldUseSelectAll?: boolean;
-  /** Size of the input given full-width is 12. */
-  size?: 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-  /** Children must be an array of object with checkbox label and value information */
-  children: CheckboxOption[];
-}
-
 function SQFormCheckboxGroup({
   name,
   groupLabel,
@@ -45,7 +19,7 @@ function SQFormCheckboxGroup({
   shouldUseSelectAll = false,
   size = 'auto',
   children
-}: SQFormCheckboxGroupProps): JSX.Element {
+}) {
   const {
     fieldState: {isFieldError},
     fieldHelpers: {handleChange, handleBlur, HelperTextComponent}
@@ -57,25 +31,20 @@ function SQFormCheckboxGroup({
 
   const {setFieldValue} = useFormikContext();
 
-  const handleSelectAllChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleSelectAllChange = event => {
     if (!event.target.checked) {
       setFieldValue(name, []);
       return;
     }
 
-    const enabledGroupValues = children.reduce(
-      (acc: string[], checkboxOption: CheckboxOption) => {
-        const {value, isDisabled} = checkboxOption;
-        if (!isDisabled) {
-          return [...acc, String(value)];
-        }
+    const enabledGroupValues = children.reduce((acc, checkboxOption) => {
+      const {value, isDisabled} = checkboxOption;
+      if (!isDisabled) {
+        return [...acc, value.toString()];
+      }
 
-        return acc;
-      },
-      []
-    );
+      return acc;
+    }, []);
     setFieldValue(name, enabledGroupValues);
   };
 
@@ -137,4 +106,30 @@ function SQFormCheckboxGroup({
   );
 }
 
+SQFormCheckboxGroup.propTypes = {
+  /** Name of the checkbox group */
+  name: PropTypes.string.isRequired,
+  /** Label to display above the group */
+  groupLabel: PropTypes.string.isRequired,
+  /** Whether this a selection in this group is required */
+  isRequired: PropTypes.bool,
+  /** Function to call on value change */
+  onChange: PropTypes.func,
+  /** Whether to display the group in a row */
+  shouldDisplayInRow: PropTypes.bool,
+  /** Whether to display the select all checkbox */
+  shouldUseSelectAll: PropTypes.bool,
+  /** Size of the input given full-width is 12. */
+  size: PropTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
+  /** Children must be an array of object with checkbox label and value information */
+  children: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.any.isRequired,
+      isDisabled: PropTypes.bool,
+      inputProps: PropTypes.object
+    }).isRequired
+  ).isRequired
+};
+
 export default SQFormCheckboxGroup;