Skip to content

Commit

Permalink
Remove local search, DRY up examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeffcarbs
jeffcarbs committed Sep 19, 2016
1 parent b7246db commit fb97131
Show file tree
Hide file tree
Showing 10 changed files with 95 additions and 499 deletions.
1 change: 1 addition & 0 deletions docs/app/Examples/modules/Search/Types/Category.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export default class SearchCategoryExample extends Component {
onSearchChange={this.handleSearchChange}
results={results}
value={value}
{...this.props}
/>
</Grid.Column>
<Grid.Column width={8}>
Expand Down
92 changes: 10 additions & 82 deletions docs/app/Examples/modules/Search/Types/CategoryCustom.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,7 @@
import _ from 'lodash'
import faker from 'faker'
import React, { Component, PropTypes } from 'react'
import { Search, Grid, Header, Label } from 'stardust'
import React, { PropTypes } from 'react'
import { Label } from 'stardust'

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, index) => {
const name = faker.hacker.noun()

memo[name] = {
name,
results: getResults(),
}

return memo
}, {})
import BaseCategoryExample from './Category'

const categoryRenderer = ({ name }) =>
<Label as={'span'} content={name} />
Expand All @@ -37,65 +19,11 @@ resultRenderer.propTypes = {
description: PropTypes.string,
}

export default class SearchCategoryCustomExample extends Component {
componentWillMount() {
this.resetComponent()
}

resetComponent = () => this.setState({ isLoading: false, results: [], value: '' })

handleChange = (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)

const filteredResults = _.reduce(source, (memo, data, name) => {
const results = _.filter(data.results, isMatch)

if (results.length) {
memo[name] = { name, results }
}

return memo
}, {})

this.setState({
isLoading: false,
results: filteredResults,
})
}, 500)
}

render() {
const { isLoading, value, results } = this.state
const SearchCategoryCustomExample = () => (
<BaseCategoryExample
categoryRenderer={categoryRenderer}
resultRenderer={resultRenderer}
/>
)

return (
<Grid>
<Grid.Column width={8}>
<Search
category
categoryRenderer={categoryRenderer}
loading={isLoading}
onChange={this.handleChange}
onSearchChange={this.handleSearchChange}
resultRenderer={resultRenderer}
results={results}
value={value}
/>
</Grid.Column>
<Grid.Column width={8}>
<Header>State</Header>
<pre>{JSON.stringify(this.state, null, 2)}</pre>
<Header>Options</Header>
<pre>{JSON.stringify(source, null, 2)}</pre>
</Grid.Column>
</Grid>
)
}
}
export default SearchCategoryCustomExample
44 changes: 0 additions & 44 deletions docs/app/Examples/modules/Search/Types/Local.js
View file

This file was deleted.

1 change: 1 addition & 0 deletions docs/app/Examples/modules/Search/Types/Standard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export default class SearchStandardExample extends Component {
onSearchChange={this.handleSearchChange}
results={results}
value={value}
{...this.props}
/>
</Grid.Column>
<Grid.Column width={8}>
Expand Down
68 changes: 9 additions & 59 deletions docs/app/Examples/modules/Search/Types/StandardCustom.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,7 @@
import _ from 'lodash'
import faker from 'faker'
import React, { Component, PropTypes } from 'react'
import { Search, Grid, Header, Label } from 'stardust'
import React, { PropTypes } from 'react'
import { Label } from 'stardust'

const source = _.times(5, () => ({
title: faker.company.companyName(),
description: faker.company.catchPhrase(),
image: faker.internet.avatar(),
price: faker.finance.amount(0, 100, 2, '$'),
}))
import BaseStandardExample from './Standard'

const resultRenderer = ({ title, description }) => (
<Label content={title} />
Expand All @@ -19,53 +12,10 @@ resultRenderer.propTypes = {
description: PropTypes.string,
}

export default class SearchStandardExample extends Component {
componentWillMount() {
this.resetComponent()
}

resetComponent = () => this.setState({ isLoading: false, results: [], value: '' })

handleChange = (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),
})
}, 500)
}

render() {
const { isLoading, value, results } = this.state
const SearchStandardCustomExample = () => (
<BaseStandardExample
resultRenderer={resultRenderer}
/>
)

return (
<Grid>
<Grid.Column width={8}>
<Search
loading={isLoading}
onChange={this.handleChange}
onSearchChange={this.handleSearchChange}
resultRenderer={resultRenderer}
results={results}
value={value}
/>
</Grid.Column>
<Grid.Column width={8}>
<Header>State</Header>
<pre>{JSON.stringify(this.state, null, 2)}</pre>
<Header>Options</Header>
<pre>{JSON.stringify(source, null, 2)}</pre>
</Grid.Column>
</Grid>
)
}
}
export default SearchStandardCustomExample
25 changes: 2 additions & 23 deletions docs/app/Examples/modules/Search/Variations/Aligned.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,7 @@
import _ from 'lodash'
import faker from 'faker'
import React from 'react'
import { Search, Grid, Header } from 'stardust'

const source = _.times(5, () => ({
title: faker.company.companyName(),
description: faker.company.catchPhrase(),
image: faker.internet.avatar(),
price: faker.finance.amount(0, 100, 2, '$'),
}))
import BaseStandardExample from '../Types/Standard'

const SearchAlignedExample = () => (
<Grid>
<Grid.Column width={8}>
<Search
aligned='right'
source={source}
/>
</Grid.Column>
<Grid.Column width={8}>
<Header>Options</Header>
<pre>{JSON.stringify(source, null, 2)}</pre>
</Grid.Column>
</Grid>
)
const SearchAlignedExample = () => <BaseStandardExample aligned='right' />

export default SearchAlignedExample
25 changes: 2 additions & 23 deletions docs/app/Examples/modules/Search/Variations/Fluid.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,7 @@
import _ from 'lodash'
import faker from 'faker'
import React from 'react'
import { Search, Grid, Header } from 'stardust'

const source = _.times(5, () => ({
title: faker.company.companyName(),
description: faker.company.catchPhrase(),
image: faker.internet.avatar(),
price: faker.finance.amount(0, 100, 2, '$'),
}))
import BaseStandardExample from '../Types/Standard'

const SearchFluidExample = () => (
<Grid>
<Grid.Column width={8}>
<Search
fluid
source={source}
/>
</Grid.Column>
<Grid.Column width={8}>
<Header>Options</Header>
<pre>{JSON.stringify(source, null, 2)}</pre>
</Grid.Column>
</Grid>
)
const SearchFluidExample = () => <BaseStandardExample fluid />

export default SearchFluidExample
5 changes: 0 additions & 5 deletions docs/app/Examples/modules/Search/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,6 @@ const SearchExamples = () => (
description='A category search can have a custom rendering'
examplePath='modules/Search/Types/CategoryCustom'
/>
<ComponentExample
title='Local Search'
description='A search can look for results inside static local content.'
examplePath='modules/Search/Types/Local'
/>
</ExampleSection>
<ExampleSection title='Variations'>
<ComponentExample
Expand Down
Loading

0 comments on commit fb97131

Please sign in to comment.