From 565dde2a7126eab63788455fc4b6302016630858 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 2 Jun 2020 20:05:00 +0200 Subject: [PATCH 1/2] chore(Search): replace deprecated lifecycle methods --- .../Search/Types/SearchExampleCategory.js | 1 - .../Types/SearchExampleCategoryCustom.js | 1 - .../Search/Types/SearchExampleStandard.js | 1 - .../Types/SearchExampleStandardCustom.js | 1 - .../Search/Variations/SearchExampleAligned.js | 1 - .../Search/Variations/SearchExampleFluid.js | 1 - .../Search/Variations/SearchExampleInput.js | 1 - src/modules/Search/Search.js | 32 +++++++------------ test/specs/modules/Search/Search-test.js | 2 +- 9 files changed, 13 insertions(+), 28 deletions(-) diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategory.js b/docs/src/examples/modules/Search/Types/SearchExampleCategory.js index 95bd41fca7..ed6e7cf7e2 100644 --- a/docs/src/examples/modules/Search/Types/SearchExampleCategory.js +++ b/docs/src/examples/modules/Search/Types/SearchExampleCategory.js @@ -72,7 +72,6 @@ export default class SearchExampleCategory extends Component { })} results={results} value={value} - {...this.props} /> diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js b/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js index 69cf3a9ece..237370ce89 100644 --- a/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js +++ b/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js @@ -103,7 +103,6 @@ export default class SearchExampleCategory extends Component { resultRenderer={resultRenderer} results={results} value={value} - {...this.props} /> diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js index c6800611a2..6d039fe16a 100644 --- a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js +++ b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js @@ -47,7 +47,6 @@ export default class SearchExampleStandard extends Component { })} results={results} value={value} - {...this.props} /> diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js b/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js index bda47533d7..22019bb611 100644 --- a/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js +++ b/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js @@ -56,7 +56,6 @@ export default class SearchExampleStandard extends Component { results={results} value={value} resultRenderer={resultRenderer} - {...this.props} /> diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js b/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js index 5a87c1f32d..ac17ad7797 100644 --- a/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js +++ b/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js @@ -48,7 +48,6 @@ export default class SearchExampleStandard extends Component { })} results={results} value={value} - {...this.props} /> diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js b/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js index 828647658d..c918276419 100644 --- a/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js +++ b/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js @@ -48,7 +48,6 @@ export default class SearchExampleStandard extends Component { })} results={results} value={value} - {...this.props} /> diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleInput.js b/docs/src/examples/modules/Search/Variations/SearchExampleInput.js index 25e5d9379a..8b57ba4763 100644 --- a/docs/src/examples/modules/Search/Variations/SearchExampleInput.js +++ b/docs/src/examples/modules/Search/Variations/SearchExampleInput.js @@ -48,7 +48,6 @@ export default class SearchExampleStandard extends Component { })} results={results} value={value} - {...this.props} /> diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js index 7682999045..9f3fb90947 100644 --- a/src/modules/Search/Search.js +++ b/src/modules/Search/Search.js @@ -6,7 +6,7 @@ import React from 'react' import shallowEqual from 'shallowequal' import { - AutoControlledComponent as Component, + ModernAutoControlledComponent as Component, customPropTypes, eventStack, getElementType, @@ -200,25 +200,17 @@ export default class Search extends Component { static Result = SearchResult static Results = SearchResults - // eslint-disable-next-line camelcase - UNSAFE_componentWillMount() { - debug('componentWillMount()') - const { open, value } = this.state + static getAutoControlledStateFromProps(props, state) { + debug('getAutoControlledStateFromProps()') - this.setValue(value) - if (open) this.open() - } + if (typeof state.prevValue !== 'undefined' && shallowEqual(state.prevValue, state.value)) { + return { prevValue: state.value } + } - // eslint-disable-next-line camelcase - UNSAFE_componentWillReceiveProps(nextProps) { - super.UNSAFE_componentWillReceiveProps(nextProps) - debug('componentWillReceiveProps()') - debug('changed props:', objectDiff(nextProps, this.props)) + const selectedIndex = props.selectFirstResult ? 0 : -1 + debug('value changed, setting selectedIndex', selectedIndex) - if (!shallowEqual(nextProps.value, this.props.value)) { - debug('value changed, setting', nextProps.value) - this.setValue(nextProps.value) - } + return { prevValue: state.value, selectedIndex } } shouldComponentUpdate(nextProps, nextState) { @@ -459,7 +451,7 @@ export default class Search extends Component { const { selectFirstResult } = this.props - this.trySetState({ value, selectedIndex: selectFirstResult ? 0 : -1 }) + this.setState({ value, selectedIndex: selectFirstResult ? 0 : -1 }) } moveSelectionBy = (e, offset) => { @@ -516,12 +508,12 @@ export default class Search extends Component { open = () => { debug('open()') - this.trySetState({ open: true }) + this.setState({ open: true }) } close = () => { debug('close()') - this.trySetState({ open: false }) + this.setState({ open: false }) } // ---------------------------------------- diff --git a/test/specs/modules/Search/Search-test.js b/test/specs/modules/Search/Search-test.js index 52c0210d40..feb9c20d4e 100644 --- a/test/specs/modules/Search/Search-test.js +++ b/test/specs/modules/Search/Search-test.js @@ -129,7 +129,7 @@ describe('Search', () => { ) }) it('defaults to the first item with selectFirstResult', () => { - wrapperShallow() + wrapperMount() .find('SearchResult') .first() .should.have.prop('active', true) From d11cee44d082551227df4fac00ad7675dd90533b Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 24 Jun 2020 09:50:27 +0200 Subject: [PATCH 2/2] add a comment --- src/modules/Search/Search.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js index 9f3fb90947..7a21ca7897 100644 --- a/src/modules/Search/Search.js +++ b/src/modules/Search/Search.js @@ -203,6 +203,8 @@ export default class Search extends Component { static getAutoControlledStateFromProps(props, state) { debug('getAutoControlledStateFromProps()') + // We need to store a `prevValue` to compare as in `getDerivedStateFromProps` we don't have + // prevState if (typeof state.prevValue !== 'undefined' && shallowEqual(state.prevValue, state.value)) { return { prevValue: state.value } }