-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Autocomplete] Show an integration example (#7477)
* [Autocomplete] Show an integration example * Update IntegrationAutosuggest.js
- Loading branch information
1 parent
7751a63
commit c2c4a72
Showing
4 changed files
with
265 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
208 changes: 208 additions & 0 deletions
208
docs/src/pages/component-demos/autocomplete/IntegrationAutosuggest.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,208 @@ | ||
| // @flow | ||
| /* eslint-disable react/no-array-index-key */ | ||
|
|
||
| import React, { Component } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import Autosuggest from 'react-autosuggest'; | ||
| import TextField from 'material-ui/TextField'; | ||
| import Paper from 'material-ui/Paper'; | ||
| import { MenuItem } from 'material-ui/Menu'; | ||
| import match from 'autosuggest-highlight/match'; | ||
| import parse from 'autosuggest-highlight/parse'; | ||
| import { withStyles, createStyleSheet } from 'material-ui/styles'; | ||
|
|
||
| const suggestions = [ | ||
| { label: 'Afghanistan' }, | ||
| { label: 'Aland Islands' }, | ||
| { label: 'Albania' }, | ||
| { label: 'Algeria' }, | ||
| { label: 'American Samoa' }, | ||
| { label: 'Andorra' }, | ||
| { label: 'Angola' }, | ||
| { label: 'Anguilla' }, | ||
| { label: 'Antarctica' }, | ||
| { label: 'Antigua and Barbuda' }, | ||
| { label: 'Argentina' }, | ||
| { label: 'Armenia' }, | ||
| { label: 'Aruba' }, | ||
| { label: 'Australia' }, | ||
| { label: 'Austria' }, | ||
| { label: 'Azerbaijan' }, | ||
| { label: 'Bahamas' }, | ||
| { label: 'Bahrain' }, | ||
| { label: 'Bangladesh' }, | ||
| { label: 'Barbados' }, | ||
| { label: 'Belarus' }, | ||
| { label: 'Belgium' }, | ||
| { label: 'Belize' }, | ||
| { label: 'Benin' }, | ||
| { label: 'Bermuda' }, | ||
| { label: 'Bhutan' }, | ||
| { label: 'Bolivia, Plurinational State of' }, | ||
| { label: 'Bonaire, Sint Eustatius and Saba' }, | ||
| { label: 'Bosnia and Herzegovina' }, | ||
| { label: 'Botswana' }, | ||
| { label: 'Bouvet Island' }, | ||
| { label: 'Brazil' }, | ||
| { label: 'British Indian Ocean Territory' }, | ||
| { label: 'Brunei Darussalam' }, | ||
| ]; | ||
|
|
||
| function renderInput(inputProps) { | ||
| const { classes, home, value, ref, ...other } = inputProps; | ||
|
|
||
| return ( | ||
| <TextField | ||
| autoFocus={home} | ||
| className={classes.textField} | ||
| value={value} | ||
| inputRef={ref} | ||
| InputProps={{ | ||
| classes: { | ||
| input: classes.input, | ||
| }, | ||
| ...other, | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| function renderSuggestion(suggestion, { query, isHighlighted }) { | ||
| const matches = match(suggestion.label, query); | ||
| const parts = parse(suggestion.label, matches); | ||
|
|
||
| return ( | ||
| <MenuItem selected={isHighlighted} component="div"> | ||
| <div> | ||
| {parts.map((part, index) => { | ||
| return part.highlight | ||
| ? <span key={index} style={{ fontWeight: 300 }}> | ||
| {part.text} | ||
| </span> | ||
| : <strong key={index} style={{ fontWeight: 500 }}> | ||
| {part.text} | ||
| </strong>; | ||
| })} | ||
| </div> | ||
| </MenuItem> | ||
| ); | ||
| } | ||
|
|
||
| function renderSuggestionsContainer(options) { | ||
| const { containerProps, children } = options; | ||
|
|
||
| return ( | ||
| <Paper {...containerProps} square> | ||
| {children} | ||
| </Paper> | ||
| ); | ||
| } | ||
|
|
||
| function getSuggestionValue(suggestion) { | ||
| return suggestion.label; | ||
| } | ||
|
|
||
| function getSuggestions(value) { | ||
| const inputValue = value.trim().toLowerCase(); | ||
| const inputLength = inputValue.length; | ||
| let count = 0; | ||
|
|
||
| return inputLength === 0 | ||
| ? [] | ||
| : suggestions.filter(suggestion => { | ||
| const keep = | ||
| count < 5 && suggestion.label.toLowerCase().slice(0, inputLength) === inputValue; | ||
|
|
||
| if (keep) { | ||
| count += 1; | ||
| } | ||
|
|
||
| return keep; | ||
| }); | ||
| } | ||
|
|
||
| const styleSheet = createStyleSheet('IntegrationAutosuggest', theme => ({ | ||
| container: { | ||
| flexGrow: 1, | ||
| position: 'relative', | ||
| height: 200, | ||
| }, | ||
| suggestionsContainerOpen: { | ||
| position: 'absolute', | ||
| marginTop: theme.spacing.unit, | ||
| marginBottom: theme.spacing.unit * 3, | ||
| left: 0, | ||
| right: 0, | ||
| }, | ||
| suggestion: { | ||
| display: 'block', | ||
| }, | ||
| suggestionsList: { | ||
| margin: 0, | ||
| padding: 0, | ||
| listStyleType: 'none', | ||
| }, | ||
| textField: { | ||
| width: '100%', | ||
| }, | ||
| })); | ||
|
|
||
| class IntegrationAutosuggest extends Component { | ||
| state = { | ||
| value: '', | ||
| suggestions: [], | ||
| }; | ||
|
|
||
| handleSuggestionsFetchRequested = ({ value }) => { | ||
| this.setState({ | ||
| suggestions: getSuggestions(value), | ||
| }); | ||
| }; | ||
|
|
||
| handleSuggestionsClearRequested = () => { | ||
| this.setState({ | ||
| suggestions: [], | ||
| }); | ||
| }; | ||
|
|
||
| handleChange = (event, { newValue }) => { | ||
| this.setState({ | ||
| value: newValue, | ||
| }); | ||
| }; | ||
|
|
||
| render() { | ||
| const { classes } = this.props; | ||
|
|
||
| return ( | ||
| <Autosuggest | ||
| theme={{ | ||
| container: classes.container, | ||
| suggestionsContainerOpen: classes.suggestionsContainerOpen, | ||
| suggestionsList: classes.suggestionsList, | ||
| suggestion: classes.suggestion, | ||
| }} | ||
| renderInputComponent={renderInput} | ||
| suggestions={this.state.suggestions} | ||
| onSuggestionsFetchRequested={this.handleSuggestionsFetchRequested} | ||
| onSuggestionsClearRequested={this.handleSuggestionsClearRequested} | ||
| renderSuggestionsContainer={renderSuggestionsContainer} | ||
| getSuggestionValue={getSuggestionValue} | ||
| renderSuggestion={renderSuggestion} | ||
| inputProps={{ | ||
| autoFocus: true, | ||
| classes, | ||
| placeholder: 'Search a country (start with a)', | ||
| value: this.state.value, | ||
| onChange: this.handleChange, | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| IntegrationAutosuggest.propTypes = { | ||
| classes: PropTypes.object.isRequired, | ||
| }; | ||
|
|
||
| export default withStyles(styleSheet)(IntegrationAutosuggest); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| # Autocomplete | ||
|
|
||
| The autocomplete is a normal text input enhanced by a panel of suggested options. | ||
|
|
||
| ## react-autosuggest | ||
|
|
||
| In the following example, we demonstrate how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). | ||
|
|
||
| {{demo='pages/component-demos/autocomplete/IntegrationAutosuggest.js'}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters