@orca-fe/pocket
Version:
UI components by orca-team
224 lines (222 loc) • 11.8 kB
JavaScript
;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.SubMenu = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactRouterDom = require("react-router-dom");
var _prefixClassnames = _interopRequireDefault(require("prefix-classnames"));
var _rcAnimate = _interopRequireDefault(require("rc-animate"));
var _classnames = _interopRequireDefault(require("classnames"));
var _openBox = _interopRequireDefault(require("../../../open-box"));
var _Arrow = _interopRequireDefault(require("../Arrow"));
var _MenuContext = _interopRequireDefault(require("../MenuContext"));
var _trigger = _interopRequireDefault(require("../../../trigger"));
var _MenuItem = _interopRequireWildcard(require("./MenuItem.style"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["visible"],
_excluded2 = ["className", "level", "menu", "open", "isInPopup"],
_excluded3 = ["className", "menu", "style", "showIcon"];
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; }
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; }
var Span = function Span(_ref) {
var visible = _ref.visible,
props = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread({}, props));
};
var px = (0, _prefixClassnames.default)(_MenuItem.prefix);
var eArr = [];
var MenuLevelContext = /*#__PURE__*/_react.default.createContext({
level: 0,
isInPopup: false
});
var SubMenu = exports.SubMenu = function 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 = (0, _react.useMemo)(function () {
return menu.some(function (_ref2) {
var icon = _ref2.icon;
return icon != null;
});
}, [menu]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuLevelContext.Provider, {
value: {
level: level + 1,
isInPopup: isInPopup
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_openBox.default, _objectSpread(_objectSpread({
className: "orca-menu-sub-menu ".concat(className)
}, otherProps), {}, {
open: open,
height: 0,
children: menu.map(function (menu) {
var key = menu.key,
visible = menu.visible;
return visible !== false &&
/*#__PURE__*/
// eslint-disable-next-line @typescript-eslint/no-use-before-define
(0, _jsxRuntime.jsx)(MenuItem, {
menu: menu,
showIcon: showIcon
}, key);
})
}))
});
};
var MenuItem = function 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 = (0, _MenuItem.default)();
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(function (child) {
return child.visible !== false;
}).length > 0;
var _useContext = (0, _react.useContext)(_MenuContext.default),
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 = (0, _react.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 = (0, _react.useMemo)(function () {
return 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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [isShowIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)(styles.icon, _defineProperty({}, styles.collapsed, collapseAndZero)),
children: icon
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_rcAnimate.default, {
className: styles.textAnimContainer,
showProp: "visible",
transitionName: px('text-anim'),
transitionAppear: true,
transitionEnter: true,
transitionLeave: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Span, {
className: (0, _classnames.default)(styles.text, _defineProperty({}, styles.textHidden, !isShowText)),
visible: isShowText,
children: text
})
}), verticalAndParent && !collapseAndZero && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: styles.arrow,
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
// 下拉点击事件
toggleOpenKey(key);
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Arrow.default, {
down: isOpen
})
})]
});
}
var handleItemClick = function 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__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
className: styles.link,
to: redirect || path,
style: {
paddingLeft: paddingLeft
},
onClick: handleItemClick,
children: renderMenuTextContent()
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: styles.link,
style: {
paddingLeft: paddingLeft
},
onClick: handleItemClick,
children: renderMenuTextContent()
});
// 如果是最外层 且 包含 children 的菜单，则包裹 Trigger 备用
if (verticalAndParent && level === 0) {
menuText = /*#__PURE__*/(0, _jsxRuntime.jsx)(_trigger.default, {
prefixCls: styles.popup,
popupClassName: px("theme-".concat(theme)),
action: collapsed ? ['hover'] : [],
popup: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
className: "".concat((0, _classnames.default)(styles.root, "".concat(_MenuItem.prefix, "-theme-").concat(theme), _defineProperty(_defineProperty(_defineProperty({}, styles.childChecked, childChecked && !checked), styles.checked, checked), styles.vertical, isVertical)), " ").concat(className)
}, otherProps), {}, {
children: [render === null || render === void 0 ? void 0 : render({
checked: checked
}), !render && menuText, verticalAndParent && /*#__PURE__*/(0, _jsxRuntime.jsx)(SubMenu, {
menu: children,
level: level,
open: isOpen && !collapseAndZero,
isInPopup: isInPopup
})]
}));
};
var _default = exports.default = MenuItem;