acud
Version:
acg react 组件库
431 lines (430 loc) • 19 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _shallowequal = _interopRequireDefault(require("shallowequal"));
var _useMergedState7 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
var _rcOverflow = _interopRequireDefault(require("rc-overflow"));
var _reactDom = require("react-dom");
var _MenuItem = _interopRequireDefault(require("./MenuItem"));
var _nodeUtil = require("./utils/nodeUtil");
var _MenuContext = _interopRequireDefault(require("./context/MenuContext"));
var _useMemoCallback = _interopRequireDefault(require("./hooks/useMemoCallback"));
var _warnUtil = require("./utils/warnUtil");
var _SubMenu = _interopRequireDefault(require("./SubMenu"));
var _useAccessibility = _interopRequireDefault(require("./hooks/useAccessibility"));
var _useUUID = _interopRequireDefault(require("./hooks/useUUID"));
var _PathContext = require("./context/PathContext");
var _useKeyRecords2 = _interopRequireWildcard(require("./hooks/useKeyRecords"));
var _IdContext = require("./context/IdContext");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var __rest = void 0 && (void 0).__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
/**
* Menu modify after refactor:
* ## Add
* - disabled
*
* ## Remove
* - openTransitionName
* - openAnimation
* - onDestroy
* - siderCollapsed: Seems antd do not use this prop (Need test in antd)
* - collapsedWidth: Seems this logic should be handle by antd Layout.Sider
*/
// optimize for render
var EMPTY_LIST = [];
var Menu = function Menu(props) {
var _a;
var _b = props,
_b$prefixCls = _b.prefixCls,
prefixCls = _b$prefixCls === void 0 ? 'rc-menu' : _b$prefixCls,
style = _b.style,
className = _b.className,
_b$tabIndex = _b.tabIndex,
tabIndex = _b$tabIndex === void 0 ? 0 : _b$tabIndex,
children = _b.children,
direction = _b.direction,
id = _b.id,
_b$mode = _b.mode,
mode = _b$mode === void 0 ? 'vertical' : _b$mode,
inlineCollapsed = _b.inlineCollapsed,
disabled = _b.disabled,
disabledOverflow = _b.disabledOverflow,
_b$subMenuOpenDelay = _b.subMenuOpenDelay,
subMenuOpenDelay = _b$subMenuOpenDelay === void 0 ? 0.1 : _b$subMenuOpenDelay,
_b$subMenuCloseDelay = _b.subMenuCloseDelay,
subMenuCloseDelay = _b$subMenuCloseDelay === void 0 ? 0.1 : _b$subMenuCloseDelay,
forceSubMenuRender = _b.forceSubMenuRender,
defaultOpenKeys = _b.defaultOpenKeys,
openKeys = _b.openKeys,
activeKey = _b.activeKey,
defaultActiveFirst = _b.defaultActiveFirst,
_b$selectable = _b.selectable,
selectable = _b$selectable === void 0 ? true : _b$selectable,
_b$multiple = _b.multiple,
multiple = _b$multiple === void 0 ? false : _b$multiple,
defaultSelectedKeys = _b.defaultSelectedKeys,
selectedKeys = _b.selectedKeys,
onSelect = _b.onSelect,
onDeselect = _b.onDeselect,
_b$inlineIndent = _b.inlineIndent,
inlineIndent = _b$inlineIndent === void 0 ? 14 : _b$inlineIndent,
motion = _b.motion,
defaultMotions = _b.defaultMotions,
_b$triggerSubMenuActi = _b.triggerSubMenuAction,
triggerSubMenuAction = _b$triggerSubMenuActi === void 0 ? 'hover' : _b$triggerSubMenuActi,
builtinPlacements = _b.builtinPlacements,
itemIcon = _b.itemIcon,
expandIcon = _b.expandIcon,
_b$overflowedIndicato = _b.overflowedIndicator,
overflowedIndicator = _b$overflowedIndicato === void 0 ? '...' : _b$overflowedIndicato,
overflowedIndicatorPopupClassName = _b.overflowedIndicatorPopupClassName,
getPopupContainer = _b.getPopupContainer,
onClick = _b.onClick,
onOpenChange = _b.onOpenChange,
onKeyDown = _b.onKeyDown,
openAnimation = _b.openAnimation,
openTransitionName = _b.openTransitionName,
restProps = __rest(_b, ["prefixCls", "style", "className", "tabIndex", "children", "direction", "id", "mode", "inlineCollapsed", "disabled", "disabledOverflow", "subMenuOpenDelay", "subMenuCloseDelay", "forceSubMenuRender", "defaultOpenKeys", "openKeys", "activeKey", "defaultActiveFirst", "selectable", "multiple", "defaultSelectedKeys", "selectedKeys", "onSelect", "onDeselect", "inlineIndent", "motion", "defaultMotions", "triggerSubMenuAction", "builtinPlacements", "itemIcon", "expandIcon", "overflowedIndicator", "overflowedIndicatorPopupClassName", "getPopupContainer", "onClick", "onOpenChange", "onKeyDown", "openAnimation", "openTransitionName"]);
var childList = (0, _nodeUtil.parseChildren)(children, EMPTY_LIST);
var _React$useState = React.useState(false),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
mounted = _React$useState2[0],
setMounted = _React$useState2[1];
var containerRef = React.useRef();
var uuid = (0, _useUUID["default"])(id);
var isRtl = direction === 'rtl';
// ========================= Warn =========================
if (process.env.NODE_ENV !== 'production') {
(0, _warning["default"])(!openAnimation && !openTransitionName, '`openAnimation` and `openTransitionName` is removed. Please use `motion` or `defaultMotion` instead.');
}
// ========================= Open =========================
var _useMergedState = (0, _useMergedState7["default"])(defaultOpenKeys, {
value: openKeys,
postState: function postState(keys) {
return keys || EMPTY_LIST;
}
}),
_useMergedState2 = (0, _slicedToArray2["default"])(_useMergedState, 2),
mergedOpenKeys = _useMergedState2[0],
setMergedOpenKeys = _useMergedState2[1];
// React 18 will merge mouse event which means we open key will not sync
// ref: https://github.com/ant-design/ant-design/issues/38818
var triggerOpenKeys = function triggerOpenKeys(keys) {
var forceFlush = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
function doUpdate() {
setMergedOpenKeys(keys);
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(keys);
}
if (forceFlush) {
(0, _reactDom.flushSync)(doUpdate);
} else {
doUpdate();
}
};
// >>>>> Cache & Reset open keys when inlineCollapsed changed
var _React$useState3 = React.useState(mergedOpenKeys),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
inlineCacheOpenKeys = _React$useState4[0],
setInlineCacheOpenKeys = _React$useState4[1];
var mountRef = React.useRef(false);
// ========================= Mode =========================
var _React$useMemo = React.useMemo(function () {
if ((mode === 'inline' || mode === 'vertical') && inlineCollapsed) {
return ['vertical', inlineCollapsed];
}
return [mode, false];
}, [mode, inlineCollapsed]),
_React$useMemo2 = (0, _slicedToArray2["default"])(_React$useMemo, 2),
mergedMode = _React$useMemo2[0],
mergedInlineCollapsed = _React$useMemo2[1];
var isInlineMode = mergedMode === 'inline';
var _React$useState5 = React.useState(mergedMode),
_React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
internalMode = _React$useState6[0],
setInternalMode = _React$useState6[1];
var _React$useState7 = React.useState(mergedInlineCollapsed),
_React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
internalInlineCollapsed = _React$useState8[0],
setInternalInlineCollapsed = _React$useState8[1];
React.useEffect(function () {
setInternalMode(mergedMode);
setInternalInlineCollapsed(mergedInlineCollapsed);
if (!mountRef.current) {
return;
}
// Synchronously update MergedOpenKeys
if (isInlineMode) {
setMergedOpenKeys(inlineCacheOpenKeys);
} else {
// Trigger open event in case its in control
triggerOpenKeys(EMPTY_LIST);
}
}, [mergedMode, mergedInlineCollapsed]);
// ====================== Responsive ======================
var _React$useState9 = React.useState(0),
_React$useState0 = (0, _slicedToArray2["default"])(_React$useState9, 2),
lastVisibleIndex = _React$useState0[0],
setLastVisibleIndex = _React$useState0[1];
var allVisible = lastVisibleIndex >= childList.length - 1 || internalMode !== 'horizontal' || disabledOverflow;
// Cache
React.useEffect(function () {
if (isInlineMode) {
setInlineCacheOpenKeys(mergedOpenKeys);
}
}, [mergedOpenKeys]);
React.useEffect(function () {
mountRef.current = true;
return function () {
mountRef.current = false;
};
}, []);
// ========================= Path =========================
var _useKeyRecords = (0, _useKeyRecords2["default"])(),
registerPath = _useKeyRecords.registerPath,
unregisterPath = _useKeyRecords.unregisterPath,
refreshOverflowKeys = _useKeyRecords.refreshOverflowKeys,
isSubPathKey = _useKeyRecords.isSubPathKey,
getKeyPath = _useKeyRecords.getKeyPath,
getKeys = _useKeyRecords.getKeys,
getSubPathKeys = _useKeyRecords.getSubPathKeys;
var registerPathContext = React.useMemo(function () {
return {
registerPath: registerPath,
unregisterPath: unregisterPath
};
}, [registerPath, unregisterPath]);
var pathUserContext = React.useMemo(function () {
return {
isSubPathKey: isSubPathKey
};
}, [isSubPathKey]);
React.useEffect(function () {
refreshOverflowKeys(allVisible ? EMPTY_LIST : childList.slice(lastVisibleIndex + 1).map(function (child) {
return child.key;
}));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [lastVisibleIndex, allVisible]);
// ======================== Active ========================
var _useMergedState3 = (0, _useMergedState7["default"])(activeKey || defaultActiveFirst && ((_a = childList[0]) === null || _a === void 0 ? void 0 : _a.key), {
value: activeKey
}),
_useMergedState4 = (0, _slicedToArray2["default"])(_useMergedState3, 2),
mergedActiveKey = _useMergedState4[0],
setMergedActiveKey = _useMergedState4[1];
var onActive = (0, _useMemoCallback["default"])(function (key) {
setMergedActiveKey(key);
});
var onInactive = (0, _useMemoCallback["default"])(function () {
setMergedActiveKey(undefined);
});
// ======================== Select ========================
// >>>>> Select keys
var _useMergedState5 = (0, _useMergedState7["default"])(defaultSelectedKeys || [], {
value: selectedKeys,
// Legacy convert key to array
postState: function postState(keys) {
if (Array.isArray(keys)) {
return keys;
}
if (keys === null || keys === undefined) {
return EMPTY_LIST;
}
return [keys];
}
}),
_useMergedState6 = (0, _slicedToArray2["default"])(_useMergedState5, 2),
mergedSelectKeys = _useMergedState6[0],
setMergedSelectKeys = _useMergedState6[1];
// >>>>> Trigger select
var triggerSelection = function triggerSelection(info) {
if (selectable) {
// Insert or Remove
var targetKey = info.key;
var exist = mergedSelectKeys.includes(targetKey);
var newSelectKeys;
if (multiple) {
if (exist) {
newSelectKeys = mergedSelectKeys.filter(function (key) {
return key !== targetKey;
});
} else {
newSelectKeys = [].concat((0, _toConsumableArray2["default"])(mergedSelectKeys), [targetKey]);
}
} else {
newSelectKeys = [targetKey];
}
setMergedSelectKeys(newSelectKeys);
// Trigger event
var selectInfo = (0, _extends2["default"])((0, _extends2["default"])({}, info), {
selectedKeys: newSelectKeys
});
if (exist) {
onDeselect === null || onDeselect === void 0 ? void 0 : onDeselect(selectInfo);
} else {
onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectInfo);
}
}
// Whatever selectable, always close it
if (!multiple && mergedOpenKeys.length && internalMode !== 'inline') {
triggerOpenKeys(EMPTY_LIST);
}
};
// ========================= Open =========================
/**
* Click for item. SubMenu do not have selection status
*/
var onInternalClick = (0, _useMemoCallback["default"])(function (info) {
onClick === null || onClick === void 0 ? void 0 : onClick((0, _warnUtil.warnItemProp)(info));
triggerSelection(info);
});
var onInternalOpenChange = (0, _useMemoCallback["default"])(function (key, open) {
var newOpenKeys = mergedOpenKeys.filter(function (k) {
return k !== key;
});
if (open) {
newOpenKeys.push(key);
} else if (internalMode !== 'inline') {
// We need find all related popup to close
var subPathKeys = getSubPathKeys(key);
newOpenKeys = newOpenKeys.filter(function (k) {
return !subPathKeys.has(k);
});
}
if (!(0, _shallowequal["default"])(mergedOpenKeys, newOpenKeys)) {
triggerOpenKeys(newOpenKeys, true);
}
});
var getInternalPopupContainer = (0, _useMemoCallback["default"])(getPopupContainer);
// ==================== Accessibility =====================
var triggerAccessibilityOpen = function triggerAccessibilityOpen(key, open) {
var nextOpen = open !== null && open !== void 0 ? open : !mergedOpenKeys.includes(key);
onInternalOpenChange(key, nextOpen);
};
var onInternalKeyDown = (0, _useAccessibility["default"])(internalMode, mergedActiveKey, isRtl, uuid, containerRef, getKeys, getKeyPath, setMergedActiveKey, triggerAccessibilityOpen, onKeyDown);
// ======================== Effect ========================
React.useEffect(function () {
setMounted(true);
}, []);
// ======================== Render ========================
// >>>>> Children
var wrappedChildList = internalMode !== 'horizontal' || disabledOverflow ? childList
// Need wrap for overflow dropdown that do not response for open
: childList.map(function (child, index) {
return (
/*#__PURE__*/
// Always wrap provider to avoid sub node re-mount
React.createElement(_MenuContext["default"], {
key: child.key,
overflowDisabled: index > lastVisibleIndex
}, child)
);
});
// >>>>> Container
var container = /*#__PURE__*/React.createElement(_rcOverflow["default"], (0, _extends2["default"])({
id: id,
ref: containerRef,
prefixCls: "".concat(prefixCls, "-overflow"),
component: "ul",
itemComponent: _MenuItem["default"],
className: (0, _classnames["default"])(prefixCls, "".concat(prefixCls, "-root"), "".concat(prefixCls, "-").concat(internalMode), className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-inline-collapsed"), internalInlineCollapsed), "".concat(prefixCls, "-rtl"), isRtl)),
dir: direction,
style: style,
role: "menu",
tabIndex: tabIndex,
data: wrappedChildList,
renderRawItem: function renderRawItem(node) {
return node;
},
renderRawRest: function renderRawRest(omitItems) {
// We use origin list since wrapped list use context to prevent open
var len = omitItems.length;
var originOmitItems = len ? childList.slice(-len) : null;
return /*#__PURE__*/React.createElement(_SubMenu["default"], {
eventKey: _useKeyRecords2.OVERFLOW_KEY,
title: overflowedIndicator,
disabled: allVisible,
internalPopupClose: len === 0,
popupClassName: overflowedIndicatorPopupClassName
}, originOmitItems);
},
maxCount: internalMode !== 'horizontal' || disabledOverflow ? _rcOverflow["default"].INVALIDATE : _rcOverflow["default"].RESPONSIVE,
ssr: "full",
"data-menu-list": true,
onVisibleChange: function onVisibleChange(newLastIndex) {
setLastVisibleIndex(newLastIndex);
},
onKeyDown: onInternalKeyDown
}, restProps));
// >>>>> Render
return /*#__PURE__*/React.createElement(_IdContext.IdContext.Provider, {
value: uuid
}, /*#__PURE__*/React.createElement(_MenuContext["default"], {
prefixCls: prefixCls,
mode: internalMode,
inlineCollapsed: mergedInlineCollapsed,
openKeys: mergedOpenKeys,
rtl: isRtl
// Disabled
,
disabled: disabled
// Motion
,
motion: mounted ? motion : null,
defaultMotions: mounted ? defaultMotions : null
// Active
,
activeKey: mergedActiveKey,
onActive: onActive,
onInactive: onInactive
// Selection
,
selectedKeys: mergedSelectKeys
// Level
,
inlineIndent: inlineIndent
// Popup
,
subMenuOpenDelay: subMenuOpenDelay,
subMenuCloseDelay: subMenuCloseDelay,
forceSubMenuRender: forceSubMenuRender,
builtinPlacements: builtinPlacements,
triggerSubMenuAction: triggerSubMenuAction,
getPopupContainer: getInternalPopupContainer
// Icon
,
itemIcon: itemIcon,
expandIcon: expandIcon
// Events
,
onItemClick: onInternalClick,
onOpenChange: onInternalOpenChange
}, /*#__PURE__*/React.createElement(_PathContext.PathUserContext.Provider, {
value: pathUserContext
}, container), /*#__PURE__*/React.createElement("div", {
style: {
display: 'none'
},
"aria-hidden": true
}, /*#__PURE__*/React.createElement(_PathContext.PathRegisterContext.Provider, {
value: registerPathContext
}, childList))));
};
var _default = exports["default"] = Menu;