@orca-fe/pocket
Version:
UI components by orca-team
217 lines (216 loc) • 9.39 kB
JavaScript
var _excluded = ["visible"],
_excluded2 = ["className", "level", "menu", "open", "isInPopup"],
_excluded3 = ["className", "menu", "style", "showIcon"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
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; }
import React, { useContext, useMemo } from 'react';
import { Link } from 'react-router-dom';
import pc from 'prefix-classnames';
import Animate from 'rc-animate';
import cn from 'classnames';
import OpenBox from "../../../open-box";
import Arrow from "../Arrow";
import MenuContext from "../MenuContext";
import Trigger from "../../../trigger";
import useStyles, { prefix } from "./MenuItem.style";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Span = _ref => {
var visible = _ref.visible,
props = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/_jsx("span", _objectSpread({}, props));
};
var px = pc(prefix);
var eArr = [];
var MenuLevelContext = /*#__PURE__*/React.createContext({
level: 0,
isInPopup: false
});
export var SubMenu = props => {
var _props$className = props.className,
className = _props$className === void 0 ? '' : _props$className,
_props$level = props.level,
level = _props$level === void 0 ? 0 : _props$level,
menu = props.menu,
_props$open = props.open,
open = _props$open === void 0 ? false : _props$open,
_props$isInPopup = props.isInPopup,
isInPopup = _props$isInPopup === void 0 ? false : _props$isInPopup,
otherProps = _objectWithoutProperties(props, _excluded2);
var showIcon = useMemo(() => menu.some(({
icon
}) => icon != null), [menu]);
return /*#__PURE__*/_jsx(MenuLevelContext.Provider, {
value: {
level: level + 1,
isInPopup
},
children: /*#__PURE__*/_jsx(OpenBox, _objectSpread(_objectSpread({
className: `orca-menu-sub-menu ${className}`
}, otherProps), {}, {
open: open,
height: 0,
children: menu.map(menu => {
var key = menu.key,
visible = menu.visible;
return visible !== false &&
/*#__PURE__*/
// eslint-disable-next-line @typescript-eslint/no-use-before-define
_jsx(MenuItem, {
menu: menu,
showIcon: showIcon
}, key);
})
}))
});
};
var MenuItem = props => {
var _openKeys$key;
var _props$className2 = props.className,
className = _props$className2 === void 0 ? '' : _props$className2,
menu = props.menu,
style = props.style,
_props$showIcon = props.showIcon,
showIcon = _props$showIcon === void 0 ? false : _props$showIcon,
otherProps = _objectWithoutProperties(props, _excluded3);
var styles = useStyles();
var _menu$children = menu.children,
children = _menu$children === void 0 ? eArr : _menu$children,
key = menu.key,
path = menu.path,
redirect = menu.redirect,
render = menu.render,
text = menu.text,
icon = menu.icon;
var hasChildren = children.filter(child => child.visible !== false).length > 0;
var _useContext = useContext(MenuContext),
isVertical = _useContext.isVertical,
openKeys = _useContext.openKeys,
defaultOpenAll = _useContext.defaultOpenAll,
checkedKey = _useContext.checkedKey,
groupCheckedKeys = _useContext.groupCheckedKeys,
toggleOpenKey = _useContext.toggleOpenKey,
collapsed = _useContext.collapsed,
theme = _useContext.theme,
toggleOnItemClick = _useContext.toggleOnItemClick,
onItemClick = _useContext.onItemClick;
var _useContext2 = useContext(MenuLevelContext),
level = _useContext2.level,
isInPopup = _useContext2.isInPopup;
var collapseAndZero = level === 0 && collapsed;
var isOpen = (_openKeys$key = openKeys[key]) !== null && _openKeys$key !== void 0 ? _openKeys$key : defaultOpenAll;
var childChecked = useMemo(() => groupCheckedKeys.includes(key), [groupCheckedKeys, key]);
var checked = key === checkedKey;
var verticalAndParent = isVertical && hasChildren;
function renderMenuTextContent() {
// 是否展示icon：如果自身包含 icon 或垂直布局下被提示 showIcon 则展示 icon
var isShowIcon = !!icon || showIcon && isVertical;
// 是否展示文本：如果不是 垂直布局 且被 collapsed，则展示文本
var isShowText = !(isVertical && collapseAndZero);
return /*#__PURE__*/_jsxs(_Fragment, {
children: [isShowIcon && /*#__PURE__*/_jsx("div", {
className: cn(styles.icon, {
[styles.collapsed]: collapseAndZero
}),
children: icon
}), /*#__PURE__*/_jsx(Animate, {
className: styles.textAnimContainer,
showProp: "visible",
transitionName: px('text-anim'),
transitionAppear: true,
transitionEnter: true,
transitionLeave: true,
children: /*#__PURE__*/_jsx(Span, {
className: cn(styles.text, {
[styles.textHidden]: !isShowText
}),
visible: isShowText,
children: text
})
}), verticalAndParent && !collapseAndZero && /*#__PURE__*/_jsx("div", {
className: styles.arrow,
onClick: e => {
e.preventDefault();
e.stopPropagation();
// 下拉点击事件
toggleOpenKey(key);
},
children: /*#__PURE__*/_jsx(Arrow, {
down: isOpen
})
})]
});
}
var handleItemClick = e => {
onItemClick(e, menu);
if (!path || toggleOnItemClick) {
toggleOpenKey(key);
}
};
var paddingLeft = 24 * level + 20;
if (collapsed && isInPopup && level > 0) {
paddingLeft = 24 * (level - 1) + 20;
}
var menuText = path ? /*#__PURE__*/_jsx(Link, {
className: styles.link,
to: redirect || path,
style: {
paddingLeft
},
onClick: handleItemClick,
children: renderMenuTextContent()
}) : /*#__PURE__*/_jsx("div", {
className: styles.link,
style: {
paddingLeft
},
onClick: handleItemClick,
children: renderMenuTextContent()
});
// 如果是最外层 且 包含 children 的菜单，则包裹 Trigger 备用
if (verticalAndParent && level === 0) {
menuText = /*#__PURE__*/_jsx(Trigger, {
prefixCls: styles.popup,
popupClassName: px(`theme-${theme}`),
action: collapsed ? ['hover'] : [],
popup: /*#__PURE__*/_jsx(SubMenu, {
menu: children,
level: level,
open: true,
isInPopup: true
}),
popupMotion: {
motionName: px('popup-anim')
},
mouseLeaveDelay: 0.3,
popupAlign: {
points: ['tl', 'tr'],
offset: [0, 0]
},
children: menuText
});
}
return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
className: `${cn(styles.root, `${prefix}-theme-${theme}`, {
[styles.childChecked]: childChecked && !checked,
[styles.checked]: checked,
[styles.vertical]: isVertical
})} ${className}`
}, otherProps), {}, {
children: [render === null || render === void 0 ? void 0 : render({
checked
}), !render && menuText, verticalAndParent && /*#__PURE__*/_jsx(SubMenu, {
menu: children,
level: level,
open: isOpen && !collapseAndZero,
isInPopup: isInPopup
})]
}));
};
export default MenuItem;