react-multiselect-two-sides/lib/index.js

React multiselect two sides component

"use strict";

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

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

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

var _utils = require("./utils");

var _Filter = _interopRequireDefault(require("./Filter"));

var _List = _interopRequireDefault(require("./List"));

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var defaultProps = {
  availableFooter: null,
  availableHeader: null,
  className: null,
  clearFilterText: 'Clear',
  clearable: true,
  deselectAllText: 'Deselect all',
  disabled: false,
  filterBy: _utils.filterBy,
  filterComponent: null,
  highlight: [],
  labelKey: 'label',
  limit: undefined,
  onChange: function onChange() {},
  options: [],
  placeholder: '',
  searchable: false,
  selectAllText: 'Select all',
  selectedFooter: null,
  selectedHeader: null,
  showControls: false,
  value: [],
  valueKey: 'value'
};

var MultiselectTwoSides =
/*#__PURE__*/
function (_Component) {
  _inherits(MultiselectTwoSides, _Component);

  function MultiselectTwoSides(props) {
    var _this;

    _classCallCheck(this, MultiselectTwoSides);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(MultiselectTwoSides).call(this, props));
    _this.state = {
      filterAvailable: '',
      filterSelected: ''
    };
    _this.handleClickAvailable = _this.handleClickAvailable.bind(_assertThisInitialized(_this));
    _this.handleClickSelected = _this.handleClickSelected.bind(_assertThisInitialized(_this));
    _this.handleClickSelectAll = _this.handleClickSelectAll.bind(_assertThisInitialized(_this));
    _this.handleClickDeselectAll = _this.handleClickDeselectAll.bind(_assertThisInitialized(_this));
    _this.handleChangeFilterAvailable = _this.handleChangeFilterAvailable.bind(_assertThisInitialized(_this));
    _this.handleChangeFilterSelected = _this.handleChangeFilterSelected.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(MultiselectTwoSides, [{
    key: "handleClickAvailable",
    value: function handleClickAvailable(value) {
      this.props.onChange(this.props.value.concat(value));
    }
  }, {
    key: "handleClickSelected",
    value: function handleClickSelected(value) {
      var _this$props = this.props,
          onChange = _this$props.onChange,
          currentValue = _this$props.value;
      var newValue = currentValue.slice();
      newValue.splice(currentValue.indexOf(value), 1);
      onChange(newValue);
    }
  }, {
    key: "handleClickSelectAll",
    value: function handleClickSelectAll() {
      var _this$props2 = this.props,
          limit = _this$props2.limit,
          onChange = _this$props2.onChange,
          value = _this$props2.value,
          valueKey = _this$props2.valueKey;
      var previousValue = value.slice();
      var options = this.filterAvailable();
      var newValue = options.reduce(function (acc, option) {
        if (!option.disabled && previousValue.indexOf(option[valueKey]) === -1) {
          acc.push(option[valueKey]);
        }

        return acc;
      }, previousValue);
      var limitedValue = newValue;

      if (limit >= 0) {
        limitedValue = limitedValue.slice(0, limit);
      }

      limitedValue.sort();
      onChange(limitedValue);
    }
  }, {
    key: "handleClickDeselectAll",
    value: function handleClickDeselectAll() {
      var _this$props3 = this.props,
          onChange = _this$props3.onChange,
          value = _this$props3.value,
          valueKey = _this$props3.valueKey;
      var previousValue = value.slice();
      var options = this.filterActive();
      var optionsValueMap = options.reduce(function (acc, option) {
        acc[option[valueKey]] = true;
        return acc;
      }, {});
      var newValue = previousValue.reduce(function (acc, value) {
        if (!optionsValueMap[value]) {
          acc.push(value);
        }

        return acc;
      }, []);
      onChange(newValue);
    }
  }, {
    key: "filterAvailable",
    value: function filterAvailable() {
      var _this$props4 = this.props,
          filterBy = _this$props4.filterBy,
          highlight = _this$props4.highlight,
          labelKey = _this$props4.labelKey,
          limit = _this$props4.limit,
          options = _this$props4.options,
          value = _this$props4.value,
          valueKey = _this$props4.valueKey,
          searchable = _this$props4.searchable;
      var filtered = options.reduce(function (acc, option) {
        if (value.indexOf(option[valueKey]) === -1) {
          acc.push(option);
        }

        return acc;
      }, []);
      var limited = filtered;

      if (value.length >= limit) {
        limited = filtered.map(function (option) {
          return Object.assign({}, option, {
            disabled: true
          });
        });
      }

      if (highlight && highlight.length > 0) {
        limited = limited.map(function (option) {
          if (highlight.indexOf(option[valueKey]) > -1) {
            return Object.assign({}, option, {
              highlighted: true
            });
          }

          return option;
        });
      }

      if (!searchable) {
        return limited;
      }

      var filter = this.state.filterAvailable;

      if (filter) {
        return limited.filter(function (option) {
          return filterBy(option, filter, labelKey);
        });
      }

      return limited;
    }
  }, {
    key: "filterActive",
    value: function filterActive() {
      var _this$props5 = this.props,
          filterBy = _this$props5.filterBy,
          labelKey = _this$props5.labelKey,
          options = _this$props5.options,
          value = _this$props5.value,
          valueKey = _this$props5.valueKey;
      var filtered = options.reduce(function (acc, option) {
        if (value.indexOf(option[valueKey]) > -1) {
          acc.push(option);
        }

        return acc;
      }, []);

      if (!this.props.searchable) {
        return filtered;
      }

      var filter = this.state.filterSelected;

      if (filter) {
        return filtered.filter(function (option) {
          return filterBy(option, filter, labelKey);
        });
      }

      return filtered;
    }
  }, {
    key: "handleChangeFilterAvailable",
    value: function handleChangeFilterAvailable(filterAvailable) {
      this.setState({
        filterAvailable: filterAvailable
      });
    }
  }, {
    key: "handleChangeFilterSelected",
    value: function handleChangeFilterSelected(filterSelected) {
      this.setState({
        filterSelected: filterSelected
      });
    }
  }, {
    key: "renderFilter",
    value: function renderFilter(value, onChange) {
      var _this$props6 = this.props,
          clearFilterText = _this$props6.clearFilterText,
          clearable = _this$props6.clearable,
          disabled = _this$props6.disabled,
          filterComponent = _this$props6.filterComponent,
          placeholder = _this$props6.placeholder;

      if (!filterComponent) {
        return _react["default"].createElement(_Filter["default"], {
          value: value,
          clearFilterText: clearFilterText,
          clearable: clearable,
          disabled: disabled,
          placeholder: placeholder,
          onChange: onChange
        });
      }

      return _react["default"].createElement(filterComponent, {
        clearFilterText: clearFilterText,
        clearable: clearable,
        disabled: disabled,
        onChange: onChange,
        placeholder: placeholder,
        value: value
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props7 = this.props,
          availableFooter = _this$props7.availableFooter,
          availableHeader = _this$props7.availableHeader,
          className = _this$props7.className,
          deselectAllText = _this$props7.deselectAllText,
          disabled = _this$props7.disabled,
          labelKey = _this$props7.labelKey,
          limit = _this$props7.limit,
          options = _this$props7.options,
          searchable = _this$props7.searchable,
          selectAllText = _this$props7.selectAllText,
          selectedFooter = _this$props7.selectedFooter,
          selectedHeader = _this$props7.selectedHeader,
          showControls = _this$props7.showControls,
          value = _this$props7.value,
          valueKey = _this$props7.valueKey;
      var _this$state = this.state,
          filterAvailable = _this$state.filterAvailable,
          filterSelected = _this$state.filterSelected;
      return _react["default"].createElement("div", {
        className: (0, _classnames["default"])('msts', disabled && 'msts_disabled', className)
      }, availableHeader || selectedHeader ? _react["default"].createElement("div", {
        className: "msts__heading"
      }, _react["default"].createElement("div", {
        className: "msts__side msts__side_available"
      }, availableHeader), _react["default"].createElement("div", {
        className: "msts__side msts__side_selected"
      }, selectedHeader)) : null, searchable ? _react["default"].createElement("div", {
        className: "msts__subheading"
      }, _react["default"].createElement("div", {
        className: "msts__side msts__side_filter"
      }, this.renderFilter(filterAvailable, this.handleChangeFilterAvailable)), _react["default"].createElement("div", {
        className: "msts__side msts__side_filter"
      }, this.renderFilter(filterSelected, this.handleChangeFilterSelected))) : null, _react["default"].createElement("div", {
        className: "msts__body"
      }, _react["default"].createElement("div", {
        className: "msts__side msts__side_available"
      }, _react["default"].createElement(_List["default"], {
        options: this.filterAvailable(),
        disabled: disabled,
        labelKey: labelKey,
        valueKey: valueKey,
        onClick: this.handleClickAvailable
      })), showControls ? _react["default"].createElement("div", {
        className: "msts__side msts__side_controls"
      }, _react["default"].createElement("button", {
        className: "msts__control msts__control_select-all",
        title: selectAllText,
        type: "button",
        disabled: value.length === options.length || value.length >= limit || disabled,
        onClick: this.handleClickSelectAll
      }), _react["default"].createElement("button", {
        className: "msts__control msts__control_deselect-all",
        title: deselectAllText,
        type: "button",
        disabled: !value.length || disabled,
        onClick: this.handleClickDeselectAll
      })) : null, _react["default"].createElement("div", {
        className: "msts__side msts__side_selected"
      }, _react["default"].createElement(_List["default"], {
        options: this.filterActive(),
        disabled: disabled,
        labelKey: labelKey,
        valueKey: valueKey,
        onClick: this.handleClickSelected
      }))), availableFooter || selectedFooter ? _react["default"].createElement("div", {
        className: "msts__footer"
      }, _react["default"].createElement("div", {
        className: "msts__side msts__side_available"
      }, availableFooter), _react["default"].createElement("div", {
        className: "msts__side msts__side_selected"
      }, selectedFooter)) : null);
    }
  }]);

  return MultiselectTwoSides;
}(_react.Component);

exports["default"] = MultiselectTwoSides;
MultiselectTwoSides.defaultProps = defaultProps;