rsuite/cjs/Cascader/DropdownMenu.js

A suite of react components

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.dropdownMenuPropTypes = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

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

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

var _Spinner = _interopRequireDefault(require("@rsuite/icons/legacy/Spinner"));

var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));

var _isNil = _interopRequireDefault(require("lodash/isNil"));

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

var _Picker = require("../Picker");

var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"));

var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));

var _getPosition = _interopRequireDefault(require("dom-lib/getPosition"));

var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));

var emptyArray = [];

var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  var _props$as = props.as,
      Component = _props$as === void 0 ? 'div' : _props$as,
      activeItemValue = props.activeItemValue,
      classPrefix = props.classPrefix,
      className = props.className,
      _props$childrenKey = props.childrenKey,
      childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
      _props$disabledItemVa = props.disabledItemValues,
      disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
      _props$menuWidth = props.menuWidth,
      menuWidth = _props$menuWidth === void 0 ? 120 : _props$menuWidth,
      _props$menuHeight = props.menuHeight,
      menuHeight = _props$menuHeight === void 0 ? 200 : _props$menuHeight,
      _props$valueKey = props.valueKey,
      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
      _props$cascadeData = props.cascadeData,
      cascadeData = _props$cascadeData === void 0 ? emptyArray : _props$cascadeData,
      _props$cascadePaths = props.cascadePaths,
      cascadePaths = _props$cascadePaths === void 0 ? emptyArray : _props$cascadePaths,
      _props$labelKey = props.labelKey,
      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
      renderMenu = props.renderMenu,
      renderMenuItem = props.renderMenuItem,
      onSelect = props.onSelect,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "valueKey", "cascadeData", "cascadePaths", "labelKey", "renderMenu", "renderMenuItem", "onSelect"]);

  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
      merge = _useClassNames.merge,
      prefix = _useClassNames.prefix;

  var classes = merge(className, prefix('items'));
  var rootRef = (0, _react.useRef)();
  var rtl = (0, _utils.useCustom)('DropdownMenu');
  (0, _react.useEffect)(function () {
    var _rootRef$current;

    var columns = ((_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.querySelectorAll('[data-type="column"]')) || [];
    columns.forEach(function (column) {
      if (!column) {
        return;
      }

      var activeItem = column.querySelector("." + prefix('item-focus'));

      if (!activeItem) {
        activeItem = column.querySelector("." + prefix('item-active'));
      }

      if (activeItem) {
        var position = (0, _getPosition.default)(activeItem, column); // Let the active option scroll into view.

        (0, _scrollTop.default)(column, position === null || position === void 0 ? void 0 : position.top);
      }
    });
  }, [prefix]);
  var getCascadePaths = (0, _react.useCallback)(function (layer, node) {
    var paths = [];

    for (var i = 0; i < cascadeData.length && i < layer; i += 1) {
      if (i < layer - 1 && cascadePaths) {
        paths.push(cascadePaths[i]);
      }
    }

    paths.push(node);
    return paths;
  }, [cascadeData, cascadePaths]);

  var handleSelect = function handleSelect(layer, node, event) {
    var isLeafNode = (0, _isNil.default)(node[childrenKey]);
    var cascadePaths = getCascadePaths(layer + 1, node);
    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, isLeafNode, event);
  };

  var renderCascadeNode = function renderCascadeNode(node, index, layer, focus) {
    var children = node[childrenKey];
    var value = node[valueKey];
    var label = node[labelKey];
    var disabled = disabledItemValues.some(function (disabledValue) {
      return (0, _utils.shallowEqual)(disabledValue, value);
    }); // Use `value` in keys when If `value` is string or number

    var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;
    var Icon = node.loading ? _Spinner.default : rtl ? _AngleRight.default : _AngleLeft.default;
    return /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenuItem, {
      classPrefix: "picker-cascader-menu-item",
      as: 'li',
      role: "treeitem",
      key: layer + "-" + onlyKey,
      disabled: disabled,
      active: !(0, _isUndefined.default)(activeItemValue) && (0, _utils.shallowEqual)(activeItemValue, value),
      focus: focus,
      value: value,
      "aria-owns": node.children ? 'treeitem-' + value + '-children' : undefined,
      className: children ? prefix('has-children') : undefined,
      onSelect: function onSelect(_value, event) {
        return handleSelect(layer, node, event);
      }
    }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/_react.default.createElement(Icon, {
      className: prefix('caret'),
      spin: node.loading
    }) : null);
  };

  var styles = {
    width: cascadeData.length * menuWidth
  };
  var cascadeNodes = cascadeData.map(function (children, layer) {
    var onlyKey = layer + "_" + children.length;
    var parentNode = cascadePaths[layer - 1];

    var menu = /*#__PURE__*/_react.default.createElement("ul", {
      role: layer === 0 ? 'none presentation' : 'group',
      id: parentNode ? 'treeitem-' + parentNode[valueKey] + '-children' : undefined
    }, children.map(function (item, index) {
      return renderCascadeNode(item, index, layer, cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]));
    }));

    return /*#__PURE__*/_react.default.createElement("div", {
      key: onlyKey,
      className: prefix('column'),
      "data-layer": layer,
      "data-type": 'column',
      style: {
        height: menuHeight,
        width: menuWidth
      }
    }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
  });
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
    role: "tree"
  }, rest, {
    ref: (0, _utils.mergeRefs)(rootRef, ref),
    className: classes
  }), /*#__PURE__*/_react.default.createElement("div", {
    style: styles
  }, cascadeNodes));
});

var dropdownMenuPropTypes = {
  classPrefix: _propTypes.default.string,
  disabledItemValues: _propTypes.default.array,
  activeItemValue: _propTypes.default.any,
  childrenKey: _propTypes.default.string,
  valueKey: _propTypes.default.string,
  labelKey: _propTypes.default.string,
  menuWidth: _propTypes.default.number,
  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
  className: _propTypes.default.string,
  renderMenuItem: _propTypes.default.func,
  renderMenu: _propTypes.default.func,
  onSelect: _propTypes.default.func,
  cascadeData: _propTypes.default.array,
  cascadePaths: _propTypes.default.array
};
exports.dropdownMenuPropTypes = dropdownMenuPropTypes;
DropdownMenu.displayName = 'DropdownMenu';
DropdownMenu.propTypes = dropdownMenuPropTypes;
var _default = DropdownMenu;
exports.default = _default;