Commit 4ef12c45 authored by Florent Chehab's avatar Florent Chehab

MultiSelect Field added

parent cb45b273
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
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