@bootstrap-styled/ra-ui/lib/components/extendMui/SelectMutiple/index.js

UI components for react-admin

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _reactFontawesome = require("@fortawesome/react-fontawesome");

var _faPlusCircle = require("@fortawesome/free-solid-svg-icons/faPlusCircle");

var _Dropdown = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Dropdown"));

var _DropdownToggle = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Dropdown/DropdownToggle"));

var _DropdownMenu = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Dropdown/DropdownMenu"));

var SelectInputUnstyled = function (_React$Component) {
  (0, _inherits2.default)(SelectInputUnstyled, _React$Component);

  function SelectInputUnstyled() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, SelectInputUnstyled);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(SelectInputUnstyled)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
      isOpen: false
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
      _this.setState({
        isOpen: !_this.state.isOpen
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemClick", function (child) {
      return function (event) {
        var onChange = _this.props.onChange;

        if (onChange) {
          var value;
          var target;

          if (event.target) {
            target = event.target;
          }

          value = Array.isArray(_this.props.value) ? (0, _toConsumableArray2.default)(_this.props.value) : [];
          var itemIndex = value.indexOf(child.props.value);

          if (itemIndex === -1) {
            value.push(child.props.value);
          } else {
            value.splice(itemIndex, 1);
          }

          event.persist();
          event.target = (0, _objectSpread2.default)({}, target, {
            value: value
          });
          onChange(event, child);
        }
      };
    });
    return _this;
  }

  (0, _createClass2.default)(SelectInputUnstyled, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          children = _this$props.children,
          className = _this$props.className,
          value = _this$props.value,
          renderValue = _this$props.renderValue;

      var items = _react.default.Children.map(children, function (child) {
        if (!_react.default.isValidElement(child)) {
          return null;
        }

        var selected;
        selected = value.indexOf(child.props.value) !== -1;
        return _react.default.cloneElement(child, {
          onClick: _this2.handleItemClick(child),
          role: 'option',
          selected: selected,
          value: undefined,
          className: (0, _classnames.default)({
            active: selected
          })
        });
      });

      return _react.default.createElement("div", {
        className: (0, _classnames.default)(className, 'select-multiple cursor-pointer')
      }, _react.default.createElement(_Dropdown.default, {
        isOpen: this.state.isOpen,
        toggle: this.handleClick,
        dropup: true
      }, _react.default.createElement(_DropdownToggle.default, {
        tag: "div",
        className: "select-multiple-toggle d-flex align-items-center",
        tabIndex: "0"
      }, value ? renderValue(value) : null, _react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
        icon: _faPlusCircle.faPlusCircle,
        className: "ml-2 text-success",
        size: "2x"
      })), _react.default.createElement(_DropdownMenu.default, null, items)), _react.default.createElement("input", {
        value: Array.isArray(value) ? value.join(',') : value,
        type: "hidden"
      }));
    }
  }]);
  return SelectInputUnstyled;
}(_react.default.Component);

var SelectInput = (0, _styledComponents.default)(SelectInputUnstyled).withConfig({
  displayName: "SelectMutiple__SelectInput",
  componentId: "sc-1c88xbb-0"
})(["", ""], function (props) {
  return "\n  &.select-multiple {\n    .select-multiple-toggle {\n      border: 1px solid lightgrey;\n      line-height: 1.25;\n      padding: .25rem;\n      min-height: 32px;\n      border-radius: 5px;\n      min-width: 75px;\n      width: auto;\n      &:focus {\n        outline: 1px solid ".concat(props.theme['$brand-primary'], ";\n      }\n      .badge {\n        border-radius: 1rem;\n        padding: .75rem;\n      }\n    }\n    .dropdown-item {\n      padding: .25rem;\n      &.active {\n        background-color: lightgrey;\n        color: black;\n      }\n    }\n  }\n");
});
SelectInput.propTypes = {
  className: _propTypes.default.string,
  children: _propTypes.default.node,
  options: _propTypes.default.array,
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))]).isRequired
};
var _default = SelectInput;
exports.default = _default;
module.exports = exports.default;