Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Rex Dri
Rex Dri
Commits
9a0cded3
Commit
9a0cded3
authored
Sep 03, 2018
by
Florent Chehab
Browse files
Better names for variables!
parent
8fc29f48
Changes
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/search/Search.js
View file @
9a0cded3
// 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
:
[],
selectedItem
s
:
[],
};
componentDidUpdate
(
prevProps
,
prevState
,
snapshot
)
{
if
(
this
.
state
.
selectedItem
!=
prevState
.
selectedItem
)
{
this
.
props
.
onChange
(
this
.
state
.
selectedItem
);
if
(
this
.
state
.
selectedItem
s
!=
prevState
.
selectedItem
s
)
{
this
.
props
.
onChange
(
this
.
state
.
selectedItem
s
);
}
}
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
(
sugges
tions
,
this
.
state
.
selectedItem
).
filter
(
suggestion
=>
{
let
out
=
_
.
difference
(
op
tions
,
selectedItem
s
).
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
,
selectedItem
s
}
=
this
.
state
;
if
(
selectedItem
s
.
length
&&
!
inputValue
.
length
&&
keycode
(
event
)
===
'
backspace
'
)
{
this
.
setState
({
selectedItem
:
selectedItem
.
slice
(
0
,
selectedItem
.
length
-
1
),
selectedItem
s
:
selectedItem
s
.
slice
(
0
,
selectedItem
s
.
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
];
selectedItem
s
=
[...
selectedItem
s
,
el
];
break
;
}
}
...
...
@@ -121,28 +121,28 @@ class DownshiftMultiple extends React.Component {
this
.
setState
({
inputValue
:
''
,
selectedItem
,
selectedItem
s
,
});
};
handleDelete
=
item
=>
()
=>
{
this
.
setState
(
state
=>
{
const
selectedItem
=
[...
state
.
selectedItem
];
selectedItem
.
splice
(
selectedItem
.
indexOf
(
item
),
1
);
return
{
selectedItem
};
const
selectedItem
s
=
[...
state
.
selectedItem
s
];
selectedItem
s
.
splice
(
selectedItem
s
.
indexOf
(
item
),
1
);
return
{
selectedItem
s
};
});
};
render
()
{
const
{
classes
}
=
this
.
props
;
const
{
inputValue
,
selectedItem
}
=
this
.
state
;
const
{
inputValue
,
selectedItem
s
}
=
this
.
state
;
return
(
<
Downshift
id
=
"
downshift-multiple
"
inputValue
=
{
inputValue
}
onChange
=
{
this
.
handleChange
}
selectedItem
=
{
selectedItem
}
selectedItem
=
{
selectedItem
s
}
>
{({
getInputProps
,
...
...
@@ -157,13 +157,15 @@ class DownshiftMultiple extends React.Component {
fullWidth
:
true
,
classes
,
InputProps
:
getInputProps
({
startAdornment
:
selectedItem
.
map
(
item
=>
(
startAdornment
:
selectedItem
s
.
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
,
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment