react-standalone-form-mui/lib/MultiSelect.js

The Material UI suite for react-standalone-form library.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));

var _Input = _interopRequireDefault(require("@material-ui/core/Input"));

var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));

var _Select = _interopRequireDefault(require("@material-ui/core/Select"));

var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));

var _FormControl = _interopRequireDefault(require("./FormControl"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const MultiSelect = _ref => {
  let {
    name,
    value,
    required,
    setValue,
    options,
    classes
  } = _ref;
  return /*#__PURE__*/_react.default.createElement(_Select.default, {
    multiple: true,
    value: value || [],
    onChange: e => setValue(name, e.target.value, required),
    input: /*#__PURE__*/_react.default.createElement(_Input.default, {
      id: name
    }),
    renderValue: selected => /*#__PURE__*/_react.default.createElement("div", {
      className: classes.chips
    }, selected.map(item => {
      const selectedOption = options.find(option => option.value === item);
      return /*#__PURE__*/_react.default.createElement(_Chip.default, {
        key: item,
        label: typeof selectedOption === 'string' ? item : selectedOption.label,
        className: classes.chip
      });
    }))
  }, options.map((item, index) => typeof item === 'string' ? /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
    key: index,
    value: item
  }, item) : /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
    key: index,
    value: item.value
  }, item.label)));
};

MultiSelect.propTypes = {
  name: _propTypes.default.string.isRequired,
  value: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.string]),
  required: _propTypes.default.bool,
  setValue: _propTypes.default.func.isRequired,
  options: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
    label: _propTypes.default.node,
    value: _propTypes.default.any
  })]))
};

var _default = (0, _FormControl.default)((0, _withStyles.default)(theme => ({
  chips: {
    display: 'flex',
    flexWrap: 'wrap'
  },
  chip: {
    margin: theme.spacing(1)
  }
}))(MultiSelect));

exports.default = _default;