@pubsweet/ui/dist/molecules/Menu.js

React component library for use in pubsweet apps

"use strict";

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

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

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _uiToolkit = require("@pubsweet/ui-toolkit");

var _Button = _interopRequireDefault(require("../atoms/Button"));

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

function _typeof(obj) { "@babel/helpers - typeof"; 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 _extends() { _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; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

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 _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); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

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

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

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _templateObject13() {
  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: ", ";\n  cursor: pointer;\n  font-family: ", ";\n  padding: calc(", " - ", " * 2)\n    calc(", " * 2);\n  border: ", " ", " transparent;\n  border-width: ", " 0 ", " 0;\n  white-space: nowrap;\n\n  &:hover {\n    background: ", ";\n    border-color: ", ";\n  }\n\n  &:first-child:hover {\n    border-top-color: ", ";\n  }\n\n  &:last-child:hover {\n    border-bottom-color: ", ";\n  }\n\n  ", ";\n"]);

  _templateObject13 = function _templateObject13() {
    return data;
  };

  return data;
}

function _templateObject12() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n\n  background-color: ", ";\n  border: ", " ", " ", ";\n  border-radius: ", ";\n  overflow-y: auto;\n  max-height: ", ";\n  z-index: 100;\n\n  ", ";\n"]);

  _templateObject12 = function _templateObject12() {
    return data;
  };

  return data;
}

function _templateObject11() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n\n  ", ";\n"]);

  _templateObject11 = function _templateObject11() {
    return data;
  };

  return data;
}

function _templateObject10() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n\n  ", ";\n"]);

  _templateObject10 = function _templateObject10() {
    return data;
  };

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteral(["\n  font-size: 50%;\n  transition: transform 0.2s;\n  transform: scaleX(2) scaleY(", ");\n\n  ", ";\n"]);

  _templateObject9 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n  width: calc(", " * 2);\n  height: calc(", " * 2 - ", " * 2);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: calc(", " * 2);\n  ", ";\n"]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-style: italic;\n  padding: calc(", " * 2);\n\n  ", ";\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  text-align: left;\n  padding: 0 calc(", " / 2);\n  color: ", ";\n  background-color: ", ";\n  margin: calc(", " / 6);\n  button {\n    margin-left: calc(", " / 2);\n    min-width: 0px;\n    padding: calc(", " / 2);\n  }\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  border-right: ", " ", "\n    ", ";\n\n  flex-grow: 1;\n  white-space: nowrap;\n  flex-wrap: wrap;\n  display: flex;\n  text-align: left;\n  line-height: ", ";\n  padding: 0 ", ";\n  &:hover {\n    color: ", ";\n  }\n\n  ", ";\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  background: transparent;\n  border: ", " ", " ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  font-family: inherit;\n\n  width: 100%;\n  height: calc(", " * 6);\n  padding: 0;\n\n  display: flex;\n  align-items: center;\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  ", ";\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: ", ";\n  display: block;\n  ", ";\n  ", ";\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  background-color: transparent;\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  top: 0;\n  right: 0;\n  z-index: 10;\n\n  ", ";\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral([""]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

// TODO: match the width of the container to the width of the widest option?
// TODO: use a <select> element instead of divs?
// TODO: determine the correct color for non-selected options
// TODO: add z-indexes in theme object?
// FIXME: putting markup inside a <button> is invalid
// #region styled components
var Root = _styledComponents["default"].div(_templateObject());

var CloseOverlay = _styledComponents["default"].div(_templateObject2(), (0, _uiToolkit.override)('ui.Menu.CloseOverlay'));

var Label = _styledComponents["default"].label(_templateObject3(), (0, _uiToolkit.th)('fontSizeBaseSmall'), (0, _uiToolkit.th)('lineHeightBaseSmall'), (0, _uiToolkit.override)('ui.Label'), (0, _uiToolkit.override)('ui.Menu.Label'));

