docs(Search): remove imports of other examples (Semantic-Org#3494)

* docs(Search): Implement own standard custom.

* docs(Search): Implement own category custom example.

* docs(Search): Implement own example for fluid search.

* docs(Search): Implement own example for aligned search.

* docs(Search): Implement own example for input search and fix typo.

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

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
-import React from 'react'
-import { Label } from 'semantic-ui-react'
-
-import SearchExampleCategory from './SearchExampleCategory'
+import _ from 'lodash'
+import faker from 'faker'
+import React, { Component } from 'react'
+import { Search, Grid, Header, Segment, Label } from 'semantic-ui-react'
 
 const categoryRenderer = ({ name }) => <Label as={'span'} content={name} />
 
@@ -17,8 +17,96 @@ resultRenderer.propTypes = {
   description: PropTypes.string,
 }
 
-const SearchExampleCategoryCustom = () => (
-  <SearchExampleCategory categoryRenderer={categoryRenderer} resultRenderer={resultRenderer} />
-)
+const getResults = () =>
+  _.times(5, () => ({
+    title: faker.company.companyName(),
+    description: faker.company.catchPhrase(),
+    image: faker.internet.avatar(),
+    price: faker.finance.amount(0, 100, 2, '$'),
+  }))
+
+const source = _.range(0, 3).reduce((memo) => {
+  const name = faker.hacker.noun()
+
+  // eslint-disable-next-line no-param-reassign
+  memo[name] = {
+    name,
+    results: getResults(),
+  }
+
+  return memo
+}, {})
+
+export default class SearchExampleCategory extends Component {
+  componentWillMount() {
+    this.resetComponent()
+  }
+
+  resetComponent = () =>
+    this.setState({ isLoading: false, results: [], value: '' })
+
+  handleResultSelect = (e, { result }) => this.setState({ value: result.title })
+
+  handleSearchChange = (e, { value }) => {
+    this.setState({ isLoading: true, value })
 
-export default SearchExampleCategoryCustom
+    setTimeout(() => {
+      if (this.state.value.length < 1) return this.resetComponent()
+
+      const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
+      const isMatch = result => re.test(result.title)
+
+      const filteredResults = _.reduce(
+        source,
+        (memo, data, name) => {
+          const results = _.filter(data.results, isMatch)
+          if (results.length) memo[name] = { name, results } // eslint-disable-line no-param-reassign
+
+          return memo
+        },
+        {},
+      )
+
+      this.setState({
+        isLoading: false,
+        results: filteredResults,
+      })
+    }, 300)
+  }
+
+  render() {
+    const { isLoading, value, results } = this.state
+
+    return (
+      <Grid>
+        <Grid.Column width={8}>
+          <Search
+            category
+            categoryRenderer={categoryRenderer}
+            loading={isLoading}
+            onResultSelect={this.handleResultSelect}
+            onSearchChange={_.debounce(this.handleSearchChange, 500, {
+              leading: true,
+            })}
+            resultRenderer={resultRenderer}
+            results={results}
+            value={value}
+            {...this.props}
+          />
+        </Grid.Column>
+        <Grid.Column width={8}>
+          <Segment>
+            <Header>State</Header>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(this.state, null, 2)}
+            </pre>
+            <Header>Options</Header>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(source, null, 2)}
+            </pre>
+          </Segment>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

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

@@ -1,8 +1,15 @@
 import PropTypes from 'prop-types'
-import React from 'react'
-import { Label } from 'semantic-ui-react'
+import _ from 'lodash'
+import faker from 'faker'
+import React, { Component } from 'react'
+import { Search, Grid, Header, Segment, Label } from 'semantic-ui-react'
 
-import SearchExampleStandard from './SearchExampleStandard'
+const source = _.times(5, () => ({
+  title: faker.company.companyName(),
+  description: faker.company.catchPhrase(),
+  image: faker.internet.avatar(),
+  price: faker.finance.amount(0, 100, 2, '$'),
+}))
 
 const resultRenderer = ({ title }) => <Label content={title} />
 
@@ -11,6 +18,63 @@ resultRenderer.propTypes = {
   description: PropTypes.string,
 }
 
-const SearchExampleStandardCustom = () => <SearchExampleStandard resultRenderer={resultRenderer} />
+export default class SearchExampleStandard extends Component {
+  componentWillMount() {
+    this.resetComponent()
+  }
 
-export default SearchExampleStandardCustom
+  resetComponent = () =>
+    this.setState({ isLoading: false, results: [], value: '' })
+
+  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()
+
+      const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
+      const isMatch = result => re.test(result.title)
+
+      this.setState({
+        isLoading: false,
+        results: _.filter(source, isMatch),
+      })
+    }, 300)
+  }
+
+  render() {
+    const { isLoading, value, results } = this.state
+
+    return (
+      <Grid>
+        <Grid.Column width={6}>
+          <Search
+            loading={isLoading}
+            onResultSelect={this.handleResultSelect}
+            onSearchChange={_.debounce(this.handleSearchChange, 500, {
+              leading: true,
+            })}
+            results={results}
+            value={value}
+            resultRenderer={resultRenderer}
+            {...this.props}
+          />
+        </Grid.Column>
+        <Grid.Column width={10}>
+          <Segment>
+            <Header>State</Header>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(this.state, null, 2)}
+            </pre>
+            <Header>Options</Header>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(source, null, 2)}
+            </pre>
+          </Segment>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

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

