CheckboxInput: Typescript migration

src/components/layout/inputs/CheckboxInput/CheckboxInput.jsx → src/components/layout/inputs/CheckboxInput/CheckboxInput.tsx

@@ -2,23 +2,35 @@
 * @debt directory "Gaël: this file should be migrated within the new directory structure"
 */
 
-import PropTypes from 'prop-types'
 import React from 'react'
 
+interface IProps {
+  SvgElement?: React.ComponentType | null,
+  checked?: boolean,
+  className?: string,
+  disabled?: boolean,
+  hiddenLabel?: boolean,
+  isInError?: boolean,
+  isLabelDisable?: boolean,
+  label: string,
+  name: string,
+  onChange: () => void,
+  subLabel?: string | null,
+}
+
 export const CheckboxInput = ({
   onChange,
-  name,
-  label,
-  checked,
-  isInError,
+  SvgElement = null,
+  checked = false,
+  className = '',
+  disabled = false,
+  hiddenLabel = false,
+  isInError = false,
   isLabelDisable,
-  labelAttributes,
-  className,
-  hiddenLabel,
-  subLabel,
-  SvgElement,
-  ...attributes
-}) => {
+  label,
+  name,
+  subLabel = null,
+}: IProps) => {
   let labelClasses = ['field', 'field-checkbox']
   let subLabelClasses = ['ic-sub-label']
   if (isLabelDisable) {
@@ -35,18 +47,21 @@ export const CheckboxInput = ({
   }
   inputClasses.push('input-checkbox-input')
 
+  let checkboxAttributes: {
+    disabled?: boolean
+  } = { disabled }
+
   return (
     <label
       className={labelClasses.join(' ')}
-      {...labelAttributes}
     >
       <input
         checked={checked}
         className={inputClasses.join(' ')}
         name={name}
         onChange={onChange}
         type="checkbox"
-        {...attributes}
+        {...checkboxAttributes}
       />
       {SvgElement && <SvgElement aria-hidden />}
       <span className={textClasses.join(' ')}>
@@ -60,28 +75,3 @@ export const CheckboxInput = ({
     </label>
   )
 }
-
-CheckboxInput.defaultProps = {
-  SvgElement: null,
-  checked: false,
-  className: '',
-  hiddenLabel: false,
-  isInError: false,
-  isLabelDisable: false,
-  labelAttributes: {},
-  subLabel: null,
-}
-
-CheckboxInput.propTypes = {
-  SvgElement: PropTypes.elementType,
-  checked: PropTypes.bool,
-  className: PropTypes.string,
-  hiddenLabel: PropTypes.bool,
-  isInError: PropTypes.bool,
-  isLabelDisable: PropTypes.bool,
-  label: PropTypes.string.isRequired,
-  labelAttributes: PropTypes.shape(),
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  subLabel: PropTypes.string,
-}

src/components/layout/inputs/CheckboxInput/index.js

@@ -0,0 +1 @@
+export { CheckboxInput } from './CheckboxInput'

src/components/pages/Offerers/Offerer/VenueV1/fields/WithdrawalDetailsFields/WithdrawalDetailsFields.jsx

@@ -10,7 +10,7 @@ import React, { useCallback } from 'react'
 import { Field } from 'react-final-form'
 
 import HiddenField from 'components/layout/form/fields/HiddenField'
-import { CheckboxInput } from 'components/layout/inputs/CheckboxInput/CheckboxInput'
+import { CheckboxInput } from 'components/layout/inputs/CheckboxInput'
 import TextareaInput from 'components/layout/inputs/TextareaInput'
 
 const WithdrawalDetailsFields = props => {

src/components/pages/Offers/Offer/OfferDetails/OfferForm/AccessibilityCheckboxList/AccessibilityCheckboxList.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { useCallback } from 'react'
 
-import { CheckboxInput } from 'components/layout/inputs/CheckboxInput/CheckboxInput'
+import { CheckboxInput } from 'components/layout/inputs/CheckboxInput'
 import InputError from 'components/layout/inputs/Errors/InputError'
 import { ReactComponent as AudioDisabilitySvg } from 'icons/audio-disability.svg'
 import { ReactComponent as MentalDisabilitySvg } from 'icons/mental-disability.svg'

src/components/pages/Offers/Offer/OfferDetails/OfferForm/OfferForm.jsx

@@ -13,7 +13,7 @@ import { Link } from 'react-router-dom'
 
 import useActiveFeature from 'components/hooks/useActiveFeature'
 import InternalBanner from 'components/layout/Banner/InternalBanner'
-import { CheckboxInput } from 'components/layout/inputs/CheckboxInput/CheckboxInput'
+import { CheckboxInput } from 'components/layout/inputs/CheckboxInput'
 import DurationInput from 'components/layout/inputs/DurationInput/DurationInput'
 import Select, {
   buildSelectOptions,

src/components/pages/Styleguide/StyleguideElements/StyleguideCheckboxes.jsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback, useState } from 'react'
 
-import { CheckboxInput } from 'components/layout/inputs/CheckboxInput/CheckboxInput'
+import { CheckboxInput } from 'components/layout/inputs/CheckboxInput'
 
 const StyleguideCheckboxes = () => {
   const [checked, setChecked] = useState(false)