refactor(input): correct checkbox logic for use with redux-form

package.json

@@ -100,6 +100,7 @@
  "prop-types": "15.6.2",
  "react": "16.7.0",
  "react-dom": "16.7.0",
+ "redux-form": "^8.1.0",
  "rimraf": "2.6.3",
  "standard": "12.0.1",
  "styled-components": "4.1.3",

src/Atoms/Inputs/Checkbox.js

@@ -94,18 +94,15 @@ const Checkbox = ({
  forwardRef: ref,
  input,
  ...rest
-}: PropsType) => (
- <Wrapper className={className}>
- <Input
- {...input}
- {...rest}
- id={toId(rest.name)}
- ref={ref}
- type="checkbox"
- />
- <CheckboxLabel htmlFor={toId(rest.name)}>{rest.label}</CheckboxLabel>
- </Wrapper>
-)
+}: PropsType) => {
+ const name = input ? input.name : rest.name
+ return (
+ <Wrapper className={className}>
+ <Input {...input} {...rest} id={toId(name)} ref={ref} type="checkbox" />
+ <CheckboxLabel htmlFor={toId(name)}>{rest.label}</CheckboxLabel>
+ </Wrapper>
+ )
+}
 
 type RefPropsType = { ...PropsType }
 

src/Atoms/Inputs/Input.js

@@ -10,6 +10,7 @@ import {
  theme,
  type ThemePropType,
 } from '../../Tools/interpolation'
+import type { InputProps } from 'redux-form/lib/FieldProps.types'
 import Checkbox from './Checkbox'
 import Radio from './Radio'
 
@@ -28,7 +29,7 @@ export type PropsType = {
  +e2e?: string,
  +error?: string,
  +forwardRef?: React.ElementRef<*>,
- +input?: {},
+ +input?: $Shape<InputProps>,
  +label?: string,
  +name?: string,
  +renderSuffix?: (disabled?: boolean) => React.Node,
@@ -37,10 +38,7 @@ export type PropsType = {
  +width?: string,
 }
 
-type InputPropsType = {
- ...$Exact<$Diff<PropsType, { input: * }>>,
- ...$Exact<$ElementType<PropsType, 'input'>>,
-}
+type InputPropsType = PropsType
 
 type LabelPropsType = {
  children?: React.Node,

src/Atoms/Inputs/Radio.js

@@ -6,8 +6,8 @@ import injectE2E from '../../Tools/injectE2E'
 import { fontSize, theme } from '../../Tools/interpolation'
 import type { PropsType } from './Input'
 
-const toId = (name?: string | number) =>
- `${name != null ? name : '' || ''}-checkbox`
+const toId = (value?: string | number) =>
+ `${value != null ? value : '' || ''}-checkbox`
 
 const Wrapper = styled.div`
  display: flex;
@@ -70,15 +70,18 @@ export const RadioLabel = styled.label`
  font-size: ${fontSize('md')};
 `
 
-const Radio = ({ className, forwardRef: ref, input, ...rest }: PropsType) => (
- <Wrapper className={className}>
- <Input {...input} {...rest} id={toId(rest.value)} ref={ref} type="radio" />
- <RadioLabel htmlFor={toId(rest.value)}>
- <RadioButton />
- {rest.label}
- </RadioLabel>
- </Wrapper>
-)
+const Radio = ({ className, forwardRef: ref, input, ...rest }: PropsType) => {
+ const value = input ? input.value : rest.value
+ return (
+ <Wrapper className={className}>
+ <Input {...input} {...rest} id={toId(value)} ref={ref} type="radio" />
+ <RadioLabel htmlFor={toId(value)}>
+ <RadioButton />
+ {rest.label}
+ </RadioLabel>
+ </Wrapper>
+ )
+}
 
 type RefPropsType = { ...PropsType }