Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add an example with Popper and react-autosuggest #12280

Merged
merged 1 commit into from
Jul 25, 2018
Merged

[docs] Add an example with Popper and react-autosuggest #12280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .size-limit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ module.exports = [
name: 'The size of all the modules of material-ui.',
webpack: true,
path: 'packages/material-ui/build/index.js',
limit: '94.7 KB',
limit: '95.1 KB',
},
{
name: 'The main bundle of the docs',
Expand Down
122 changes: 79 additions & 43 deletions docs/src/pages/demos/autocomplete/IntegrationAutosuggest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import parse from 'autosuggest-highlight/parse';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import MenuItem from '@material-ui/core/MenuItem';
import Popper from '@material-ui/core/Popper';
import { withStyles } from '@material-ui/core/styles';

const suggestions = [
Expand Down Expand Up @@ -45,14 +46,17 @@ const suggestions = [
{ label: 'Brunei Darussalam' },
];

function renderInput(inputProps) {
const { classes, ref, ...other } = inputProps;
function renderInputComponent(inputProps) {
const { classes, inputRef = () => {}, ref, ...other } = inputProps;

return (
<TextField
fullWidth
InputProps={{
inputRef: ref,
inputRef: node => {
ref(node);
inputRef(node);
},
classes: {
input: classes.input,
},
Expand Down Expand Up @@ -85,20 +89,6 @@ function renderSuggestion(suggestion, { query, isHighlighted }) {
);
}

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;
Expand All @@ -118,11 +108,17 @@ function getSuggestions(value) {
});
}

function getSuggestionValue(suggestion) {
return suggestion.label;
}

const styles = theme => ({
container: {
root: {
height: 250,
flexGrow: 1,
},
container: {
position: 'relative',
height: 250,
},
suggestionsContainerOpen: {
position: 'absolute',
Expand All @@ -142,8 +138,11 @@ const styles = theme => ({
});

class IntegrationAutosuggest extends React.Component {
popperNode = null;

state = {
value: '',
single: '',
popper: '',
suggestions: [],
};

Expand All @@ -159,37 +158,74 @@ class IntegrationAutosuggest extends React.Component {
});
};

handleChange = (event, { newValue }) => {
handleChange = name => (event, { newValue }) => {
this.setState({
value: newValue,
[name]: newValue,
});
};

render() {
const { classes } = this.props;

const autosuggestProps = {
renderInputComponent,
suggestions: this.state.suggestions,
onSuggestionsFetchRequested: this.handleSuggestionsFetchRequested,
onSuggestionsClearRequested: this.handleSuggestionsClearRequested,
getSuggestionValue,
renderSuggestion,
};

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={{
classes,
placeholder: 'Search a country (start with a)',
value: this.state.value,
onChange: this.handleChange,
}}
/>
<div className={classes.root}>
<Autosuggest
{...autosuggestProps}
inputProps={{
classes,
placeholder: 'Search a country (start with a)',
value: this.state.single,
onChange: this.handleChange('single'),
}}
theme={{
container: classes.container,
suggestionsContainerOpen: classes.suggestionsContainerOpen,
suggestionsList: classes.suggestionsList,
suggestion: classes.suggestion,
}}
renderSuggestionsContainer={options => (
<Paper {...options.containerProps} square>
{options.children}
</Paper>
)}
/>
<Autosuggest
{...autosuggestProps}
inputProps={{
classes,
placeholder: 'Popper',
value: this.state.popper,
onChange: this.handleChange('popper'),
inputRef: node => {
this.popperNode = node;
},
}}
theme={{
suggestionsList: classes.suggestionsList,
suggestion: classes.suggestion,
}}
renderSuggestionsContainer={options => (
<Popper anchorEl={this.popperNode} open={Boolean(options.children)}>
<Paper
square
{...options.containerProps}
style={{ width: this.popperNode ? this.popperNode.clientWidth : null }}
>
{options.children}
</Paper>
</Popper>
)}
/>
</div>
);
}
}
Expand Down
14 changes: 8 additions & 6 deletions docs/src/pages/demos/autocomplete/IntegrationDownshift.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,12 @@ class DownshiftMultiple extends React.Component {
const { inputValue, selectedItem } = this.state;

return (
<Downshift inputValue={inputValue} onChange={this.handleChange} selectedItem={selectedItem}>
<Downshift
id="downshift-multiple"
inputValue={inputValue}
onChange={this.handleChange}
selectedItem={selectedItem}
>
{({
getInputProps,
getItemProps,
Expand All @@ -176,7 +181,6 @@ class DownshiftMultiple extends React.Component {
onChange: this.handleInputChange,
onKeyDown: this.handleKeyDown,
placeholder: 'Select multiple countries',
id: 'integration-downshift-multiple',
}),
})}
{isOpen ? (
Expand Down Expand Up @@ -234,15 +238,14 @@ function IntegrationDownshift(props) {

return (
<div className={classes.root}>
<Downshift>
<Downshift id="downshift-simple">
{({ getInputProps, getItemProps, isOpen, inputValue, selectedItem, highlightedIndex }) => (
<div className={classes.container}>
{renderInput({
fullWidth: true,
classes,
InputProps: getInputProps({
placeholder: 'Search a country (start with a)',
id: 'integration-downshift-simple',
}),
})}
{isOpen ? (
Expand All @@ -262,15 +265,14 @@ function IntegrationDownshift(props) {
)}
</Downshift>
<DownshiftMultiple classes={classes} />
<Downshift>
<Downshift id="downshift-popper">
{({ getInputProps, getItemProps, isOpen, inputValue, selectedItem, highlightedIndex }) => (
<div className={classes.container}>
{renderInput({
fullWidth: true,
classes,
InputProps: getInputProps({
placeholder: 'With Popper',
id: 'integration-downshift-popper',
}),
ref: node => {
popperNode = node;
Expand Down
Loading