wix-style-react/dist/src/MultiSelectCheckbox/MultiSelectCheckbox.js

wix-style-react

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _InputWithOptions2 = require('../InputWithOptions/InputWithOptions');

var _InputWithOptions3 = _interopRequireDefault(_InputWithOptions2);

var _Input = require('../Input');

var _Input2 = _interopRequireDefault(_Input);

var _Checkbox = require('../Checkbox/Checkbox');

var _Checkbox2 = _interopRequireDefault(_Checkbox);

var _MultiSelectCheckbox = require('./MultiSelectCheckbox.scss');

var _MultiSelectCheckbox2 = _interopRequireDefault(_MultiSelectCheckbox);

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

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 OPEN_DROPDOWN_CHARS = [13 /*Enter*/, 40 /*ArrowDown*/, 32 /*Spacebar*/];

var MultiSelectCheckbox = function (_InputWithOptions) {
  _inherits(MultiSelectCheckbox, _InputWithOptions);

  function MultiSelectCheckbox() {
    _classCallCheck(this, MultiSelectCheckbox);

    return _possibleConstructorReturn(this, (MultiSelectCheckbox.__proto__ || Object.getPrototypeOf(MultiSelectCheckbox)).apply(this, arguments));
  }

  _createClass(MultiSelectCheckbox, [{
    key: 'wrapOptionsWithCheckbox',
    value: function wrapOptionsWithCheckbox(options) {
      var _this2 = this;

      var newOptions = options.map(function (option) {
        return _extends({}, option, {
          value: _this2.wrapWithCheckBox(option, _this2.isSelectedId(option.id))
        });
      });
      return newOptions;
    }
  }, {
    key: 'wrapWithCheckBox',
    value: function wrapWithCheckBox(option, isSelected) {
      return _react2.default.createElement(
        _Checkbox2.default,
        { checked: isSelected, disabled: option.disabled },
        option.value
      );
    }
  }, {
    key: 'isSelectedId',
    value: function isSelectedId(optionId) {
      return this.props.selectedOptions.indexOf(optionId) !== -1;
    }
  }, {
    key: 'dropdownAdditionalProps',
    value: function dropdownAdditionalProps() {
      return {
        options: this.wrapOptionsWithCheckbox(this.props.options),
        closeOnSelect: false,
        selectedHighlight: false
      };
    }
  }, {
    key: 'selectedOptionsToText',
    value: function selectedOptionsToText() {
      var _this3 = this;

      var selectedOptionsText = this.props.selectedOptions.map(function (selectedOption) {
        return _this3.props.options.find(function (option) {
          return option.id === selectedOption;
        });
      }).filter(function (selectedOption) {
        return selectedOption;
      }).map(this.props.valueParser).join(this.props.delimiter);
      return selectedOptionsText;
    }
  }, {
    key: 'inputAdditionalProps',
    value: function inputAdditionalProps() {
      return {
        inputElement: _react2.default.createElement(_Input2.default, { textOverflow: 'ellipsis', readOnly: true }),
        value: this.selectedOptionsToText()
      };
    }
  }, {
    key: 'inputClasses',
    value: function inputClasses() {
      return _MultiSelectCheckbox2.default.readonly;
    }
  }, {
    key: '_onSelect',
    value: function _onSelect(option) {
      this.showOptions();

      if (this.closeOnSelect()) {
        this.setState({ showOptions: false });
      }

      // The option object is not the original since it was injected a checkbox
      var originalOption = this.props.options.find(function (op) {
        return option.id === op.id;
      });
      if (this.isSelectedId(originalOption.id)) {
        this.props.onDeselect && this.props.onDeselect(originalOption.id, originalOption);
      } else {
        this.props.onSelect && this.props.onSelect(originalOption.id, originalOption);
      }
    }
  }, {
    key: '_onInputClicked',
    value: function _onInputClicked(event) {
      this.state.showOptions ? this.hideOptions() : this.showOptions();
      if (this.props.onInputClicked) {
        this.props.onInputClicked(event);
      }
    }
  }, {
    key: '_onKeyDown',
    value: function _onKeyDown(event) {
      if (!this.dropdownLayout._onKeyDown(event) && OPEN_DROPDOWN_CHARS.indexOf(event.keyCode) !== -1) {
        event.preventDefault();
        this.showOptions();
      }
    }
  }, {
    key: '_onFocus',
    value: function _onFocus(e) {
      if (this.props.disabled) {
        return;
      }
      this._focused = true;
      this.setState({ isEditing: false });
      if (this.props.onFocus) {
        this.props.onFocus(e);
      }
    }
  }]);

  return MultiSelectCheckbox;
}(_InputWithOptions3.default);

MultiSelectCheckbox.propTypes = _extends({}, _InputWithOptions3.default.propTypes, {

  /** Array of objects. Objects must have an Id and can can include *value* and *node*. If value is '-', a divider will be rendered instead. */
  options: _propTypes2.default.array,

  /** The selected options ids. */
  selectedOptions: _propTypes2.default.array,

  /** A callback function called whenever the user selects a single option. The function receives the id of the selected option as the first argument, and the actual option object as the second argument.. */
  onSelect: _propTypes2.default.func,

  /** A callback function to be called when an option was unchecked. The function receives the id of the unselected option as the first argument, and the actual option object as the second argument. */
  onDeselect: _propTypes2.default.func,

  /** delimiter between the selected options that will be displayed in the input. */
  delimiter: _propTypes2.default.string
});

MultiSelectCheckbox.defaultProps = _extends({}, _InputWithOptions3.default.defaultProps, {
  delimiter: ', ',
  selectedOptions: [],
  closeOnSelect: false
});

exports.default = MultiSelectCheckbox;