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

Better names for variables!

parent 8fc29f48
// Inspired by : https://material-ui.com/demos/autocomplete/
import React from 'react';
import PropTypes from 'prop-types';
import deburr from 'lodash/deburr';
......@@ -10,12 +12,6 @@ import MenuItem from '@material-ui/core/MenuItem';
import Chip from '@material-ui/core/Chip';
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) {
const { InputProps, classes, ref, ...other } = inputProps;
......@@ -64,23 +60,26 @@ renderSuggestion.propTypes = {
class DownshiftMultiple extends React.Component {
state = {
inputValue: '',
selectedItem: [],
selectedItems: [],
};
componentDidUpdate(prevProps, prevState, snapshot) {
if (this.state.selectedItem != prevState.selectedItem) {
this.props.onChange(this.state.selectedItem);
if (this.state.selectedItems != prevState.selectedItems) {
this.props.onChange(this.state.selectedItems);
}
}
getSuggestions(value) {
const { options } = this.props;
const { selectedItems } = this.state;
const inputValue = deburr(value.trim()).toLowerCase();
const inputLength = inputValue.length;
let count = 0;
if (inputLength === 0) {
return []
} else {
let out = _.difference(suggestions, this.state.selectedItem).filter(suggestion => {
let out = _.difference(options, selectedItems).filter(suggestion => {
const keep =
count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
......@@ -95,10 +94,10 @@ class DownshiftMultiple extends React.Component {
}
handleKeyDown = event => {
const { inputValue, selectedItem } = this.state;
if (selectedItem.length && !inputValue.length && keycode(event) === 'backspace') {
const { inputValue, selectedItems } = this.state;
if (selectedItems.length && !inputValue.length && keycode(event) === 'backspace') {
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 {
};
handleChange = item => {
let { selectedItem } = this.state;
if (selectedItem.indexOf(item) === -1) {
for (let ind in suggestions) {
let el = suggestions[ind]
const {options} = this.props;
let { selectedItems } = this.state;
if (selectedItems.indexOf(item) === -1) {
for (let ind in options) {
let el = options[ind]
if (el.id == item) {
selectedItem = [...selectedItem, el];
selectedItems = [...selectedItems, el];
break;
}
}
......@@ -121,28 +121,28 @@ class DownshiftMultiple extends React.Component {
this.setState({
inputValue: '',
selectedItem,
selectedItems,
});
};
handleDelete = item => () => {
this.setState(state => {
const selectedItem = [...state.selectedItem];
selectedItem.splice(selectedItem.indexOf(item), 1);
return { selectedItem };
const selectedItems = [...state.selectedItems];
selectedItems.splice(selectedItems.indexOf(item), 1);
return { selectedItems };
});
};
render() {
const { classes } = this.props;
const { inputValue, selectedItem } = this.state;
const { inputValue, selectedItems } = this.state;
return (
<Downshift
id="downshift-multiple"
inputValue={inputValue}
onChange={this.handleChange}
selectedItem={selectedItem}
selectedItem={selectedItems}
>
{({
getInputProps,
......@@ -157,13 +157,15 @@ class DownshiftMultiple extends React.Component {
fullWidth: true,
classes,
InputProps: getInputProps({
startAdornment: selectedItem.map(item => (
startAdornment: selectedItems.map(item => (
<Chip
key={item.id}
tabIndex={-1}
label={item.label}
className={classes.chip}
onDelete={this.handleDelete(item.id)}
variant="outlined"
color="primary"
/>
)),
onChange: this.handleInputChange,
......@@ -196,6 +198,15 @@ DownshiftMultiple.propTypes = {
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 => ({
root: {
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