@shakthillc/components/es/MultiSelector/MultiSelector.js

React generic components for shakthi products

import _toConsumableArray from "babel-runtime/helpers/toConsumableArray";
import _Object$getPrototypeOf from "babel-runtime/core-js/object/get-prototype-of";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import React from "react";
import PropTypes from "prop-types";
import style from "./MultiSelector.module.css";
import Badge from "./Badge";
import Popup from "../Popup/Popup";
import Avatar from "./../Avatar/Avatar";

import _ from "lodash";

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 (_.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 React.createElement(Badge, {
          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 React.createElement(
          "span",
          {
            key: i,
            className: style.dropdownList,
            onClick: _this5.handleChange.bind(_this5, obj, mode)
          },
          React.createElement(Avatar, { size: "24px", text: obj["label"] }),
          obj.label
        );
      });
      html.push(React.createElement(
        "span",
        {
          style: { display: options.length != 0 ? "none" : "" },
          className: style.dropdownList__noitems
        },
        " ",
        "No items found"
      ));
      return React.createElement(
        "div",
        { className: style.selectContainer },
        React.createElement(
          "div",
          {
            style: { maxHeight: singleStyle },
            className: isPopupOpen === true ? style.selectStyle_click : style.selectStyle,
            onClick: togglePopup
          },
          React.createElement(
            "div",
            { className: style.inputContainer },
            React.createElement(
              "div",
              { style: { display: "inline" }, onClick: removeClose },
              selectedLabel
            ),
            React.createElement(
              "p",
              { className: style.selectedTxt },
              inputText
            )
          )
        ),
        isPopupOpen ? React.createElement(
          "div",
          { onClick: removeClose, className: style.selectDropdown },
          html
        ) : null
      );
    }
  }]);

  return MultiSelector;
}(React.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: PropTypes.bool,
  onChange: PropTypes.func,
  options: PropTypes.array,
  selectedValue: PropTypes.string
};

export default Popup(MultiSelector);