[Autocomplete] Add multiple downshift example

mui · Mar 6, 2018 · 8fe95fe · 8fe95fe
1 parent 8da1ca7
commit 8fe95fe
Show file tree

Hide file tree

Showing 4 changed files with 206 additions and 100 deletions.
diff --git a/docs/src/pages/demos/autocomplete/IntegrationAutosuggest.js b/docs/src/pages/demos/autocomplete/IntegrationAutosuggest.js
@@ -123,7 +123,6 @@ const styles = theme => ({
     flexGrow: 1,
     position: 'relative',
     height: 250,
-    width: 200,
   },
   suggestionsContainerOpen: {
     position: 'absolute',

diff --git a/docs/src/pages/demos/autocomplete/IntegrationDownshift.js b/docs/src/pages/demos/autocomplete/IntegrationDownshift.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import keycode from 'keycode';
+import Downshift from 'downshift';
 import { withStyles } from 'material-ui/styles';
 import TextField from 'material-ui/TextField';
 import Paper from 'material-ui/Paper';
 import { MenuItem } from 'material-ui/Menu';
-import Downshift from 'downshift';
+import Chip from 'material-ui/Chip';
 
 const suggestions = [
   { label: 'Afghanistan' },
@@ -63,7 +65,8 @@ function renderInput(inputProps) {
 function renderSuggestion(params) {
   const { suggestion, index, itemProps, highlightedIndex, selectedItem } = params;
   const isHighlighted = highlightedIndex === index;
-  const isSelected = selectedItem === suggestion.label;
+  const isSelected =
+    selectedItem === suggestion.label || selectedItem.indexOf(suggestion.label) > -1;
 
   return (
     <MenuItem
@@ -96,12 +99,111 @@ function getSuggestions(inputValue) {
   });
 }
 
+class DownshiftMultiple extends React.Component {
+  state = {
+    inputValue: '',
+    selectedItem: [],
+  };
+
+  handleKeyDown = event => {
+    const { inputValue, selectedItem } = this.state;
+    if (selectedItem.length && !inputValue.length && keycode(event) === 'backspace') {
+      this.setState({
+        selectedItem: selectedItem.slice(0, selectedItem.length - 1),
+      });
+    }
+  };
+
+  handleInputChange = event => {
+    this.setState({ inputValue: event.target.value });
+  };
+
+  handleChange = item => {
+    let { selectedItem } = this.state;
+
+    if (selectedItem.indexOf(item) === -1) {
+      selectedItem = [...selectedItem, item];
+    }
+
+    this.setState({
+      inputValue: '',
+      selectedItem,
+    });
+  };
+
+  handleDelete = item => () => {
+    const selectedItem = [...this.state.selectedItem];
+    selectedItem.splice(selectedItem.indexOf(item), 1);
+
+    this.setState({ selectedItem });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { inputValue, selectedItem } = this.state;
+
+    return (
+      <Downshift inputValue={inputValue} onChange={this.handleChange} selectedItem={selectedItem}>
+        {({
+          getInputProps,
+          getItemProps,
+          isOpen,
+          inputValue: inputValue2,
+          selectedItem: selectedItem2,
+          highlightedIndex,
+        }) => (
+          <div className={classes.container}>
+            {renderInput({
+              fullWidth: true,
+              classes,
+              InputProps: getInputProps({
+                startAdornment: selectedItem.map(item => (
+                  <Chip
+                    key={item}
+                    tabIndex={-1}
+                    label={item}
+                    className={classes.chip}
+                    onDelete={this.handleDelete(item)}
+                  />
+                )),
+                onChange: this.handleInputChange,
+                onKeyDown: this.handleKeyDown,
+                placeholder: 'Select multiple countries',
+                id: 'integration-downshift-multiple',
+              }),
+            })}
+            {isOpen ? (
+              <Paper className={classes.paper} square>
+                {getSuggestions(inputValue2).map((suggestion, index) =>
+                  renderSuggestion({
+                    suggestion,
+                    index,
+                    itemProps: getItemProps({ item: suggestion.label }),
+                    highlightedIndex,
+                    selectedItem: selectedItem2,
+                  }),
+                )}
+              </Paper>
+            ) : null}
+          </div>
+        )}
+      </Downshift>
+    );
+  }
+}
+
+DownshiftMultiple.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
 const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    height: 250,
+  },
   container: {
     flexGrow: 1,
     position: 'relative',
-    height: 250,
-    width: 200,
   },
   paper: {
     position: 'absolute',
@@ -110,39 +212,45 @@ const styles = theme => ({
     left: 0,
     right: 0,
   },
+  chip: {
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 4}px`,
+  },
 });
 
 function IntegrationDownshift(props) {
   const { classes } = props;
 
   return (
-    <Downshift>
-      {({ 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',
-            }),
-          })}
-          {isOpen ? (
-            <Paper className={classes.paper} square>
-              {getSuggestions(inputValue).map((suggestion, index) =>
-                renderSuggestion({
-                  suggestion,
-                  index,
-                  itemProps: getItemProps({ item: suggestion.label }),
-                  highlightedIndex,
-                  selectedItem,
-                }),
-              )}
-            </Paper>
-          ) : null}
-        </div>
-      )}
-    </Downshift>
+    <div className={classes.root}>
+      <Downshift>
+        {({ 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 ? (
+              <Paper className={classes.paper} square>
+                {getSuggestions(inputValue).map((suggestion, index) =>
+                  renderSuggestion({
+                    suggestion,
+                    index,
+                    itemProps: getItemProps({ item: suggestion.label }),
+                    highlightedIndex,
+                    selectedItem,
+                  }),
+                )}
+              </Paper>
+            ) : null}
+          </div>
+        )}
+      </Downshift>
+      <DownshiftMultiple classes={classes} />
+    </div>
   );
 }
 

diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
@@ -123,7 +123,6 @@ const styles = theme => ({
   root: {
     flexGrow: 1,
     height: 250,
-    width: 200,
   },
   chip: {
     margin: theme.spacing.unit / 4,
@@ -259,7 +258,7 @@ class IntegrationReactSelect extends React.Component {
             classes,
             value: single,
             onChange: this.handleChangeSingle,
-            placeholder: 'Select single-value…',
+            placeholder: 'Search a country (start with a)',
             instanceId: 'react-select-single',
             id: 'react-select-single',
             name: 'react-select-single',
@@ -275,7 +274,7 @@ class IntegrationReactSelect extends React.Component {
             value: multi,
             multi: true,
             onChange: this.handleChangeMulti,
-            placeholder: 'Select multi-value…',
+            placeholder: 'Select multiple countries',
             instanceId: 'react-select-chip',
             id: 'react-select-chip',
             name: 'react-select-chip',