@alifd/meet-react/lib/menu/menu.js

Fusion Mobile React UI System Component

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _view = _interopRequireDefault(require("../view"));
var _item = _interopRequireDefault(require("./item"));
var _menuContext = _interopRequireDefault(require("./menu-context"));
var _subMenu = _interopRequireDefault(require("./sub-menu"));
var _utils = require("../utils");
var _hooks = require("../utils/hooks");
var _constant = require("./constant");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var handleChildren = function (children, prefixKey, depth) {
  if (prefixKey === void 0) {
    prefixKey = '';
  }
  if (depth === void 0) {
    depth = 1;
  }
  return _react.Children.map(children, function (child, index) {
    var keyPath = prefixKey + index.toString();
    var key = child.key || keyPath;
    child.props = Object.assign({}, child.props, {
      keyPath: keyPath,
      depth: depth,
      key: key,
      itemKey: key
    });
    if (child.props.children && child.props.children instanceof Array) {
      handleChildren(child.props.children, keyPath + "-", depth + 1);
    }
    return child;
  });
};
var handleDataSource = function (items, prefixKey, depth) {
  if (prefixKey === void 0) {
    prefixKey = '';
  }
  if (depth === void 0) {
    depth = 1;
  }
  return items.map(function (child, index) {
    var keyPath = prefixKey + index.toString();
    var key = (0, _utils.getNotUndef)(child.key, child.value, keyPath);
    if ((0, _utils.isValidArray)(child.children)) {
      var subChild = handleDataSource(child.children, keyPath + "-", depth + 1);
      return /*#__PURE__*/(0, _react.createElement)(_subMenu.default, Object.assign(Object.assign({}, child), {
        key: key,
        keyPath: keyPath,
        depth: depth
      }), subChild);
    } else {
      return /*#__PURE__*/(0, _react.createElement)(_item.default, Object.assign(Object.assign({}, child), {
        key: key,
        itemKey: key,
        keyPath: keyPath
      }), child.label);
    }
  });
};
var Menu = function (props, ref) {
  var _props$prefix = props.prefix,
    prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
    className = props.className,
    _props$size = props.size,
    size = _props$size === void 0 ? 'medium' : _props$size,
    selectMode = props.selectMode,
    _props$onItemClick = props.onItemClick,
    onItemClick = _props$onItemClick === void 0 ? function () {} : _props$onItemClick,
    _props$onOpen = props.onOpen,
    onOpen = _props$onOpen === void 0 ? function () {} : _props$onOpen,
    _props$inlineIndent = props.inlineIndent,
    inlineIndent = _props$inlineIndent === void 0 ? _constant.DEFAULT_INLINE_INDENT : _props$inlineIndent,
    _props$onSelect = props.onSelect,
    onSelect = _props$onSelect === void 0 ? function () {} : _props$onSelect,
    dataSource = props.dataSource,
    children = props.children;
  var _useValue = (0, _hooks.useValue)(props, [], {
      valueName: 'openKeys',
      compare: function compare(a, b) {
        return a.join(',') === b.join(',');
      }
    }),
    openKeys = _useValue[0],
    setOpenKeys = _useValue[1],
    isOpenControlled = _useValue[2];
  var _useValue2 = (0, _hooks.useValue)(props, [], {
      valueName: 'selectedKeys',
      compare: function compare(a, b) {
        return a.join(',') === b.join(',');
      }
    }),
    selectedKeys = _useValue2[0],
    setSelectedKeys = _useValue2[1],
    isSelectedControlled = _useValue2[2];
  var handleOpen = (0, _react.useCallback)(function (_ref) {
    var key = _ref.key,
      open = _ref.open;
    var newOpenKeys = [];
    if (open) {
      newOpenKeys = openKeys.concat(key);
    } else {
      newOpenKeys = openKeys.filter(function (item) {
        return item !== key;
      });
    }
    if (isOpenControlled) {
      onOpen(newOpenKeys, {
        key: key,
        open: open
      });
    } else {
      setOpenKeys(newOpenKeys);
    }
  }, [openKeys, isOpenControlled, onOpen]);
  var handleClickItem = (0, _react.useCallback)(function (key, item, event) {
    return onItemClick(key, item, event);
  }, [onItemClick]);
  var handleSelect = (0, _react.useCallback)(function (selected, item) {
    var newSelectedKeys = [];
    var key = item.itemKey;
    var keyPath = item.keyPath;
    if (selected) {
      if (selectMode === 'single') {
        newSelectedKeys = [key];
      } else if (selectMode === 'multiple') {
        newSelectedKeys = selectedKeys.concat(key);
      }
    } else {
      newSelectedKeys = selectedKeys.filter(function (i) {
        return i !== key;
      });
    }
    if (isSelectedControlled) {
      onSelect(newSelectedKeys, item, {
        select: selected,
        key: key,
        label: item.children,
        keyPath: keyPath
      });
    } else {
      setSelectedKeys(newSelectedKeys);
    }
  }, [selectMode, selectedKeys, isSelectedControlled, onSelect]);
  var context = (0, _react.useMemo)(function () {
    return {
      prefix: prefix,
      size: size,
      selectMode: selectMode,
      inlineIndent: inlineIndent,
      openKeys: openKeys,
      selectedKeys: selectedKeys,
      onOpen: handleOpen,
      onClickItem: handleClickItem,
      onSelect: handleSelect
    };
  }, [prefix, size, selectMode, inlineIndent, openKeys, selectedKeys, handleOpen, handleClickItem, handleSelect]);
  var newChildren = (0, _react.useMemo)(function () {
    return (0, _utils.isValidArray)(dataSource) ? handleDataSource(dataSource) : handleChildren(children);
  }, [props.dataSource, children]);
  return /*#__PURE__*/(0, _react.createElement)(_menuContext.default.Provider, {
    value: context
  }, /*#__PURE__*/(0, _react.createElement)(_view.default, {
    ref: ref,
    className: (0, _classnames.default)(prefix + "menu", className, prefix + "menu-size-" + size)
  }, newChildren, /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: prefix + "menu-obstructive"
  })));
};
Menu.displayName = 'Menu';
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(Menu);