Merge pull request #3866 from IanVS/fix-knobs-for-older-react

Fix knobs for React < 16.3

addons/knobs/package.json

@@ -26,6 +26,7 @@
     "react-color": "^2.14.1",
     "react-datetime": "^2.14.0",
     "react-emotion": "^9.1.3",
+    "react-lifecycles-compat": "^3.0.4",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {

addons/knobs/src/components/types/Array.js

@@ -11,27 +11,21 @@ function formatArray(value, separator) {
 }
 
 class ArrayType extends React.Component {
-  static getDerivedStateFromProps(props, state) {
-    if (!state || props.knob.value !== state.value) {
-      return { value: props.knob.value };
-    }
-    return null;
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
   }
 
   handleChange = e => {
     const { knob } = this.props;
     const { value } = e.target;
     const newVal = formatArray(value, knob.separator);
-
-    this.setState({ value });
     this.props.onChange(newVal);
   };
 
   render() {
     const { knob } = this.props;
-    const { value } = this.state;
 
-    return <Textarea id={knob.name} value={value} onChange={this.handleChange} size="flex" />;
+    return <Textarea id={knob.name} value={knob.value} onChange={this.handleChange} size="flex" />;
   }
 }
 

addons/knobs/src/components/types/Color.js

@@ -24,16 +24,12 @@ class ColorType extends React.Component {
     displayColorPicker: false,
   };
 
-  static getDerivedStateFromProps(props, state) {
-    if (!state || props.knob.value !== state.value) {
-      return { value: props.knob.value };
-    }
-    return null;
-  }
-
   componentDidMount() {
     document.addEventListener('mousedown', this.handleWindowMouseDown);
   }
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
+  }
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.handleWindowMouseDown);
   }
@@ -54,16 +50,12 @@ class ColorType extends React.Component {
   };
 
   handleChange = color => {
-    this.setState({
-      value: color,
-    });
-
     this.props.onChange(`rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`);
   };
 
   render() {
     const { knob } = this.props;
-    const { displayColorPicker, value } = this.state;
+    const { displayColorPicker } = this.state;
     const colorStyle = {
       background: knob.value,
     };
@@ -78,7 +70,7 @@ class ColorType extends React.Component {
               this.popover = e;
             }}
           >
-            <SketchPicker color={value} onChange={this.handleChange} />
+            <SketchPicker color={knob.value} onChange={this.handleChange} />
           </Popover>
         ) : null}
       </Button>

addons/knobs/src/components/types/Date/index.js

@@ -9,26 +9,21 @@ import style from './styles';
 const DateInput = styled(Datetime)(style);
 
 class DateType extends React.Component {
-  static getDerivedStateFromProps(props, state) {
-    if (!state || props.knob.value !== state.value) {
-      return { value: props.knob.value };
-    }
-    return null;
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
   }
 
   handleChange = date => {
     const value = date.valueOf();
-    this.setState({ value });
-
     this.props.onChange(value);
   };
 
   render() {
-    const { value } = this.state;
+    const { knob } = this.props;
 
     return (
       <DateInput
-        value={value ? new Date(value) : null}
+        value={knob.value ? new Date(knob.value) : null}
         type="date"
         onChange={this.handleChange}
         size="flex"
@@ -38,7 +33,6 @@ class DateType extends React.Component {
 }
 
 DateType.propTypes = {
-  // eslint-disable-next-line react/no-unused-prop-types
   knob: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.number,

addons/knobs/src/components/types/Number.js

@@ -33,18 +33,13 @@ const RangeWrapper = styled('div')({
 });
 
 class NumberType extends React.Component {
-  static getDerivedStateFromProps(props, state) {
-    if (!state || props.knob.value !== state.value) {
-      return { value: props.knob.value };
-    }
-    return null;
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
   }
 
   handleChange = event => {
     const { value } = event.target;
 
-    this.setState({ value });
-
     let parsedValue = Number(value);
 
     if (Number.isNaN(parsedValue) || value === '') {
@@ -56,24 +51,23 @@ class NumberType extends React.Component {
 
   render() {
     const { knob } = this.props;
-    const { value } = this.state;
 
     return knob.range ? (
       <RangeWrapper>
         <RangeLabel>{knob.min}</RangeLabel>
         <RangeInput
-          value={value}
+          value={knob.value}
           type="range"
           min={knob.min}
           max={knob.max}
           step={knob.step}
           onChange={this.handleChange}
         />
-        <RangeLabel>{`${value} / ${knob.max}`}</RangeLabel>
+        <RangeLabel>{`${knob.value} / ${knob.max}`}</RangeLabel>
       </RangeWrapper>
     ) : (
       <Input
-        value={value}
+        value={knob.value}
         type="number"
         min={knob.min}
         max={knob.max}
@@ -89,6 +83,10 @@ NumberType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.number,
+    range: PropTypes.bool,
+    min: PropTypes.number,
+    max: PropTypes.number,
+    step: PropTypes.number,
   }).isRequired,
   onChange: PropTypes.func.isRequired,
 };

addons/knobs/src/components/types/Object.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import deepEqual from 'fast-deep-equal';
+import { polyfill } from 'react-lifecycles-compat';
 import { Textarea } from '@storybook/components';
 
 class ObjectType extends Component {
@@ -23,7 +24,7 @@ class ObjectType extends Component {
     const { value } = e.target;
 
     try {
-      const json = JSON.parse(e.target.value.trim());
+      const json = JSON.parse(value.trim());
       this.setState({
         value,
         json,
@@ -65,4 +66,6 @@ ObjectType.propTypes = {
 ObjectType.serialize = object => JSON.stringify(object);
 ObjectType.deserialize = value => (value ? JSON.parse(value) : {});
 
+polyfill(ObjectType);
+
 export default ObjectType;

addons/knobs/src/components/types/Text.js

@@ -4,26 +4,19 @@ import React from 'react';
 import { Textarea } from '@storybook/components';
 
 class TextType extends React.Component {
-  static getDerivedStateFromProps(props, state) {
-    if (!state || props.knob.value !== state.value) {
-      return { value: props.knob.value };
-    }
-    return null;
+  shouldComponentUpdate(nextProps) {
+    return nextProps.knob.value !== this.props.knob.value;
   }
 
   handleChange = event => {
     const { value } = event.target;
-
-    this.setState({ value });
-
     this.props.onChange(value);
   };
 
   render() {
     const { knob } = this.props;
-    const { value } = this.state;
 
-    return <Textarea id={knob.name} value={value} onChange={this.handleChange} size="flex" />;
+    return <Textarea id={knob.name} value={knob.value} onChange={this.handleChange} size="flex" />;
   }
 }