acud
Version:
acg react 组件库
142 lines • 6.75 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/**
* @file
* @author dailin01
*/
var __rest = this && this.__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;
};
import React, { useState, useCallback, useEffect, useMemo } from 'react';
import classNames from 'classnames';
import OutlinedMenuFold from "acud-icon/es/icons/OutlinedMenuFold";
import OutlinedMenuUnfold from "acud-icon/es/icons/OutlinedMenuUnfold";
import OutlinedTreeRight from "acud-icon/es/icons/OutlinedTreeRight";
import classnames from 'classnames';
import Tooltip from '../tooltip';
import RcMenu from './rc-menu';
import { cloneElement } from '../_util/reactNode';
import { ConfigContext } from '../config-provider';
import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
var GlobalSiderBar = function GlobalSiderBar(props) {
var customizePrefixCls = props.prefixCls,
className = props.className,
_props$mode = props.mode,
mode = _props$mode === void 0 ? 'horizontal' : _props$mode,
inlineCollapsed = props.inlineCollapsed,
expandIcon = props.expandIcon,
scope = props.scope,
onCollapse = props.onCollapse,
_props$collapsible = props.collapsible,
collapsible = _props$collapsible === void 0 ? true : _props$collapsible,
_props$collapsePositi = props.collapsePosition,
collapsePosition = _props$collapsePositi === void 0 ? 'bottom' : _props$collapsePositi,
withHead = props.withHead,
headIcon = props.headIcon,
headTip = props.headTip,
headPopupClassName = props.headPopupClassName,
onHeadClick = props.onHeadClick,
_props$collapsedShowF = props.collapsedShowFirst,
collapsedShowFirst = _props$collapsedShowF === void 0 ? false : _props$collapsedShowF,
rest = __rest(props, ["prefixCls", "className", "mode", "inlineCollapsed", "expandIcon", "scope", "onCollapse", "collapsible", "collapsePosition", "withHead", "headIcon", "headTip", "headPopupClassName", "onHeadClick", "collapsedShowFirst"]);
// siderbar
var _useState = useState(inlineCollapsed),
_useState2 = _slicedToArray(_useState, 2),
collapsed = _useState2[0],
setCollapsed = _useState2[1];
var _useLocaleReceiver = useLocaleReceiver('Menu'),
_useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
menuLocale = _useLocaleReceiver2[0];
var toggleCollapsed = useCallback(function () {
setCollapsed(function (collapsed) {
return !collapsed;
});
onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(!collapsed);
}, [collapsed, onCollapse]);
useEffect(function () {
setCollapsed(inlineCollapsed);
}, [inlineCollapsed]);
var isCollapseRight = collapsePosition === 'right';
var _React$useContext = React.useContext(ConfigContext),
getPrefixCls = _React$useContext.getPrefixCls;
var prefixCls = getPrefixCls('menu', customizePrefixCls);
// 折叠时隐藏menu
var hiddenMenu = useMemo(function () {
return !collapsedShowFirst && isCollapseRight && collapsed;
}, [collapsedShowFirst, isCollapseRight, collapsed]);
var siderbarClassName = classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-global-siderbar"), true), "".concat(prefixCls, "-global-collapsed"), collapsed), "".concat(prefixCls, "-global-siderbar-right-collapse"), isCollapseRight), "".concat(prefixCls, "-global-collapsed-hidden"), hiddenMenu));
var menuClassName = classNames(className, _defineProperty({}, "".concat(prefixCls, "-").concat(scope), scope));
var menuHead = useMemo(function () {
if (!withHead) {
return null;
}
;
var copyIcon = cloneElement(headIcon, {
className: "".concat(prefixCls, "-global-siderbar-head-icon")
});
var headContent;
if (!collapsed) {
headContent = /*#__PURE__*/React.createElement(React.Fragment, null, copyIcon, /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-global-siderbar-head-text")
}, withHead));
} else if (headIcon) {
headContent = copyIcon;
} else if (typeof withHead === 'string' && withHead.length) {
headContent = /*#__PURE__*/React.createElement("span", null, withHead.charAt(0));
}
if (headTip) {
headContent = /*#__PURE__*/React.createElement(Tooltip, {
title: headTip,
placement: "right",
overlayClassName: classnames("".concat(prefixCls, "-global-siderbar-tooltip"), headPopupClassName)
}, headContent);
}
return /*#__PURE__*/React.createElement("div", {
onClick: onHeadClick,
className: "".concat(prefixCls, "-global-siderbar-head")
}, headContent);
}, [withHead, headIcon, prefixCls, collapsed, headTip, onHeadClick, headPopupClassName]);
var collapseNav = useMemo(function () {
if (!collapsible) {
return null;
}
if (isCollapseRight) {
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-right-nav section-collapse"),
onClick: toggleCollapsed
}, /*#__PURE__*/React.createElement(OutlinedTreeRight, {
className: "collapse-icon"
}));
}
var SwitchIcon = collapsed ? OutlinedMenuUnfold : OutlinedMenuFold;
var switchText = collapsed ? menuLocale.unfold : menuLocale.fold;
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-bottom-nav")
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-bottom-nav-fold"),
onClick: toggleCollapsed
}, /*#__PURE__*/React.createElement(SwitchIcon, {
className: "".concat(prefixCls, "-bottom-nav-fold-icon")
}), /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-bottom-nav-fold-label")
}, switchText)));
}, [collapsed, collapsible, isCollapseRight, toggleCollapsed]);
return /*#__PURE__*/React.createElement("div", {
className: siderbarClassName
}, menuHead, /*#__PURE__*/React.createElement(RcMenu, _extends({
prefixCls: prefixCls,
className: menuClassName,
expandIcon: cloneElement(expandIcon, {
className: "".concat(prefixCls, "-submenu-expand-icon")
}),
inlineCollapsed: collapsed,
mode: mode
}, rest)), collapseNav);
};
export default GlobalSiderBar;