From 3ab3baca9296e385bb38a6ecc9be70755976953c Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Sun, 17 Mar 2019 16:22:24 +0200 Subject: [PATCH] docs(Search): replace deprecated lifecycle methods in examples (#3511) --- .../ComponentExampleRenderSource.js | 6 ----- .../Search/Types/SearchExampleCategory.js | 22 +++++++++++-------- .../Types/SearchExampleCategoryCustom.js | 11 ++++------ .../Search/Types/SearchExampleStandard.js | 22 +++++++++++-------- .../Types/SearchExampleStandardCustom.js | 11 ++++------ .../Search/Variations/SearchExampleAligned.js | 11 ++++------ .../Search/Variations/SearchExampleFluid.js | 11 ++++------ .../Search/Variations/SearchExampleInput.js | 11 ++++------ 8 files changed, 46 insertions(+), 59 deletions(-) diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderSource.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderSource.js index 61bfccf0f4..3dda9912a5 100644 --- 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 index fd6527c0ab..550e78317c 100644 --- 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,11 +26,7 @@ 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 }) @@ -36,7 +34,7 @@ export default class SearchExampleCategory extends Component { 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 {
State
- 
{JSON.stringify(this.state, null, 2)}
+ 
+              {JSON.stringify(this.state, null, 2)}
+
Options
- 
{JSON.stringify(source, null, 2)}
+ 
+              {JSON.stringify(source, null, 2)}
+
diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js b/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js index 2d61e3953f..a4288900d5 100644 --- 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,12 +40,7 @@ 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 }) @@ -51,7 +48,7 @@ export default class SearchExampleCategory extends Component { 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 index 7d5fe3d8fb..b51d19898f 100644 --- 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,11 +13,7 @@ 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 }) @@ -23,7 +21,7 @@ export default class SearchExampleStandard extends Component { 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 {
State
- 
{JSON.stringify(this.state, null, 2)}
+ 
+              {JSON.stringify(this.state, null, 2)}
+
Options
- 
{JSON.stringify(source, null, 2)}
+ 
+              {JSON.stringify(source, null, 2)}
+
diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js b/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js index 6e20fb7fb4..bdab08aaf6 100644 --- a/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js +++ b/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js @@ -18,13 +18,10 @@ 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 }) @@ -32,7 +29,7 @@ export default class SearchExampleStandard extends Component { 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 index 0b592bec24..063b858268 100644 --- a/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js +++ b/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js @@ -10,13 +10,10 @@ 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 }) @@ -24,7 +21,7 @@ export default class SearchExampleStandard extends Component { 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 index 45523550e3..89a9c8b8cc 100644 --- a/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js +++ b/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js @@ -10,13 +10,10 @@ 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 }) @@ -24,7 +21,7 @@ export default class SearchExampleStandard extends Component { 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 index 4de151e1bf..73146705fd 100644 --- a/docs/src/examples/modules/Search/Variations/SearchExampleInput.js +++ b/docs/src/examples/modules/Search/Variations/SearchExampleInput.js @@ -10,13 +10,10 @@ 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 }) @@ -24,7 +21,7 @@ export default class SearchExampleStandard extends Component { 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)