fix(components): Fix state warning errors (carbon-design-system#1255)

* fix(components): Fix state warning errors * fix(components): Fix state warning errors * fix: clean up gDSFP * chore:update other dDSPS's * chore: added prop value and min camparison back into cunstructor
joshblack · Sep 7, 2018 · f96e930 · f96e930
1 parent 140b58e
commit f96e930
Show file tree

Hide file tree

Showing 15 changed files with 66 additions and 38 deletions.
diff --git a/.storybook/.babelrc b/.storybook/.babelrc
@@ -5,10 +5,7 @@
       {
         "modules": false,
         "targets": {
-          "browsers": [
-            "last 1 version",
-            "ie >= 11"
-          ]
+          "browsers": ["last 1 version", "ie >= 11"]
         }
       }
     ],
@@ -20,8 +17,5 @@
       }
     ]
   ],
-  "plugins": [
-    "dev-expression",
-    "react-docgen"
-  ]
+  "plugins": ["dev-expression", "react-docgen"]
 }
diff --git a/src/components/AccordionItem/AccordionItem.js b/src/components/AccordionItem/AccordionItem.js
@@ -5,6 +5,8 @@ import { iconChevronRight } from 'carbon-icons';
 import Icon from '../Icon';
 
 export default class AccordionItem extends Component {
+  state = {};
+
   static propTypes = {
     /**
      * Provide the contents of your AccordionItem

diff --git a/src/components/ComposedModal/ComposedModal.js b/src/components/ComposedModal/ComposedModal.js
@@ -6,6 +6,8 @@ import Icon from '../Icon';
 import classNames from 'classnames';
 
 export default class ComposedModal extends Component {
+  state = {};
+
   static defaultProps = {
     onKeyDown: () => {},
   };
@@ -43,8 +45,8 @@ export default class ComposedModal extends Component {
   }
 
   static getDerivedStateFromProps({ open }, state) {
-    const { prevOpen } = state || {};
-    return state && prevOpen === open
+    const { prevOpen } = state;
+    return prevOpen === open
       ? null
       : {
           open,

diff --git a/src/components/ContentSwitcher/ContentSwitcher.js b/src/components/ContentSwitcher/ContentSwitcher.js
@@ -4,6 +4,8 @@ import classNames from 'classnames';
 import { composeEventHandlers } from '../../tools/events';
 
 export default class ContentSwitcher extends React.Component {
+  state = {};
+
   static propTypes = {
     /**
      * Pass in Switch components to be rendered in the ContentSwitcher
@@ -32,8 +34,8 @@ export default class ContentSwitcher extends React.Component {
   };
 
   static getDerivedStateFromProps({ selectedIndex }, state) {
-    const { prevSelectedIndex } = state || {};
-    return state && prevSelectedIndex === selectedIndex
+    const { prevSelectedIndex } = state;
+    return prevSelectedIndex === selectedIndex
       ? null
       : {
           selectedIndex,

diff --git a/src/components/FileUploader/FileUploader.js b/src/components/FileUploader/FileUploader.js
@@ -8,6 +8,8 @@ import { ButtonTypes } from '../../prop-types/types';
 import { iconCloseSolid, iconCheckmarkSolid } from 'carbon-icons';
 
 export class FileUploaderButton extends Component {
+  state = {};
+
   static propTypes = {
     /**
      * Provide a custom className to be applied to the container node

diff --git a/src/components/NumberInput/NumberInput-test.js b/src/components/NumberInput/NumberInput-test.js
@@ -136,9 +136,10 @@ describe('NumberInput', () => {
         });
 
         it('should set invalidText when value is empty string', () => {
-          wrapper.setProps({ value: '' });
+          wrapper.setState({ value: '' });
           const invalidText = wrapper.find('.bx--form-requirement');
           expect(invalidText.length).toEqual(1);
+
           expect(invalidText.text()).toEqual('invalid text');
         });
 

diff --git a/src/components/NumberInput/NumberInput.js b/src/components/NumberInput/NumberInput.js
@@ -5,6 +5,15 @@ import Icon from '../Icon';
 import classNames from 'classnames';
 
 export default class NumberInput extends Component {
+  constructor(props) {
+    super(props);
+    let value = props.value;
+    if (props.min || props.min === 0) {
+      value = Math.max(props.min, value);
+    }
+    this.state = { value };
+  }
+
   static propTypes = {
     className: PropTypes.string,
     disabled: PropTypes.bool,
@@ -52,10 +61,10 @@ export default class NumberInput extends Component {
 
   static getDerivedStateFromProps({ min, value }, state) {
     const { prevValue } = state || {};
-    return state && prevValue === value
+    return prevValue === value
       ? null
       : {
-          value: state || isNaN(min) ? value : Math.max(min, value),
+          value: isNaN(min) ? value : Math.max(min, value),
           prevValue: value,
         };
   }

diff --git a/src/components/OverflowMenu/OverflowMenu.js b/src/components/OverflowMenu/OverflowMenu.js
@@ -124,6 +124,8 @@ export const getMenuOffset = (menuBody, direction) => {
 };
 
 export default class OverflowMenu extends Component {
+  state = {};
+
   static propTypes = {
     /**
      * `true` if the menu should be open.
@@ -308,8 +310,8 @@ export default class OverflowMenu extends Component {
   }
 
   static getDerivedStateFromProps({ open }, state) {
-    const { prevOpen } = state || {};
-    return state && prevOpen === open
+    const { prevOpen } = state;
+    return prevOpen === open
       ? null
       : {
           open,

diff --git a/src/components/PaginationV2/PaginationV2.js b/src/components/PaginationV2/PaginationV2.js
@@ -10,6 +10,19 @@ import { equals } from '../../tools/array';
 let instanceId = 0;
 
 export default class PaginationV2 extends Component {
+  constructor(props) {
+    super(props);
+    const { pageSizes, page, pageSize } = this.props;
+    this.state = {
+      page: page,
+      pageSize:
+        pageSize && pageSizes.includes(pageSize) ? pageSize : pageSizes[0],
+      prevPageSizes: pageSizes,
+      prevPage: page,
+      prevPageSize: pageSize,
+    };
+  }
+
   static propTypes = {
     /**
      * The description for the backward icon.
@@ -131,16 +144,6 @@ export default class PaginationV2 extends Component {
   }
 
   static getDerivedStateFromProps({ pageSizes, page, pageSize }, state) {
-    if (!state) {
-      return {
-        page: page,
-        pageSize:
-          pageSize && pageSizes.includes(pageSize) ? pageSize : pageSizes[0],
-        prevPageSizes: pageSizes,
-        prevPage: page,
-        prevPageSize: pageSize,
-      };
-    }
     const {
       prevPageSizes,
       prevPage,

diff --git a/src/components/ProgressIndicator/ProgressIndicator.js b/src/components/ProgressIndicator/ProgressIndicator.js
@@ -75,6 +75,8 @@ ProgressStep.propTypes = {
 };
 
 export class ProgressIndicator extends Component {
+  state = {};
+
   static propTypes = {
     /**
      * Provide <ProgressStep> components to be rendered in the
@@ -98,8 +100,8 @@ export class ProgressIndicator extends Component {
   };
 
   static getDerivedStateFromProps({ currentIndex }, state) {
-    const { prevCurrentIndex } = state || {};
-    return state && prevCurrentIndex === currentIndex
+    const { prevCurrentIndex } = state;
+    return prevCurrentIndex === currentIndex
       ? null
       : {
           currentIndex,

diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.js b/src/components/RadioButtonGroup/RadioButtonGroup.js
@@ -4,6 +4,8 @@ import RadioButton from '../RadioButton';
 import warning from 'warning';
 
 export default class RadioButtonGroup extends React.Component {
+  state = { selected: this.props.valueSelected || this.props.defaultSelected };
+
   static propTypes = {
     /**
      * Provide a collection of <RadioButton> components to render in the group
@@ -48,8 +50,8 @@ export default class RadioButtonGroup extends React.Component {
   };
 
   static getDerivedStateFromProps({ valueSelected, defaultSelected }, state) {
-    const { prevValueSelected } = state || {};
-    return state && prevValueSelected === valueSelected
+    const { prevValueSelected } = state;
+    return prevValueSelected === valueSelected
       ? null
       : {
           selected: valueSelected || defaultSelected,

diff --git a/src/components/SearchLayoutButton/SearchLayoutButton.js b/src/components/SearchLayoutButton/SearchLayoutButton.js
@@ -7,6 +7,8 @@ import Icon from '../Icon';
  * The layout button for `<Search>`.
  */
 class SearchLayoutButton extends Component {
+  state = { format: 'list' };
+
   static propTypes = {
     /**
      * The layout.
@@ -41,8 +43,9 @@ class SearchLayoutButton extends Component {
   };
 
   static getDerivedStateFromProps({ format }, state) {
-    const { prevFormat } = state || {};
-    return state && prevFormat === format
+    const { prevFormat } = state;
+
+    return prevFormat === format
       ? null
       : {
           format: format || 'list',

diff --git a/src/components/TimePicker/TimePicker.js b/src/components/TimePicker/TimePicker.js
@@ -3,6 +3,8 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 
 export default class TimePicker extends Component {
+  state = {};
+
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
@@ -41,8 +43,8 @@ export default class TimePicker extends Component {
   };
 
   static getDerivedStateFromProps({ value }, state) {
-    const { prevValue } = state || {};
-    return state && prevValue === value
+    const { prevValue } = state;
+    return prevValue === value
       ? null
       : {
           value,

diff --git a/src/components/Tooltip/Tooltip.js b/src/components/Tooltip/Tooltip.js
@@ -96,6 +96,8 @@ const getMenuOffset = (menuBody, menuDirection) => {
 };
 
 export default class Tooltip extends Component {
+  state = {};
+
   static propTypes = {
     /**
      * The ID of the trigger button.
@@ -211,8 +213,8 @@ export default class Tooltip extends Component {
     /**
      * so that tooltip can be controlled programmatically through this `open` prop
      */
-    const { prevOpen } = state || {};
-    return state && prevOpen === open
+    const { prevOpen } = state;
+    return prevOpen === open
       ? null
       : {
           open,

diff --git a/yarn.lock b/yarn.lock
@@ -11835,4 +11835,4 @@ yargs@~3.10.0:
     camelcase "^1.0.2"
     cliui "^2.1.0"
     decamelize "^1.0.0"
-    window-size "0.1.0"
+    window-size "0.1.0"