@ant-design/pro-layout
Version:
213 lines (174 loc) • 8.04 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultRenderLogoAndTitle = exports.defaultRenderLogo = exports.defaultRenderCollapsedButton = exports.default = void 0;
require("antd/es/menu/style");
var _menu = _interopRequireDefault(require("antd/es/menu"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
require("antd/es/layout/style");
var _layout = _interopRequireDefault(require("antd/es/layout"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _icons = require("@ant-design/icons");
require("./index.less");
var _BaseMenu = _interopRequireDefault(require("./BaseMenu"));
var _Counter = _interopRequireDefault(require("./Counter"));
var Sider = _layout.default.Sider;
var defaultRenderLogo = function defaultRenderLogo(logo) {
if (typeof logo === 'string') {
return /*#__PURE__*/_react.default.createElement("img", {
src: logo,
alt: "logo"
});
}
if (typeof logo === 'function') {
return logo();
}
return logo;
};
exports.defaultRenderLogo = defaultRenderLogo;
var defaultRenderLogoAndTitle = function defaultRenderLogoAndTitle(props) {
var renderKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'menuHeaderRender';
var logo = props.logo,
title = props.title,
layout = props.layout;
var renderFunction = props[renderKey || ''];
if (renderFunction === false) {
return null;
}
var logoDom = defaultRenderLogo(logo);
var titleDom = /*#__PURE__*/_react.default.createElement("h1", null, title !== null && title !== void 0 ? title : 'Ant Design Pro');
if (renderFunction) {
// when collapsed, no render title
return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
}
if (layout === 'mix' && renderKey === 'menuHeaderRender') {
return null;
}
return /*#__PURE__*/_react.default.createElement("a", null, logoDom, props.collapsed ? null : titleDom);
};
exports.defaultRenderLogoAndTitle = defaultRenderLogoAndTitle;
var defaultRenderCollapsedButton = function defaultRenderCollapsedButton(collapsed) {
return collapsed ? /*#__PURE__*/_react.default.createElement(_icons.MenuUnfoldOutlined, null) : /*#__PURE__*/_react.default.createElement(_icons.MenuFoldOutlined, null);
};
exports.defaultRenderCollapsedButton = defaultRenderCollapsedButton;
var SiderMenu = function SiderMenu(props) {
var _classNames;
var collapsed = props.collapsed,
fixSiderbar = props.fixSiderbar,
menuFooterRender = props.menuFooterRender,
_onCollapse = props.onCollapse,
theme = props.theme,
siderWidth = props.siderWidth,
isMobile = props.isMobile,
onMenuHeaderClick = props.onMenuHeaderClick,
_props$breakpoint = props.breakpoint,
breakpoint = _props$breakpoint === void 0 ? 'lg' : _props$breakpoint,
style = props.style,
layout = props.layout,
_props$menuExtraRende = props.menuExtraRender,
menuExtraRender = _props$menuExtraRende === void 0 ? false : _props$menuExtraRende,
_props$collapsedButto = props.collapsedButtonRender,
collapsedButtonRender = _props$collapsedButto === void 0 ? defaultRenderCollapsedButton : _props$collapsedButto,
links = props.links,
menuContentRender = props.menuContentRender,
prefixCls = props.prefixCls,
onOpenChange = props.onOpenChange,
headerHeight = props.headerHeight,
logoStyle = props.logoStyle;
var baseClassName = "".concat(prefixCls, "-sider");
var _MenuCounter$useConta = _Counter.default.useContainer(),
flatMenuKeys = _MenuCounter$useConta.flatMenuKeys;
var siderClassName = (0, _classnames.default)("".concat(baseClassName), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(baseClassName, "-fixed"), fixSiderbar), (0, _defineProperty2.default)(_classNames, "".concat(baseClassName, "-layout-").concat(layout), layout && !isMobile), (0, _defineProperty2.default)(_classNames, "".concat(baseClassName, "-light"), theme !== 'dark'), _classNames));
var headerDom = defaultRenderLogoAndTitle(props);
var extraDom = menuExtraRender && menuExtraRender(props);
var menuDom = menuContentRender !== false && flatMenuKeys && /*#__PURE__*/_react.default.createElement(_BaseMenu.default, (0, _extends2.default)({}, props, {
key: "base-menu",
mode: "inline",
handleOpenChange: onOpenChange,
style: {
width: '100%'
},
className: "".concat(baseClassName, "-menu")
}));
var menuRenderDom = menuContentRender ? menuContentRender(props, menuDom) : menuDom;
var linksMenuItems = (links || []).map(function (node, index) {
return {
className: "".concat(baseClassName, "-link"),
label: node,
key: index
};
});
if (collapsedButtonRender && !isMobile) {
linksMenuItems.push({
className: "".concat(baseClassName, "-collapsed-button"),
//@ts-ignore
title: false,
key: 'collapsed',
onClick: function onClick() {
if (_onCollapse) {
_onCollapse(!collapsed);
}
},
label: collapsedButtonRender(collapsed)
});
}
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fixSiderbar && /*#__PURE__*/_react.default.createElement("div", {
style: (0, _objectSpread2.default)({
width: collapsed ? 48 : siderWidth,
overflow: 'hidden',
flex: "0 0 ".concat(collapsed ? 48 : siderWidth, "px"),
maxWidth: collapsed ? 48 : siderWidth,
minWidth: collapsed ? 48 : siderWidth,
transition: "background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
}, style)
}), /*#__PURE__*/_react.default.createElement(Sider, {
collapsible: true,
trigger: null,
collapsed: collapsed,
breakpoint: breakpoint === false ? undefined : breakpoint,
onCollapse: function onCollapse(collapse) {
if (isMobile) return;
_onCollapse === null || _onCollapse === void 0 ? void 0 : _onCollapse(collapse);
},
collapsedWidth: 48,
style: (0, _objectSpread2.default)({
overflow: 'hidden',
paddingTop: layout === 'mix' && !isMobile ? headerHeight : undefined
}, style),
width: siderWidth,
theme: theme,
className: siderClassName
}, headerDom && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)("".concat(baseClassName, "-logo"), (0, _defineProperty2.default)({}, "".concat(baseClassName, "-collapsed"), collapsed)),
onClick: layout !== 'mix' ? onMenuHeaderClick : undefined,
id: "logo",
style: logoStyle
}, headerDom), extraDom && /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(baseClassName, "-extra ").concat(!headerDom && "".concat(baseClassName, "-extra-no-logo"))
}, extraDom), /*#__PURE__*/_react.default.createElement("div", {
style: {
flex: 1,
overflowY: 'auto',
overflowX: 'hidden'
}
}, menuRenderDom), /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(baseClassName, "-links")
}, /*#__PURE__*/_react.default.createElement(_menu.default, {
theme: theme,
inlineIndent: 16,
className: "".concat(baseClassName, "-link-menu"),
selectedKeys: [],
openKeys: [],
mode: "inline",
items: linksMenuItems
})), menuFooterRender && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)("".concat(baseClassName, "-footer"), (0, _defineProperty2.default)({}, "".concat(baseClassName, "-footer-collapsed"), !collapsed))
}, menuFooterRender(props))));
};
var _default = SiderMenu;
exports.default = _default;