chore(Search): replace deprecated lifecycle methods (#3968)

* chore(Search): replace deprecated lifecycle methods

* add a comment

Author: layershifter

docs/src/examples/modules/Search/Types/SearchExampleCategory.js

@@ -72,7 +72,6 @@ export default class SearchExampleCategory extends Component {
             })}
             results={results}
             value={value}
-            {...this.props}
           />
         </Grid.Column>
         <Grid.Column width={8}>

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}
           />
         </Grid.Column>
         <Grid.Column width={8}>

docs/src/examples/modules/Search/Types/SearchExampleStandard.js

@@ -47,7 +47,6 @@ export default class SearchExampleStandard extends Component {
             })}
             results={results}
             value={value}
-            {...this.props}
           />
         </Grid.Column>
         <Grid.Column width={10}>

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}
           />
         </Grid.Column>
         <Grid.Column width={10}>

docs/src/examples/modules/Search/Variations/SearchExampleAligned.js

@@ -48,7 +48,6 @@ export default class SearchExampleStandard extends Component {
             })}
             results={results}
             value={value}
-            {...this.props}
           />
         </Grid.Column>
         <Grid.Column width={10}>

docs/src/examples/modules/Search/Variations/SearchExampleFluid.js

@@ -48,7 +48,6 @@ export default class SearchExampleStandard extends Component {
             })}
             results={results}
             value={value}
-            {...this.props}
           />
         </Grid.Column>
         <Grid.Column width={10}>

docs/src/examples/modules/Search/Variations/SearchExampleInput.js

@@ -48,7 +48,6 @@ export default class SearchExampleStandard extends Component {
             })}
             results={results}
             value={value}
-            {...this.props}
           />
         </Grid.Column>
         <Grid.Column width={10}>

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,19 @@ 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()
-  }
+    // 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 }
+    }
 
-  // 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 +453,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 +510,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 })
   }
 
   // ----------------------------------------

test/specs/modules/Search/Search-test.js

@@ -129,7 +129,7 @@ describe('Search', () => {
       )
     })
     it('defaults to the first item with selectFirstResult', () => {
-      wrapperShallow(<Search results={options} minCharacters={0} selectFirstResult />)
+      wrapperMount(<Search results={options} minCharacters={0} selectFirstResult />)
         .find('SearchResult')
         .first()
         .should.have.prop('active', true)