MultiSelect Field added

frontend/src/components/university/shared/fields/MultiSelectField.js

+
+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