Commit 9a0cded3 authored by Florent Chehab's avatar Florent Chehab
Browse files

Better names for variables!

parent 8fc29f48
// Inspired by : https://material-ui.com/demos/autocomplete/
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import deburr from 'lodash/deburr'; import deburr from 'lodash/deburr';
...@@ -10,12 +12,6 @@ import MenuItem from '@material-ui/core/MenuItem'; ...@@ -10,12 +12,6 @@ import MenuItem from '@material-ui/core/MenuItem';
import Chip from '@material-ui/core/Chip'; import Chip from '@material-ui/core/Chip';
import _ from 'underscore' import _ from 'underscore'
const suggestions = [
{ label: 'Afghanistan', id: 1 },
{ label: 'Aland Islands', id: 2 },
{ label: 'Albania', id: 3 },
{ label: 'Algeria', id: 4 },
];
function renderInput(inputProps) { function renderInput(inputProps) {
const { InputProps, classes, ref, ...other } = inputProps; const { InputProps, classes, ref, ...other } = inputProps;
...@@ -64,23 +60,26 @@ renderSuggestion.propTypes = { ...@@ -64,23 +60,26 @@ renderSuggestion.propTypes = {
class DownshiftMultiple extends React.Component { class DownshiftMultiple extends React.Component {
state = { state = {
inputValue: '', inputValue: '',
selectedItem: [], selectedItems: [],
}; };
componentDidUpdate(prevProps, prevState, snapshot) { componentDidUpdate(prevProps, prevState, snapshot) {
if (this.state.selectedItem != prevState.selectedItem) { if (this.state.selectedItems != prevState.selectedItems) {
this.props.onChange(this.state.selectedItem); this.props.onChange(this.state.selectedItems);
} }
} }
getSuggestions(value) { getSuggestions(value) {
const { options } = this.props;
const { selectedItems } = this.state;
const inputValue = deburr(value.trim()).toLowerCase(); const inputValue = deburr(value.trim()).toLowerCase();
const inputLength = inputValue.length; const inputLength = inputValue.length;
let count = 0; let count = 0;
if (inputLength === 0) { if (inputLength === 0) {
return [] return []
} else { } else {
let out = _.difference(suggestions, this.state.selectedItem).filter(suggestion => { let out = _.difference(options, selectedItems).filter(suggestion => {
const keep = const keep =
count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue; count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
...@@ -95,10 +94,10 @@ class DownshiftMultiple extends React.Component { ...@@ -95,10 +94,10 @@ class DownshiftMultiple extends React.Component {
} }
handleKeyDown = event => { handleKeyDown = event => {
const { inputValue, selectedItem } = this.state; const { inputValue, selectedItems } = this.state;
if (selectedItem.length && !inputValue.length && keycode(event) === 'backspace') { if (selectedItems.length && !inputValue.length && keycode(event) === 'backspace') {
this.setState({ this.setState({
selectedItem: selectedItem.slice(0, selectedItem.length - 1), selectedItems: selectedItems.slice(0, selectedItems.length - 1),
}); });
} }
}; };
...@@ -108,12 +107,13 @@ class DownshiftMultiple extends React.Component { ...@@ -108,12 +107,13 @@ class DownshiftMultiple extends React.Component {
}; };
handleChange = item => { handleChange = item => {
let { selectedItem } = this.state; const {options} = this.props;
if (selectedItem.indexOf(item) === -1) { let { selectedItems } = this.state;
for (let ind in suggestions) { if (selectedItems.indexOf(item) === -1) {
let el = suggestions[ind] for (let ind in options) {
let el = options[ind]
if (el.id == item) { if (el.id == item) {
selectedItem = [...selectedItem, el]; selectedItems = [...selectedItems, el];
break; break;
} }
} }
...@@ -121,28 +121,28 @@ class DownshiftMultiple extends React.Component { ...@@ -121,28 +121,28 @@ class DownshiftMultiple extends React.Component {
this.setState({ this.setState({
inputValue: '', inputValue: '',
selectedItem, selectedItems,
}); });
}; };
handleDelete = item => () => { handleDelete = item => () => {
this.setState(state => { this.setState(state => {
const selectedItem = [...state.selectedItem]; const selectedItems = [...state.selectedItems];
selectedItem.splice(selectedItem.indexOf(item), 1); selectedItems.splice(selectedItems.indexOf(item), 1);
return { selectedItem }; return { selectedItems };
}); });
}; };
render() { render() {
const { classes } = this.props; const { classes } = this.props;
const { inputValue, selectedItem } = this.state; const { inputValue, selectedItems } = this.state;
return ( return (
<Downshift <Downshift
id="downshift-multiple" id="downshift-multiple"
inputValue={inputValue} inputValue={inputValue}
onChange={this.handleChange} onChange={this.handleChange}
selectedItem={selectedItem} selectedItem={selectedItems}
> >
{({ {({
getInputProps, getInputProps,
...@@ -157,13 +157,15 @@ class DownshiftMultiple extends React.Component { ...@@ -157,13 +157,15 @@ class DownshiftMultiple extends React.Component {
fullWidth: true, fullWidth: true,
classes, classes,
InputProps: getInputProps({ InputProps: getInputProps({
startAdornment: selectedItem.map(item => ( startAdornment: selectedItems.map(item => (
<Chip <Chip
key={item.id} key={item.id}
tabIndex={-1} tabIndex={-1}
label={item.label} label={item.label}
className={classes.chip} className={classes.chip}
onDelete={this.handleDelete(item.id)} onDelete={this.handleDelete(item.id)}
variant="outlined"
color="primary"
/> />
)), )),
onChange: this.handleInputChange, onChange: this.handleInputChange,
...@@ -196,6 +198,15 @@ DownshiftMultiple.propTypes = { ...@@ -196,6 +198,15 @@ DownshiftMultiple.propTypes = {
classes: PropTypes.object.isRequired, classes: PropTypes.object.isRequired,
}; };
DownshiftMultiple.defaultProps = {
options: [
{ label: 'Afghanistan', id: 1 },
{ label: 'Aland Islands', id: 2 },
{ label: 'Albania', id: 3 },
{ label: 'Algeria', id: 4 },
],
};
const styles = theme => ({ const styles = theme => ({
root: { root: {
flexGrow: 1, flexGrow: 1,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment