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

wix-style-react

'use strict';

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

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 _class, _temp, _initialiseProps;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ChevronDown = require('wix-ui-icons-common/ChevronDown');

var _ChevronDown2 = _interopRequireDefault(_ChevronDown);

var _BadgeSelectSt = require('./BadgeSelect.st.css');

var _BadgeSelectSt2 = _interopRequireDefault(_BadgeSelectSt);

var _DropdownLayout = require('../DropdownLayout');

var _DropdownLayout2 = _interopRequireDefault(_DropdownLayout);

var _Popover = require('../Popover');

var _Popover2 = _interopRequireDefault(_Popover);

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

var _Badge2 = _interopRequireDefault(_Badge);

var _BadgeSelectItemBuilder = require('../BadgeSelectItemBuilder');

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 BadgeSelect = (_temp = _class = function (_React$Component) {
  _inherits(BadgeSelect, _React$Component);

  /**
   * Determine if a certain key should open the DropdownLayout
   *
   * @param {KeyboardEvent.key} key - The key name
   * @return {boolean} - Whether the key should cause the DropdownLayout to open
   */
  function BadgeSelect(props) {
    _classCallCheck(this, BadgeSelect);

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

    _initialiseProps.call(_this);

    _this.state = {
      visible: false,
      selectedBadge: _this.getSelectedOption(props)
    };
    return _this;
  }

  _createClass(BadgeSelect, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.selectedId !== nextProps.selectedId) {
        this.setState({
          selectedBadge: this.getSelectedOption(nextProps)
        });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          type = _props.type,
          size = _props.size,
          uppercase = _props.uppercase,
          dataHook = _props.dataHook;
      var _state = this.state,
          visible = _state.visible,
          selectedBadge = _state.selectedBadge;


      return _react2.default.createElement(
        _Popover2.default,
        _extends({
          shown: visible,
          dataHook: dataHook,
          placement: 'bottom',
          onKeyDown: this._onKeyDown,
          onClickOutside: this.hideDropdown
        }, (0, _BadgeSelectSt2.default)('root', {}, this.props)),
        _react2.default.createElement(
          _Popover2.default.Element,
          null,
          _react2.default.createElement(
            _Badge2.default,
            {
              ref: function ref(badge) {
                return _this2.badge = badge;
              },
              type: type,
              size: size,
              uppercase: uppercase,
              suffixIcon: _react2.default.createElement(_ChevronDown2.default, { viewBox: '6 6 12 12' }),
              skin: this.state.selectedBadge.skin,
              onClick: this.toggleDropdown
            },
            this.state.selectedBadge.text
          )
        ),
        _react2.default.createElement(
          _Popover2.default.Content,
          null,
          _react2.default.createElement(_DropdownLayout2.default, {
            ref: function ref(r) {
              return _this2.dropdownLayout = r;
            },
            dataHook: 'badgeSelect-dropdownLayout',
            visible: true,
            selectedId: selectedBadge.id,
            options: this.options,
            onSelect: this._handleSelect,
            onClose: this.hideDropdown,
            inContainer: true
          })
        )
      );
    }
  }, {
    key: 'options',
    get: function get() {
      var options = this.props.options;

      return Array.isArray(options) ? options.map(_BadgeSelectItemBuilder.badgeSelectItemBuilder) : [];
    }
  }]);

  return BadgeSelect;
}(_react2.default.Component), _class.propTypes = {
  /** An array of options. Each option must have a unique `id`, a `text` and a `skin` whose value should match one of `<Badge/>`'s skin values */
  options: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    id: _propTypes2.default.string.isRequired,
    skin: _propTypes2.default.oneOf(Object.keys(_Badge.SKIN)).isRequired,
    text: _propTypes2.default.string.isRequired
  })),
  /** The id of the selected option in the list */
  selectedId: _propTypes2.default.string,
  /** Callback function called whenever the user selects a different option in the list */
  onSelect: _propTypes2.default.func,
  /** The size of the `<Badge/>` */
  size: _propTypes2.default.oneOf(Object.keys(_Badge.SIZE)),
  /** The type of the `<Badge/>` */
  type: _propTypes2.default.oneOf(Object.keys(_Badge.TYPE)),
  /** Whether the text of the `<Badge/>` should be uppercase */
  uppercase: _propTypes2.default.bool,
  dataHook: _propTypes2.default.string
}, _class.displayName = 'BadgeSelect', _initialiseProps = function _initialiseProps() {
  var _this3 = this;

  this._isControlled = function () {
    return typeof _this3.props.selectedId !== 'undefined';
  };

  this._isOpenKey = function (key) {
    return ['Enter', 'Spacebar', ' ', 'ArrowDown'].includes(key);
  };

  this._getBadgeOptionById = function (options, wantedId) {
    return options.find(function (_ref) {
      var id = _ref.id;
      return id === wantedId;
    });
  };

  this._handleSelect = function (_ref2) {
    var selectedId = _ref2.id;
    var _props2 = _this3.props,
        onSelect = _props2.onSelect,
        options = _props2.options;

    var selectedBadge = _this3._getBadgeOptionById(options, selectedId);
    var newState = { visible: false };
    if (!_this3._isControlled()) {
      newState.selectedBadge = selectedBadge;
    }
    _this3.setState(newState);

    onSelect && onSelect(selectedBadge);
  };

  this._onKeyDown = function (event) {
    // Delegate the event to the DropdownLayout. It'll handle the navigation,
    // option selection and closing of the dropdown.
    var isHandledByDropdownLayout = _this3.dropdownLayout ? _this3.dropdownLayout._onKeyDown(event) : false;

    // If the event wasn't handled by the DropdownLayout correctly, check if
    // the pressed key should open the dropdown and act accordingly.
    if (!isHandledByDropdownLayout) {
      if (_this3._isOpenKey(event.key)) {
        _this3.showDropdown();
        event.preventDefault();
      }
    }
  };

  this.getSelectedOption = function (props) {
    return _this3._getBadgeOptionById(props.options, props.selectedId) || props.options[0];
  };

  this.hideDropdown = function () {
    _this3.setState({ visible: false });
  };

  this.showDropdown = function () {
    _this3.setState({ visible: true });
  };

  this.toggleDropdown = function () {
    _this3.setState({ visible: !_this3.state.visible });
  };
}, _temp);
exports.default = BadgeSelect;