var Opener = _styledComponents["default"].button.attrs(function () {
  return {
    type: 'button'
  };
})(_templateObject4(), (0, _uiToolkit.th)('borderWidth'), (0, _uiToolkit.th)('borderStyle'), (0, _uiToolkit.th)('colorBorder'), (0, _uiToolkit.th)('borderRadius'), (0, _uiToolkit.th)('gridUnit'), (0, _uiToolkit.th)('colorPrimary'), (0, _uiToolkit.override)('ui.Menu.Opener'));

var Value = _styledComponents["default"].span(_templateObject5(), (0, _uiToolkit.th)('borderWidth'), (0, _uiToolkit.th)('borderStyle'), (0, _uiToolkit.th)('colorFurniture'), (0, _uiToolkit.th)('gridUnit'), (0, _uiToolkit.th)('gridUnit'), (0, _uiToolkit.th)('colorPrimary'), (0, _uiToolkit.override)('ui.Menu.Value'));

var MultipleValue = _styledComponents["default"].span(_templateObject6(), (0, _uiToolkit.th)('gridUnit'), (0, _uiToolkit.th)('colorPrimary'), (0, _uiToolkit.th)('colorSecondary'), (0, _uiToolkit.th)('gridUnit'), (0, _uiToolkit.th)('gridUnit'), (0, _uiToolkit.th)('gridUnit'));

var Placeholder = (0, _styledComponents["default"])(Value)(_templateObject7(), (0, _uiToolkit.th)('colorTextPlaceholder'), (0, _uiToolkit.th)('gridUnit'), (0, _uiToolkit.override)('ui.Menu.Placeholder'));

var ArrowContainer = _styledComponents["default"].span(_templateObject8(), (0, _uiToolkit.th)('gridUnit'), (0, _uiToolkit.th)('gridUnit'), (0, _uiToolkit.th)('borderWidth'), (0, _uiToolkit.th)('gridUnit'), (0, _uiToolkit.override)('ui.Menu.ArrowContainer'));

var Arrow = _styledComponents["default"].span(_templateObject9(), function (props) {
  return props.open ? -1.2 : 1.2;
}, (0, _uiToolkit.override)('ui.Menu.Arrow'));

var Main = _styledComponents["default"].div.attrs(function () {
  return {
    role: 'listbox'
  };
})(_templateObject10(), (0, _uiToolkit.override)('ui.Menu.Main'));

var OptionsContainer = _styledComponents["default"].div(_templateObject11(), (0, _uiToolkit.override)('ui.Menu.OptionsContainer'));

var Options = _styledComponents["default"].div(_templateObject12(), (0, _uiToolkit.th)('colorBackground'), (0, _uiToolkit.th)('borderWidth'), (0, _uiToolkit.th)('borderStyle'), (0, _uiToolkit.th)('colorBorder'), (0, _uiToolkit.th)('borderRadius'), function (_ref) {
  var maxHeight = _ref.maxHeight;
  return "".concat(maxHeight, "px");
}, (0, _uiToolkit.override)('ui.Menu.Options'));

var Option = _styledComponents["default"].div.attrs(function (props) {
  return {
    role: 'option',
    tabIndex: '0',
    'aria-selected': props.active
  };
})(_templateObject13(), function (props) {
  return props.active ? props.theme.textColor : '#444';
}, function (props) {
  return props.active ? '600' : 'inherit';
}, (0, _uiToolkit.th)('fontAuthor'), (0, _uiToolkit.th)('gridUnit'), (0, _uiToolkit.th)('borderWidth'), (0, _uiToolkit.th)('gridUnit'), (0, _uiToolkit.th)('borderWidth'), (0, _uiToolkit.th)('borderStyle'), (0, _uiToolkit.th)('borderWidth'), (0, _uiToolkit.th)('borderWidth'), (0, _uiToolkit.th)('colorBackgroundHue'), (0, _uiToolkit.th)('colorBorder'), (0, _uiToolkit.th)('colorBackgroundHue'), (0, _uiToolkit.th)('colorBackgroundHue'), (0, _uiToolkit.override)('ui.Menu.Option')); // #endregion


var Menu = /*#__PURE__*/function (_React$Component) {
  _inherits(Menu, _React$Component);

  var _super = _createSuper(Menu);

  function Menu(props) {
    var _this;

    _classCallCheck(this, Menu);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "toggleMenu", function () {
      _this.setState({
        open: !_this.state.open
      });
    });

    _defineProperty(_assertThisInitialized(_this), "resetMenu", function (props) {
      _this.state = {
        open: false,
        selected: undefined
      };
    });

    _defineProperty(_assertThisInitialized(_this), "selectOneOfMultiElement", function (event, value) {
      event.stopPropagation();
      var selectOneOfMultiElement = value;

      _this.setState({
        selectOneOfMultiElement: selectOneOfMultiElement
      });

      if (_this.props.selectElement) _this.props.selectElement(value);
    });

    _defineProperty(_assertThisInitialized(_this), "removeSelect", function (event, value) {
      event.stopPropagation();
      var selected = _this.state.selected;
      var index = selected.indexOf(value);
      selected = [].concat(_toConsumableArray(selected.slice(0, index)), _toConsumableArray(selected.slice(index + 1)));

      _this.setState({
        selected: selected
      });

      if (_this.props.onChange) _this.props.onChange(selected);
    });

    _defineProperty(_assertThisInitialized(_this), "handleSelect", function (_ref2) {
      var selected = _ref2.selected,
          open = _ref2.open;
      var multi = _this.props.multi;
      var values;

      if (multi) {
        values = _this.state.selected ? _this.state.selected : [];
        if (values.indexOf(selected) === -1) values.push(selected);
      } else {
        values = selected;
      }

      _this.setState({
        open: open,
        selected: values
      });

      if (_this.props.onChange) _this.props.onChange(values);
    });

    _defineProperty(_assertThisInitialized(_this), "handleKeyPress", function (event, selected, open) {
      if (event.which === 13) {
        _this.handleSelect(selected, open);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "optionLabel", function (value) {
      var options = _this.props.options;
      return options.find(function (option) {
        return option.value === value;
      }) ? options.find(function (option) {
        return option.value === value;
      }).label : '';
    });

    _this.state = {
      open: false,
      selected: props.value,
      selectOneOfMultiElement: undefined
    };
    return _this;
  }

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

      var _this$props = this.props,
          _this$props$maxHeight = _this$props.maxHeight,
          maxHeight = _this$props$maxHeight === void 0 ? 250 : _this$props$maxHeight,
          label = _this$props.label,
          options = _this$props.options,
          inline = _this$props.inline,
          placeholder = _this$props.placeholder,
          RenderOption = _this$props.renderOption,
          RenderOpener = _this$props.renderOpener,
          className = _this$props.className,
          multi = _this$props.multi,
          reset = _this$props.reset,
          rest = _objectWithoutProperties(_this$props, ["maxHeight", "label", "options", "inline", "placeholder", "renderOption", "renderOpener", "className", "multi", "reset"]);

      var _this$state = this.state,
          open = _this$state.open,
          selected = _this$state.selected;
      if (reset === true) this.resetMenu(this.props);
      return /*#__PURE__*/_react["default"].createElement(Root, {
        className: className,
        inline: inline,
        open: open
      }, label && /*#__PURE__*/_react["default"].createElement(Label, null, label), open && /*#__PURE__*/_react["default"].createElement(CloseOverlay, {
        onClick: this.toggleMenu
      }), /*#__PURE__*/_react["default"].createElement(Main, null, /*#__PURE__*/_react["default"].createElement(RenderOpener, _extends({
        open: open,
        optionLabel: this.optionLabel,
        placeholder: placeholder,
        removeSelect: this.removeSelect,
        selected: selected,
        selectOneOfMultiElement: this.selectOneOfMultiElement,
        toggleMenu: this.toggleMenu
      }, rest)), /*#__PURE__*/_react["default"].createElement(OptionsContainer, null, open && /*#__PURE__*/_react["default"].createElement(Options, {
        maxHeight: maxHeight,
        open: open
      }, options.map(function (option) {
        return /*#__PURE__*/_react["default"].createElement(RenderOption, {
          handleKeyPress: _this2.handleKeyPress,
          handleSelect: _this2.handleSelect,
          key: option.value,
          label: option.label,
          multi: multi,
          selected: selected,
          value: option.value
        });
      })))));
    }
  }]);

  return Menu;
}(_react["default"].Component);

var DefaultMenuOption = function DefaultMenuOption(_ref3) {
  var selected = _ref3.selected,
      label = _ref3.label,
      value = _ref3.value,
      handleSelect = _ref3.handleSelect,
      handleKeyPress = _ref3.handleKeyPress,
      multi = _ref3.multi;

  var option = /*#__PURE__*/_react["default"].createElement(Option, {
    active: value === selected,
    key: value,
    onClick: function onClick() {
      return handleSelect({
        open: false,
        selected: value
      });
    },
    onKeyPress: function onKeyPress(event) {
      return handleKeyPress(event, value);
    }
  }, label || value);

  if (!multi) return option;
  return multi && !selected.includes(value) ? option : null;
};

var DefaultOpener = function DefaultOpener(_ref4) {
  var toggleMenu = _ref4.toggleMenu,
      open = _ref4.open,
      selected = _ref4.selected,
      placeholder = _ref4.placeholder,
      optionLabel = _ref4.optionLabel,
      removeSelect = _ref4.removeSelect,
      validationStatus = _ref4.validationStatus,
      selectOneOfMultiElement = _ref4.selectOneOfMultiElement;
  return /*#__PURE__*/_react["default"].createElement(Opener, {
    onClick: toggleMenu,
    open: open,
    validationStatus: validationStatus
  }, (!selected || selected.length === 0) && /*#__PURE__*/_react["default"].createElement(Placeholder, null, placeholder), selected && !Array.isArray(selected) && /*#__PURE__*/_react["default"].createElement(Value, null, optionLabel(selected)), selected && selected.length > 0 && Array.isArray(selected) && /*#__PURE__*/_react["default"].createElement(Value, null, selected.map(function (select) {
    return /*#__PURE__*/_react["default"].createElement(MultipleValue, {
      key: select,
      onClick: function onClick(event) {
        return selectOneOfMultiElement(event, select);
      }
    }, optionLabel(select), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
      onClick: function onClick(event) {
        return removeSelect(event, select);
      }
    }, "x"));
  })), /*#__PURE__*/_react["default"].createElement(ArrowContainer, null, /*#__PURE__*/_react["default"].createElement(Arrow, {
    open: open
  }, "\u25BC")));
};

Menu.propTypes = {
  /** Menu items. */
  options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    label: _propTypes["default"].string.isRequired,
    value: _propTypes["default"].any.isRequired
  })).isRequired,

  /** Custom component for the selected option. */
  renderOpener: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].element]),

  /** Custom option component. The component will be rendered with *optionProps*. */
  renderOption: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].element]),
  reset: _propTypes["default"].bool,

  /** Optional label to be shown above the menu. */
  label: _propTypes["default"].string,

  /** Placeholder until a value is selected. */
  placeholder: _propTypes["default"].string,

  /** Maximum height of the options container. */
  maxHeight: _propTypes["default"].number
};
Menu.defaultProps = {
  renderOption: DefaultMenuOption,
  renderOpener: DefaultOpener,
  reset: false,
  placeholder: 'Choose in the list'
};
var _default = Menu;
exports["default"] = _default;