fix(RadioGroup, Checkbox): imlement getDerivedStateFromProps (#9)

* implement getDerivedStateFromProps for checkbox, radiogroup * update docs to showcase examples * fix checkbox color props * only check for undefined values
heydoctor · Dec 3, 2018 · b7c9947 · b7c9947
1 parent ff0f468
commit b7c9947
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 26 deletions.
diff --git a/src/Form/Checkbox.js b/src/Form/Checkbox.js
@@ -76,6 +76,16 @@ export default class Checkbox extends React.Component {
     disabled: false,
   };
 
+  static getDerivedStateFromProps(props, state) {
+    if (props.value !== undefined && props.value !== state.value) {
+      return {
+        value: props.value,
+      };
+    }
+
+    return null;
+  }
+
   state = {
     value: this.props.value,
   };
@@ -84,14 +94,6 @@ export default class Checkbox extends React.Component {
     return this.state.value === this.props.valueTrue;
   }
 
-  componentDidUpdate() {
-    if (this.props.value !== undefined && this.state.value !== this.props.value) {
-      this.setState({
-        value: this.props.value,
-      });
-    }
-  }
-
   handleChange = () => {
     const { valueTrue, valueFalse, onChange } = this.props;
 

diff --git a/src/Form/Checkbox.mdx b/src/Form/Checkbox.mdx
@@ -22,7 +22,7 @@ Form Checkbox component. Different sizes are available.
   <Checkbox id="checkbox" name="checkbox" />
 </Playground>
 
-### Checkbox Group
+### Checkbox Group vertical
 <Playground>
   {() => {
     const checkboxValues = [
@@ -37,19 +37,41 @@ Form Checkbox component. Different sizes are available.
         label: 'Checkbox 2',
       },
     ];
+
     return (
       <div>
-        <h3>Vertical</h3>
         <CheckboxGroup name="checkboxes" id="checkboxes" choices={checkboxValues} />
+      </div>
+    )
+  }}
+</Playground>
 
-        <h3>Horizontal</h3>
+### Checkbox Group horizontal
+<Playground>
+  {() => {
+    const checkboxValues = [
+      {
+        id: 1,
+        value: 'test',
+        label: 'Checkbox 1',
+      },
+      {
+        id: 2,
+        value: 'test2',
+        label: 'Checkbox 2',
+      },
+    ];
+
+    return (
+      <div>
         <CheckboxGroup horizontal name="checkboxes" id="checkboxes" choices={checkboxValues} />
       </div>
     )
   }}
 </Playground>
 
-### Checkbox colors
+
+### Checkbox Group exclusivity
 <Playground>
   {() => {
     const checkboxValues = [
@@ -63,11 +85,29 @@ Form Checkbox component. Different sizes are available.
         value: 'test2',
         label: 'Checkbox 2',
       },
+      {
+        id: 3,
+        value: 'neither',
+        label: 'Neither',
+        exclusive: true,
+      },
     ];
+
     return (
-      <React.Fragment>
-        <Checkbox id="checkbox" name="checkbox" color="green" />
-      </React.Fragment>
+      <div>
+        <CheckboxGroup horizontal name="checkboxes" id="checkboxes" choices={checkboxValues} />
+      </div>
     )
   }}
 </Playground>
+
+
+### Checkbox colors
+<Playground>
+  {() => (
+    <React.Fragment>
+      <Checkbox id="checkbox" name="checkbox" colorOn="green" colorOff="red" />
+      <Checkbox id="checkbox" name="checkbox" colorOn="green" colorOff="red" value={true} />
+    </React.Fragment>
+  )}
+</Playground>
diff --git a/src/Form/Radio.mdx b/src/Form/Radio.mdx
@@ -80,7 +80,7 @@ Form Radio component. Different sizes are available.
       },
     ];
     return (
-      <RadioGroup color="green" name="radio" id="radio" choices={radioValues} />
+      <RadioGroup colorOn="green" colorOff="red" name="radio" id="radio" choices={radioValues} value='radio2' />
     )
   }}
 </Playground>
diff --git a/src/Form/RadioGroup.js b/src/Form/RadioGroup.js
@@ -17,7 +17,8 @@ export default class RadioGroup extends Component {
     name: PropTypes.string,
     onChange: PropTypes.func,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    color: PropTypes.string,
+    colorOn: PropTypes.string,
+    colorOff: PropTypes.string,
     size: PropTypes.string,
     choices: PropTypes.arrayOf(
       PropTypes.shape({
@@ -31,20 +32,23 @@ export default class RadioGroup extends Component {
   static defaultProps = {
     choices: [],
     onChange() {},
-    color: 'primary',
     size: 'md',
   };
 
+  static getDerivedStateFromProps(props, state) {
+    if (props.value !== undefined && props.value !== state.value) {
+      return {
+        value: props.value,
+      };
+    }
+
+    return null;
+  }
+
   state = {
     value: this.props.value || null,
   };
 
-  componentDidUpdate() {
-    if (this.props.value !== undefined && this.props.value !== this.state.value) {
-      this.handleChange(null, this.props.value);
-    }
-  }
-
   handleChange = (field, value) => {
     // Bail out if value is the same
     if (this.state.value === value) return;
@@ -55,7 +59,7 @@ export default class RadioGroup extends Component {
   };
 
   render() {
-    const { choices, error, horizontal, label, name, color, size } = this.props;
+    const { choices, error, horizontal, label, name, colorOn, colorOff, size } = this.props;
 
     return (
       <StyledRadioGroup>
@@ -74,7 +78,8 @@ export default class RadioGroup extends Component {
                   name={key}
                   horizontal={horizontal}
                   size={size}
-                  color={color}
+                  colorOn={colorOn}
+                  colorOff={colorOff}
                   label={choiceLabel}
                   value={this.state.value}
                   valueTrue={value}