From f96e9308a2067bf8ceb07dde6cb4340fdffe4aa5 Mon Sep 17 00:00:00 2001 From: Matt Wallace Date: Fri, 7 Sep 2018 08:39:44 -0600 Subject: [PATCH] fix(components): Fix state warning errors (#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 --- .storybook/.babelrc | 10 ++------ src/components/AccordionItem/AccordionItem.js | 2 ++ src/components/ComposedModal/ComposedModal.js | 6 +++-- .../ContentSwitcher/ContentSwitcher.js | 6 +++-- src/components/FileUploader/FileUploader.js | 2 ++ .../NumberInput/NumberInput-test.js | 3 ++- src/components/NumberInput/NumberInput.js | 13 +++++++++-- src/components/OverflowMenu/OverflowMenu.js | 6 +++-- src/components/PaginationV2/PaginationV2.js | 23 +++++++++++-------- .../ProgressIndicator/ProgressIndicator.js | 6 +++-- .../RadioButtonGroup/RadioButtonGroup.js | 6 +++-- .../SearchLayoutButton/SearchLayoutButton.js | 7 ++++-- src/components/TimePicker/TimePicker.js | 6 +++-- src/components/Tooltip/Tooltip.js | 6 +++-- yarn.lock | 2 +- 15 files changed, 66 insertions(+), 38 deletions(-) diff --git a/.storybook/.babelrc b/.storybook/.babelrc index e24397a6ab40..dd9d7660e2db 100644 --- 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 index 6613df646d68..980afd1f470d 100644 --- 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 index 3faf0b506a67..78de6ceee4eb 100644 --- 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 index a42aa8b58edf..46d67d51e64f 100644 --- 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 index 01ac6493f60d..fa20e6d5c676 100644 --- 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 index 179263bcdf0f..0352ee847cfc 100644 --- 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 index a49fb90b47fc..dc20dc670e94 100644 --- 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 index 9ff72af11ce1..3ad358cad3d4 100644 --- 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 index d32a17a2b650..686a6af70a0d 100644 --- 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 index ac0f4d1e9654..4c3fd64fa74f 100644 --- 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 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 index 53cd564c15a2..db1b30fd5033 100644 --- 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 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 index 70ec14342db3..f72f6bbc6ef8 100644 --- a/src/components/SearchLayoutButton/SearchLayoutButton.js +++ b/src/components/SearchLayoutButton/SearchLayoutButton.js @@ -7,6 +7,8 @@ import Icon from '../Icon'; * The layout button for ``. */ 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 index bb3d5d49726e..225a96b43945 100644 --- 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 index bb5c76a8467e..b5b6995686b0 100644 --- 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 index dee0083d3ace..56208be75cf7 100644 --- 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" \ No newline at end of file