feat(Checkbox group): Checkbox name prop

catho · Apr 9, 2019 · 8068510 · 8068510
1 parent bdad3c0
commit 8068510
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 191 deletions.
diff --git a/components/Checkbox/Checkbox.jsx b/components/Checkbox/Checkbox.jsx
@@ -126,6 +126,7 @@ Checkbox.defaultProps = {
   error: '',
   id: '',
   label: '',
+  value: '',
 };
 
 Checkbox.propTypes = {
@@ -135,7 +136,8 @@ Checkbox.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   id: PropTypes.string,
   label: PropTypes.string,
-  value: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string,
 };
 
 Checkbox.displayName = 'Checkbox';

diff --git a/components/Checkbox/Checkbox.unit.test.jsx b/components/Checkbox/Checkbox.unit.test.jsx
@@ -10,45 +10,43 @@ describe('<Checkbox />', () => {
   beforeEach(mockFn.mockClear);
 
   it('should match the snapshot', () => {
+    expect(renderer.create(<Checkbox name="foo" />).toJSON()).toMatchSnapshot();
     expect(
-      renderer.create(<Checkbox value="foo" />).toJSON(),
-    ).toMatchSnapshot();
-    expect(
-      renderer.create(<Checkbox value="foo" error="error message" />).toJSON(),
+      renderer.create(<Checkbox name="foo" error="error message" />).toJSON(),
     ).toMatchSnapshot();
     expect(
       renderer
-        .create(<Checkbox value="foo" error="error message" checked />)
+        .create(<Checkbox name="foo" error="error message" checked />)
         .toJSON(),
     ).toMatchSnapshot();
     expect(
-      renderer.create(<Checkbox value="foo" checked />).toJSON(),
+      renderer.create(<Checkbox name="foo" checked />).toJSON(),
     ).toMatchSnapshot();
     expect(
-      renderer.create(<Checkbox value="foo" disabled />).toJSON(),
+      renderer.create(<Checkbox name="foo" disabled />).toJSON(),
     ).toMatchSnapshot();
     expect(
-      renderer.create(<Checkbox value="foo" label="Some text" />).toJSON(),
+      renderer.create(<Checkbox name="foo" label="Some text" />).toJSON(),
     ).toMatchSnapshot();
     expect(
-      renderer.create(<Checkbox value="foo" checked disabled />).toJSON(),
+      renderer.create(<Checkbox name="foo" checked disabled />).toJSON(),
     ).toMatchSnapshot();
   });
 
   it('should pass onChange prop to checkbox component', () => {
-    const wrapper = mount(<Checkbox value="foo" onChange={mockFn} />);
+    const wrapper = mount(<Checkbox name="foo" onChange={mockFn} />);
     const checkbox = wrapper.find('HiddenCheckbox');
     expect(wrapper.prop('onChange')).toEqual(checkbox.prop('onChange'));
   });
 
   it('should pass checked prop to checkbox component', () => {
-    const wrapper = shallow(<Checkbox value="foo" checked />);
+    const wrapper = shallow(<Checkbox name="foo" checked />);
     const checkbox = wrapper.find('HiddenCheckbox');
     expect(checkbox.prop('checked')).toEqual(true);
   });
 
   it('should apply id prop', () => {
-    const wrapper = shallow(<Checkbox value="foo" id="test" />);
+    const wrapper = shallow(<Checkbox name="foo" id="test" />);
 
     const label = wrapper.find('CheckboxLabel');
     const checkbox = wrapper.find('HiddenCheckbox');
@@ -59,7 +57,7 @@ describe('<Checkbox />', () => {
   });
 
   it('should apply label prop', () => {
-    const wrapper = mount(<Checkbox value="foo" label="test" />);
+    const wrapper = mount(<Checkbox name="foo" label="test" />);
     const labelText = wrapper.find('CheckboxLabel').text();
 
     expect(labelText).not.toBeUndefined();

diff --git a/components/Checkbox/CheckboxGroup.jsx b/components/Checkbox/CheckboxGroup.jsx
@@ -19,45 +19,43 @@ class CheckboxGroup extends React.Component {
     super(props);
 
     const { children, options } = this.props;
-    const values = {};
     const childrenProps = React.Children.count(children)
       ? React.Children.toArray(children).map(
           ({ props: childProps }) => childProps,
         )
       : options;
 
-    childrenProps.forEach(({ value, checked }) => {
-      values[value] = Boolean(checked);
-    });
+    const values = childrenProps.map(({ checked, name, value }) => ({
+      checked: Boolean(checked),
+      name,
+      value,
+    }));
 
     this.state = { values };
   }
 
-  _onChange = ({ target: { checked, value } }) => {
+  _onChange = ({ target: { checked, name } }) => {
     const { onChange } = this.props;
-    const { values: stateValues } = this.state;
+    const { values } = this.state;
+    const item = values.find(({ name: checkboxName }) => checkboxName === name);
 
-    const values = {
-      ...stateValues,
-      [value]: checked,
-    };
+    item.checked = checked;
 
     onChange(values);
 
     this.setState({ values });
   };
 
   render() {
-    const { children, error, name, options } = this.props;
+    const { children, error, options } = this.props;
 
     const commonProps = {
-      name,
       error: Boolean(error),
       onChange: this._onChange,
     };
     const checkboxOptions = options.map(option =>
       Object.assign({}, option, {
-        key: option.value,
+        key: option.name,
         ...commonProps,
       }),
     );
@@ -94,14 +92,14 @@ CheckboxGroup.propTypes = {
     PropTypes.element,
   ]),
   error: PropTypes.string,
-  name: PropTypes.string.isRequired,
   onChange: PropTypes.func,
   options: PropTypes.arrayOf(
     PropTypes.shape({
-      label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-      value: PropTypes.string.isRequired,
-      disabled: PropTypes.bool,
       checked: PropTypes.bool,
+      disabled: PropTypes.bool,
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+      name: PropTypes.string.isRequired,
+      value: PropTypes.string,
     }),
   ),
 };