@shakthillc/components/lib/MultiSelector/MultiSelector.js

React generic components for shakthi products

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _MultiSelectorModule = require("./MultiSelector.module.css");

var _MultiSelectorModule2 = _interopRequireDefault(_MultiSelectorModule);

var _Badge = require("./Badge");

var _Badge2 = _interopRequireDefault(_Badge);

var _Popup = require("../Popup/Popup");

var _Popup2 = _interopRequireDefault(_Popup);

var _Avatar = require("./../Avatar/Avatar");

var _Avatar2 = _interopRequireDefault(_Avatar);

var _lodash = require("lodash");

var _lodash2 = _interopRequireDefault(_lodash);

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

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var MultiSelector = function (_React$Component) {
  _inherits(MultiSelector, _React$Component);

  function MultiSelector(props) {
    _classCallCheck(this, MultiSelector);

    var _this = _possibleConstructorReturn(this, (MultiSelector.__proto__ || Object.getPrototypeOf(MultiSelector)).call(this, props));

    _this.state = {
      selectedOption: _this.props.selectedOption,
      isOpen: false,
      options: _this.props.options || [],
      selectedValue: _this.props.selectedOption || []
    };
    _this.handleChange = _this.handleChange.bind(_this);
    _this.removeBadge = _this.removeBadge.bind(_this);
    _this.changePicker = _this.changePicker.bind(_this);
    return _this;
  }

  _createClass(MultiSelector, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var _props = this.props,
          selectedOption = _props.selectedOption,
          options = _props.options;

      if (selectedOption && selectedOption.length > 0) {
        var _filteredOptions = this.props.options.filter(function (_ref) {
          var id1 = _ref.value;
          return !_this2.props.selectedOption.some(function (_ref2) {
            var id2 = _ref2.value;
            return id2 === id1;
          });
        });
        this.setState({
          selectedValue: selectedOption,
          options: _filteredOptions
        });
      }
      if (options && options.length > 0) {
        var filteredOptions = options;
        if (selectedOption && selectedOption.length > 0) {
          filteredOptions = this.props.options.filter(function (_ref3) {
            var id1 = _ref3.value;
            return !_this2.props.selectedOption.some(function (_ref4) {
              var id2 = _ref4.value;
              return id2 === id1;
            });
          });
        }

        this.setState({ options: filteredOptions });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      var _this3 = this;

      // const { selectedValue, options, orig_options } = this.state;
      var _props2 = this.props,
          selectedOption = _props2.selectedOption,
          options = _props2.options;

      if (selectedOption && selectedOption.length > prevProps.selectedOption.length) {
        var _filteredOptions2 = this.props.options.filter(function (_ref5) {
          var id1 = _ref5.value;
          return !_this3.props.selectedOption.some(function (_ref6) {
            var id2 = _ref6.value;
            return id2 === id1;
          });
        });
        this.setState({
          selectedValue: selectedOption,
          options: _filteredOptions2
        });
      }
      if (options && options.length != prevProps.options.length) {
        var filteredOptions = options;
        if (selectedOption && selectedOption.length > 0) {
          filteredOptions = this.props.options.filter(function (_ref7) {
            var id1 = _ref7.value;
            return !_this3.props.selectedOption.some(function (_ref8) {
              var id2 = _ref8.value;
              return id2 === id1;
            });
          });
        }

        this.setState({ options: filteredOptions, selectedValue: selectedOption || [] });
      }
    }
  }, {
    key: "handleChange",
    value: function handleChange(val, mode) {
      var onChange = this.props.onChange;
      var options = this.state.options;

      var modifedOptions = options.filter(function (data) {
        if (_lodash2.default.isEqual(data, val)) {} else {
          return data;
        }
      });
      var selectedValue = this.state.selectedValue;
      selectedValue.push(val);
      this.setState({ selectedValue: selectedValue, options: modifedOptions });
      onChange && onChange(selectedValue);
    }
  }, {
    key: "removeBadge",
    value: function removeBadge(badgeObj) {
      var onChange = this.props.onChange;

      var selectedValue = [].concat(_toConsumableArray(this.state.selectedValue));
      var options = [].concat(_toConsumableArray(this.state.options), [badgeObj]);
      selectedValue = selectedValue.filter(function (obj) {
        return obj.value !== badgeObj.value;
      });
      this.setState({ selectedValue: selectedValue, options: options });
      onChange && onChange(selectedValue);
    }
  }, {
    key: "changePicker",
    value: function changePicker(val) {
      var _this4 = this;

      var result = null;
      var selectedOption = this.state.selectedOption;

      var selectedValue = this.state.selectedValue;

      result = selectedValue.map(function (obj) {
        return _react2.default.createElement(_Badge2.default, {
          text: obj.label,
          avatar: obj.avatar,
          color: obj["color"],
          onClick: function onClick(e) {
            return _this4.removeBadge(obj);
          }
        });
      });

      return result;
    }
  }, {
    key: "render",
    value: function render() {
      var _this5 = this;

      var _props3 = this.props,
          _props3$disabled = _props3.disabled,
          disabled = _props3$disabled === undefined ? false : _props3$disabled,
          mode = _props3.mode,
          isPopupOpen = _props3.isPopupOpen,
          togglePopup = _props3.togglePopup,
          removeClose = _props3.removeClose,
          _props3$text = _props3.text1,
          text1 = _props3$text === undefined ? "Choose one or more people" : _props3$text,
          _props3$text2 = _props3.text2,
          text2 = _props3$text2 === undefined ? "add more people" : _props3$text2;
      var _state = this.state,
          isOpen = _state.isOpen,
          _state$selectedValue = _state.selectedValue,
          selectedValue = _state$selectedValue === undefined ? "" : _state$selectedValue,
          options = _state.options;

      var selectedLabel = this.changePicker(this.props.mode);
      var inputText = void 0;
      var singleStyle = mode === "S" ? "32px" : "";
      if (mode !== "S") {
        inputText = selectedValue.length !== 0 ? text2 : text1;
      } else {
        inputText = selectedValue.length !== 0 ? "" : "Enter people";
      }

      var html = options.map(function (obj, i) {
        return _react2.default.createElement(
          "span",
          {
            key: i,
            className: _MultiSelectorModule2.default.dropdownList,
            onClick: _this5.handleChange.bind(_this5, obj, mode)
          },
          _react2.default.createElement(_Avatar2.default, { size: "24px", text: obj["label"] }),
          obj.label
        );
      });
      html.push(_react2.default.createElement(
        "span",
        {
          style: { display: options.length != 0 ? "none" : "" },
          className: _MultiSelectorModule2.default.dropdownList__noitems
        },
        " ",
        "No items found"
      ));
      return _react2.default.createElement(
        "div",
        { className: _MultiSelectorModule2.default.selectContainer },
        _react2.default.createElement(
          "div",
          {
            style: { maxHeight: singleStyle },
            className: isPopupOpen === true ? _MultiSelectorModule2.default.selectStyle_click : _MultiSelectorModule2.default.selectStyle,
            onClick: togglePopup
          },
          _react2.default.createElement(
            "div",
            { className: _MultiSelectorModule2.default.inputContainer },
            _react2.default.createElement(
              "div",
              { style: { display: "inline" }, onClick: removeClose },
              selectedLabel
            ),
            _react2.default.createElement(
              "p",
              { className: _MultiSelectorModule2.default.selectedTxt },
              inputText
            )
          )
        ),
        isPopupOpen ? _react2.default.createElement(
          "div",
          { onClick: removeClose, className: _MultiSelectorModule2.default.selectDropdown },
          html
        ) : null
      );
    }
  }]);

  return MultiSelector;
}(_react2.default.Component);

MultiSelector.defaultProps = {
  options: [{ value: "Rick", label: "Rick", color: "lightblue" }, { value: "Morty", label: "Morty", color: "orange" }, { value: "Perry", label: "Perry", color: "lightgreen" }],
  disabled: false
};
MultiSelector.propTypes = {
  disabled: _propTypes2.default.bool,
  onChange: _propTypes2.default.func,
  options: _propTypes2.default.array,
  selectedValue: _propTypes2.default.string
};

exports.default = (0, _Popup2.default)(MultiSelector);