docs(Search): replace deprecated lifecycle methods in examples (#3511)

Semantic-Org · Mar 17, 2019 · 3ab3bac · 3ab3bac
1 parent 68932ca
commit 3ab3bac
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 59 deletions.
diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderSource.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderSource.js
@@ -1,19 +1,13 @@
-import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 import SourceRender from 'react-source-render'
 
 import { updateForKeys } from 'docs/src/hoc'
-import SearchExampleStandard from 'docs/src/examples/modules/Search/Types/SearchExampleStandard'
-import SearchExampleCategory from 'docs/src/examples/modules/Search/Types/SearchExampleCategory'
 import { babelConfig, externals } from './renderConfig'
 
 const resolver = (importPath, { displayName }) => {
   if (externals[importPath]) return externals[importPath]
 
-  if (_.endsWith(importPath, '/SearchExampleCategory')) return SearchExampleCategory
-  if (_.endsWith(importPath, '/SearchExampleStandard')) return SearchExampleStandard
-
   throw new Error(
     [
       'An error in resolver(), please check that import is defined, details:',

diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategory.js b/docs/src/examples/modules/Search/Types/SearchExampleCategory.js
@@ -3,6 +3,8 @@ import faker from 'faker'
 import React, { Component } from 'react'
 import { Search, Grid, Header, Segment } from 'semantic-ui-react'
 
+const initialState = { isLoading: false, results: [], value: '' }
+
 const getResults = () =>
   _.times(5, () => ({
     title: faker.company.companyName(),
@@ -24,19 +26,15 @@ const source = _.range(0, 3).reduce((memo) => {
 }, {})
 
 export default class SearchExampleCategory extends Component {
-  componentWillMount() {
-    this.resetComponent()
-  }
-
-  resetComponent = () => this.setState({ isLoading: false, results: [], value: '' })
+  state = initialState
 
   handleResultSelect = (e, { result }) => this.setState({ value: result.title })
 
   handleSearchChange = (e, { value }) => {
     this.setState({ isLoading: true, value })
 
     setTimeout(() => {
-      if (this.state.value.length < 1) return this.resetComponent()
+      if (this.state.value.length < 1) return this.setState(initialState)
 
       const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
       const isMatch = result => re.test(result.title)
@@ -69,7 +67,9 @@ export default class SearchExampleCategory extends Component {
             category
             loading={isLoading}
             onResultSelect={this.handleResultSelect}
-            onSearchChange={_.debounce(this.handleSearchChange, 500, { leading: true })}
+            onSearchChange={_.debounce(this.handleSearchChange, 500, {
+              leading: true,
+            })}
             results={results}
             value={value}
             {...this.props}
@@ -78,9 +78,13 @@ export default class SearchExampleCategory extends Component {
         <Grid.Column width={8}>
           <Segment>
             <Header>State</Header>
-            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(this.state, null, 2)}</pre>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(this.state, null, 2)}
+            </pre>
             <Header>Options</Header>
-            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(source, null, 2)}</pre>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(source, null, 2)}
+            </pre>
           </Segment>
         </Grid.Column>
       </Grid>

diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js b/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js
@@ -17,6 +17,8 @@ resultRenderer.propTypes = {
   description: PropTypes.string,
 }
 
+const initialState = { isLoading: false, results: [], value: '' }
+
 const getResults = () =>
   _.times(5, () => ({
     title: faker.company.companyName(),
@@ -38,20 +40,15 @@ const source = _.range(0, 3).reduce((memo) => {
 }, {})
 
 export default class SearchExampleCategory extends Component {
-  componentWillMount() {
-    this.resetComponent()
-  }
-
-  resetComponent = () =>
-    this.setState({ isLoading: false, results: [], value: '' })
+  state = initialState
 
   handleResultSelect = (e, { result }) => this.setState({ value: result.title })
 
   handleSearchChange = (e, { value }) => {
     this.setState({ isLoading: true, value })
 
     setTimeout(() => {
-      if (this.state.value.length < 1) return this.resetComponent()
+      if (this.state.value.length < 1) return this.setState(initialState)
 
       const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
       const isMatch = result => re.test(result.title)

diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js
@@ -3,6 +3,8 @@ import faker from 'faker'
 import React, { Component } from 'react'
 import { Search, Grid, Header, Segment } from 'semantic-ui-react'
 
+const initialState = { isLoading: false, results: [], value: '' }
+
 const source = _.times(5, () => ({
   title: faker.company.companyName(),
   description: faker.company.catchPhrase(),
@@ -11,19 +13,15 @@ const source = _.times(5, () => ({
 }))
 
 export default class SearchExampleStandard extends Component {
-  componentWillMount() {
-    this.resetComponent()
-  }
-
-  resetComponent = () => this.setState({ isLoading: false, results: [], value: '' })
+  state = initialState
 
   handleResultSelect = (e, { result }) => this.setState({ value: result.title })
 
   handleSearchChange = (e, { value }) => {
     this.setState({ isLoading: true, value })
 
     setTimeout(() => {
-      if (this.state.value.length < 1) return this.resetComponent()
+      if (this.state.value.length < 1) return this.setState(initialState)
 
       const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
       const isMatch = result => re.test(result.title)
@@ -44,7 +42,9 @@ export default class SearchExampleStandard extends Component {
           <Search
             loading={isLoading}
             onResultSelect={this.handleResultSelect}
-            onSearchChange={_.debounce(this.handleSearchChange, 500, { leading: true })}
+            onSearchChange={_.debounce(this.handleSearchChange, 500, {
+              leading: true,
+            })}
             results={results}
             value={value}
             {...this.props}
@@ -53,9 +53,13 @@ export default class SearchExampleStandard extends Component {
         <Grid.Column width={10}>
           <Segment>
             <Header>State</Header>
-            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(this.state, null, 2)}</pre>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(this.state, null, 2)}
+            </pre>
             <Header>Options</Header>
-            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(source, null, 2)}</pre>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(source, null, 2)}
+            </pre>
           </Segment>
         </Grid.Column>
       </Grid>

diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js b/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js
@@ -18,21 +18,18 @@ resultRenderer.propTypes = {
   description: PropTypes.string,
 }
 
-export default class SearchExampleStandard extends Component {
-  componentWillMount() {
-    this.resetComponent()
-  }
+const initialState = { isLoading: false, results: [], value: '' }
 
-  resetComponent = () =>
-    this.setState({ isLoading: false, results: [], value: '' })
+export default class SearchExampleStandard extends Component {
+  state = initialState
 
   handleResultSelect = (e, { result }) => this.setState({ value: result.title })
 
   handleSearchChange = (e, { value }) => {
     this.setState({ isLoading: true, value })
 
     setTimeout(() => {
-      if (this.state.value.length < 1) return this.resetComponent()
+      if (this.state.value.length < 1) return this.setState(initialState)
 
       const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
       const isMatch = result => re.test(result.title)

diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js b/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js
@@ -10,21 +10,18 @@ const source = _.times(5, () => ({
   price: faker.finance.amount(0, 100, 2, '$'),
 }))
 
-export default class SearchExampleStandard extends Component {
-  componentWillMount() {
-    this.resetComponent()
-  }
+const initialState = { isLoading: false, results: [], value: '' }
 
-  resetComponent = () =>
-    this.setState({ isLoading: false, results: [], value: '' })
+export default class SearchExampleStandard extends Component {
+  state = initialState
 
   handleResultSelect = (e, { result }) => this.setState({ value: result.title })
 
   handleSearchChange = (e, { value }) => {
     this.setState({ isLoading: true, value })
 
     setTimeout(() => {
-      if (this.state.value.length < 1) return this.resetComponent()
+      if (this.state.value.length < 1) return this.setState(initialState)
 
       const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
       const isMatch = result => re.test(result.title)

diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js b/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js
@@ -10,21 +10,18 @@ const source = _.times(5, () => ({
   price: faker.finance.amount(0, 100, 2, '$'),
 }))
 
-export default class SearchExampleStandard extends Component {
-  componentWillMount() {
-    this.resetComponent()
-  }
+const initialState = { isLoading: false, results: [], value: '' }
 
-  resetComponent = () =>
-    this.setState({ isLoading: false, results: [], value: '' })
+export default class SearchExampleStandard extends Component {
+  state = initialState
 
   handleResultSelect = (e, { result }) => this.setState({ value: result.title })
 
   handleSearchChange = (e, { value }) => {
     this.setState({ isLoading: true, value })
 
     setTimeout(() => {
-      if (this.state.value.length < 1) return this.resetComponent()
+      if (this.state.value.length < 1) return this.setState(initialState)
 
       const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
       const isMatch = result => re.test(result.title)

diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleInput.js b/docs/src/examples/modules/Search/Variations/SearchExampleInput.js
@@ -10,21 +10,18 @@ const source = _.times(5, () => ({
   price: faker.finance.amount(0, 100, 2, '$'),
 }))
 
-export default class SearchExampleStandard extends Component {
-  componentWillMount() {
-    this.resetComponent()
-  }
+const initialState = { isLoading: false, results: [], value: '' }
 
-  resetComponent = () =>
-    this.setState({ isLoading: false, results: [], value: '' })
+export default class SearchExampleStandard extends Component {
+  state = initialState
 
   handleResultSelect = (e, { result }) => this.setState({ value: result.title })
 
   handleSearchChange = (e, { value }) => {
     this.setState({ isLoading: true, value })
 
     setTimeout(() => {
-      if (this.state.value.length < 1) return this.resetComponent()
+      if (this.state.value.length < 1) return this.setState(initialState)
 
       const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
       const isMatch = result => re.test(result.title)