header-sider-layout
Version:
ant-design-pro layout, based on pro-layout, with header and sider layout.
279 lines (234 loc) • 10.4 kB
JavaScript
import "antd/es/icon/style";
import _Icon from "antd/es/icon";
import "antd/es/layout/style";
import _Layout from "antd/es/layout";
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
import React, { Component } from 'react';
import debounce from 'lodash/debounce';
import classNames from 'classnames';
import './index.less';
import BaseMenu from './BaseMenu';
import { getDefaultCollapsedSubMenus } from './SiderMenuUtils';
import { isBrowser } from '../utils/utils';
var Sider = _Layout.Sider;
var firstMount = true;
export var defaultRenderLogo = function defaultRenderLogo(logo) {
if (typeof logo === 'string') {
return React.createElement("img", {
src: logo,
alt: "logo"
});
}
if (typeof logo === 'function') {
return logo();
}
return logo;
};
export var defaultRenderLogoAndTitle = function defaultRenderLogoAndTitle(logo, title, menuHeaderRender) {
if (menuHeaderRender === false) {
return null;
}
var logoDom = defaultRenderLogo(logo);
var titleDom = React.createElement("h1", null, title);
if (menuHeaderRender) {
return menuHeaderRender(logoDom, titleDom);
}
return React.createElement("a", {
href: "/"
}, logoDom, titleDom);
};
var defaultRenderCollapsedButton = function defaultRenderCollapsedButton(collapsed) {
return React.createElement(_Icon, {
type: collapsed ? 'menu-unfold' : 'menu-fold'
});
};
var SiderMenu =
/*#__PURE__*/
function (_Component) {
_inherits(SiderMenu, _Component);
function SiderMenu(props) {
var _this;
_classCallCheck(this, SiderMenu);
_this = _possibleConstructorReturn(this, _getPrototypeOf(SiderMenu).call(this, props));
_this.triggerResizeEvent = debounce(function () {
var event = document.createEvent('HTMLEvents');
event.initEvent('resize', true, false);
if (isBrowser()) {
window.dispatchEvent(event);
}
});
_this.isMainMenu = function (key) {
var _this$props$menuData = _this.props.menuData,
menuData = _this$props$menuData === void 0 ? [] : _this$props$menuData;
return menuData.some(function (item) {
if (key) {
return item.key === key || item.path === key;
}
return false;
});
};
_this.handleOpenChange = function (openKeys) {
var _this$props = _this.props,
onOpenChange = _this$props.onOpenChange,
defaultOpenKeys = _this$props.openKeys;
if (onOpenChange) {
onOpenChange(openKeys);
return;
} // if defaultOpenKeys existence, don't change
if (defaultOpenKeys !== undefined) {
return;
}
var moreThanOne = openKeys.filter(function (openKey) {
return _this.isMainMenu(openKey);
}).length > 1;
if (moreThanOne) {
_this.setState({
openKeys: [openKeys.pop()].filter(function (item) {
return item;
})
});
} else {
_this.setState({
openKeys: _toConsumableArray(openKeys)
});
}
};
_this.toggle = function () {
var _this$props2 = _this.props,
collapsed = _this$props2.collapsed,
onCollapse = _this$props2.onCollapse;
if (onCollapse) onCollapse(!collapsed);
_this.triggerResizeEvent();
};
_this.renderCollapsedButton = function () {
var _this$props3 = _this.props,
collapsed = _this$props3.collapsed,
_this$props3$collapse = _this$props3.collapsedButtonRender,
collapsedButtonRender = _this$props3$collapse === void 0 ? defaultRenderCollapsedButton : _this$props3$collapse,
layout = _this$props3.layout;
if (collapsedButtonRender !== false && layout === 'both') {
return React.createElement("div", {
className: "ant-pro-sider-menu-collapsed"
}, React.createElement("span", {
className: classNames('ant-pro-sider-menu-trigger', {
collapsed: collapsed
}),
onClick: _this.toggle
}, collapsedButtonRender(collapsed)));
}
return null;
};
_this.state = {
openKeys: getDefaultCollapsedSubMenus(props)
};
return _this;
}
_createClass(SiderMenu, [{
key: "componentDidMount",
value: function componentDidMount() {
firstMount = false;
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.triggerResizeEvent.cancel();
}
}, {
key: "render",
value: function render() {
var _this$props4 = this.props,
collapsed = _this$props4.collapsed,
fixSiderbar = _this$props4.fixSiderbar,
_onCollapse = _this$props4.onCollapse,
theme = _this$props4.theme,
_this$props4$siderWid = _this$props4.siderWidth,
siderWidth = _this$props4$siderWid === void 0 ? 256 : _this$props4$siderWid,
isMobile = _this$props4.isMobile,
layout = _this$props4.layout,
_this$props4$logo = _this$props4.logo,
logo = _this$props4$logo === void 0 ? 'https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg' : _this$props4$logo,
title = _this$props4.title,
renderLogoAndTitle = _this$props4.menuHeaderRender,
onMenuHeaderClick = _this$props4.onMenuHeaderClick;
var openKeys = this.state.openKeys;
var isBoth = layout === 'both'; // 如果收起，并且为顶部布局，openKeys 为 false 都不控制 openKeys
var defaultProps = collapsed || layout === 'topmenu' || openKeys === false ? {} : {
openKeys: openKeys
};
var siderClassName = classNames('ant-pro-sider-menu-sider', {
'fix-sider-bar': fixSiderbar,
light: theme === 'light',
'with-header': isBoth
});
return React.createElement(Sider, {
collapsible: true,
trigger: null,
collapsed: collapsed,
breakpoint: "lg",
onCollapse: function onCollapse(collapse) {
if (firstMount || !isMobile) {
if (_onCollapse) {
_onCollapse(collapse);
}
}
},
width: siderWidth,
theme: theme,
className: siderClassName
}, !isBoth && React.createElement("div", {
className: "ant-pro-sider-menu-logo",
onClick: onMenuHeaderClick,
id: "logo"
}, defaultRenderLogoAndTitle(logo, title, renderLogoAndTitle)), this.renderCollapsedButton(), React.createElement(BaseMenu, Object.assign({}, this.props, {
mode: "inline",
type: "sider",
handleOpenChange: this.handleOpenChange,
onOpenChange: this.handleOpenChange,
style: {
padding: '16px 0',
width: '100%'
}
}, defaultProps, this.props.menuProps)));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(props, state) {
var pathname = state.pathname,
flatMenuKeysLen = state.flatMenuKeysLen;
var _props$location = props.location,
location = _props$location === void 0 ? {
pathname: '/'
} : _props$location,
_props$flatMenuKeys = props.flatMenuKeys,
flatMenuKeys = _props$flatMenuKeys === void 0 ? [] : _props$flatMenuKeys;
if (location.pathname !== pathname || flatMenuKeys.length !== flatMenuKeysLen) {
return {
pathname: location.pathname,
flatMenuKeysLen: flatMenuKeys.length,
openKeys: getDefaultCollapsedSubMenus(props)
};
}
return null;
}
}]);
return SiderMenu;
}(Component);
export { SiderMenu as default };
SiderMenu.defaultProps = {
flatMenuKeys: [],
isMobile: false,
collapsed: false,
menuData: []
};