@@ -1,6 +1,72 @@
-import React from 'react'
-import SearchExampleStandard from '../Types/SearchExampleStandard'
+import _ from 'lodash'
+import faker from 'faker'
+import React, { Component } from 'react'
+import { Search, Grid, Header, Segment } from 'semantic-ui-react'
 
-const SearchExampleAligned = () => <SearchExampleStandard aligned='right' />
+const source = _.times(5, () => ({
+  title: faker.company.companyName(),
+  description: faker.company.catchPhrase(),
+  image: faker.internet.avatar(),
+  price: faker.finance.amount(0, 100, 2, '$'),
+}))
 
-export default SearchExampleAligned
+export default class SearchExampleStandard extends Component {
+  componentWillMount() {
+    this.resetComponent()
+  }
+
+  resetComponent = () =>
+    this.setState({ isLoading: false, results: [], value: '' })
+
+  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()
+
+      const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
+      const isMatch = result => re.test(result.title)
+
+      this.setState({
+        isLoading: false,
+        results: _.filter(source, isMatch),
+      })
+    }, 300)
+  }
+
+  render() {
+    const { isLoading, value, results } = this.state
+
+    return (
+      <Grid>
+        <Grid.Column width={6}>
+          <Search
+            aligned='right'
+            loading={isLoading}
+            onResultSelect={this.handleResultSelect}
+            onSearchChange={_.debounce(this.handleSearchChange, 500, {
+              leading: true,
+            })}
+            results={results}
+            value={value}
+            {...this.props}
+          />
+        </Grid.Column>
+        <Grid.Column width={10}>
+          <Segment>
+            <Header>State</Header>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(this.state, null, 2)}
+            </pre>
+            <Header>Options</Header>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(source, null, 2)}
+            </pre>
+          </Segment>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

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

@@ -1,6 +1,72 @@
-import React from 'react'
-import SearchExampleStandard from '../Types/SearchExampleStandard'
+import _ from 'lodash'
+import faker from 'faker'
+import React, { Component } from 'react'
+import { Search, Grid, Header, Segment } from 'semantic-ui-react'
 
-const SearchExampleFluid = () => <SearchExampleStandard fluid />
+const source = _.times(5, () => ({
+  title: faker.company.companyName(),
+  description: faker.company.catchPhrase(),
+  image: faker.internet.avatar(),
+  price: faker.finance.amount(0, 100, 2, '$'),
+}))
 
-export default SearchExampleFluid
+export default class SearchExampleStandard extends Component {
+  componentWillMount() {
+    this.resetComponent()
+  }
+
+  resetComponent = () =>
+    this.setState({ isLoading: false, results: [], value: '' })
+
+  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()
+
+      const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
+      const isMatch = result => re.test(result.title)
+
+      this.setState({
+        isLoading: false,
+        results: _.filter(source, isMatch),
+      })
+    }, 300)
+  }
+
+  render() {
+    const { isLoading, value, results } = this.state
+
+    return (
+      <Grid>
+        <Grid.Column width={6}>
+          <Search
+            fluid
+            loading={isLoading}
+            onResultSelect={this.handleResultSelect}
+            onSearchChange={_.debounce(this.handleSearchChange, 500, {
+              leading: true,
+            })}
+            results={results}
+            value={value}
+            {...this.props}
+          />
+        </Grid.Column>
+        <Grid.Column width={10}>
+          <Segment>
+            <Header>State</Header>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(this.state, null, 2)}
+            </pre>
+            <Header>Options</Header>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(source, null, 2)}
+            </pre>
+          </Segment>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}