Skip to content
GitLab
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
4ef12c45
Commit
4ef12c45
authored
Sep 15, 2018
by
Florent Chehab
Browse files
MultiSelect Field added
parent
cb45b273
Changes
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/university/shared/fields/MultiSelectField.js
0 → 100644
View file @
4ef12c45
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
withStyles
from
'
@material-ui/core/styles/withStyles
'
;
import
compose
from
'
recompose/compose
'
;
import
FieldWrapper
from
'
./FieldWrapper
'
;
import
MenuItem
from
'
@material-ui/core/MenuItem
'
;
import
ListItemText
from
'
@material-ui/core/ListItemText
'
;
import
Select
from
'
@material-ui/core/Select
'
;
import
Checkbox
from
'
@material-ui/core/Checkbox
'
;
import
Field
from
'
./Field
'
;
const
styles
=
theme
=>
({
})
class
MultiSelectField
extends
Field
{
constructor
(
props
)
{
super
(
props
);
this
.
optionsByValue
=
Object
();
props
.
options
.
map
((
opt
)
=>
this
.
optionsByValue
[
opt
.
value
]
=
opt
.
label
);
}
hasError
(
value
)
{
let
messages
=
Array
();
if
(
this
.
props
.
required
&&
value
.
length
===
0
)
{
messages
.
push
(
"
Ce champ est requis.
"
);
}
return
this
.
buildError
(
messages
);
}
handleChangeValue
=
(
value
)
=>
{
this
.
setState
({
value
});
}
render
()
{
const
{
classes
}
=
this
.
props
;
return
(
<
FieldWrapper
required
=
{
this
.
props
.
required
}
hasError
=
{
this
.
state
.
error
.
status
}
errors
=
{
this
.
state
.
error
.
messages
}
label
=
{
this
.
props
.
label
}
>
<
Select
value
=
{
this
.
state
.
value
}
onChange
=
{(
e
)
=>
this
.
handleChangeValue
(
e
.
target
.
value
)}
multiple
renderValue
=
{
selected
=>
selected
.
map
((
el
)
=>
this
.
optionsByValue
[
el
]).
join
(
'
,
'
)}
>
{
this
.
props
.
options
.
map
((
el
,
ind
)
=>
(
<
MenuItem
disabled
=
{
false
||
el
.
disabled
}
key
=
{
el
.
value
}
value
=
{
el
.
value
}
>
<
Checkbox
checked
=
{
this
.
state
.
value
.
indexOf
(
el
.
value
)
>
-
1
}
/
>
<
ListItemText
primary
=
{
el
.
label
}
/
>
<
/MenuItem
>
))
}
<
/Select
>
<
/FieldWrapper
>
)
}
}
MultiSelectField
.
defaultProps
=
{
value
:
Array
(),
}
MultiSelectField
.
propTypes
=
{
value
:
PropTypes
.
arrayOf
(
PropTypes
.
oneOfType
([
PropTypes
.
number
,
PropTypes
.
string
])),
options
:
PropTypes
.
arrayOf
(
PropTypes
.
shape
({
label
:
PropTypes
.
string
.
isRequired
,
value
:
PropTypes
.
oneOfType
([
PropTypes
.
number
.
isRequired
,
PropTypes
.
string
.
isRequired
]),
disabled
:
PropTypes
.
bool
})),
};
export
default
compose
(
withStyles
(
styles
,
{
withTheme
:
true
}),
)(
MultiSelectField
);
\ No newline at end of file
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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