@lvxiaowu/antd4
Version:
antd4-components
85 lines (83 loc) • 3.31 kB
JavaScript
import React from "react";
import { createElement, useEffect } from 'react';
import { MenuFoldOutlined, MenuUnfoldOutlined, UnorderedListOutlined } from '@ant-design/icons';
import { Layout, Affix } from 'antd';
import { observer } from 'mobx-react-lite';
import store from './store';
import cls from 'classnames';
import './style.less';
var Sider = Layout.Sider,
Header = Layout.Header,
Content = Layout.Content,
Footer = Layout.Footer;
/**
* 此组件是和业务强耦合的，包括顶部菜单栏，侧边菜单栏的切换和激活形式
* 只适合与cf-web项目一样的布局和菜单栏的工程使用即：
* 顶部有一级菜单，侧边有二级子菜单，且切换顶部一级菜单不会改变路由，只切换不同的侧边二级菜单栏，只有点击侧边菜单栏才去切换路由
* 不封装成通用的组件是因为业务不同，差别很大，无法通用，干脆针对不同业务封装不同布局和导航
*/
function AppLayout(_ref) {
var sidebar = _ref.sidebar,
sideWidth = _ref.sideWidth,
topbar = _ref.topbar,
children = _ref.children,
sideStyle = _ref.sideStyle,
onCollapse = _ref.onCollapse,
footer = _ref.footer,
extra = _ref.extra,
logo = _ref.logo;
var collapsed = store.collapsed,
sideFixed = store.sideFixed,
fixedSideVisible = store.fixedSideVisible;
useEffect(function () {
return function () {
store.reset();
};
}, []);
var sidebarEl = /*#__PURE__*/React.createElement("div", {
className: "side-nav"
}, sidebar);
return /*#__PURE__*/React.createElement(Layout, {
className: "sd-layout",
style: {
minHeight: '100%'
}
}, /*#__PURE__*/React.createElement(Sider, {
style: sideStyle,
breakpoint: "lg",
width: sideWidth,
onBreakpoint: store.onBreakpoint,
className: cls('sd-sidebar', {
'sd-sidebar-fixed': sideFixed,
'sd-sidebar-fixed-show': fixedSideVisible
}),
trigger: null,
collapsible: true,
collapsed: collapsed
}, sideFixed && /*#__PURE__*/React.createElement("span", {
className: "collapse-icon-fixed",
onClick: store.trigger
}, /*#__PURE__*/React.createElement(UnorderedListOutlined, null)), /*#__PURE__*/React.createElement("div", {
className: "logo"
}, logo), sideFixed ? sidebarEl : /*#__PURE__*/React.createElement(Affix, null, sidebarEl)), fixedSideVisible && /*#__PURE__*/React.createElement("div", {
className: "sd-sidebar-mask",
onClick: store.trigger
}), /*#__PURE__*/React.createElement(Layout, {
className: "sd-center"
}, /*#__PURE__*/React.createElement(Header, {
className: "sd-header"
}, !sideFixed && /*#__PURE__*/createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'collapse-icon',
onClick: function onClick() {
store.trigger();
onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(!collapsed);
}
}), /*#__PURE__*/React.createElement("div", {
className: "top-nav"
}, topbar), /*#__PURE__*/React.createElement("div", {
className: "extra"
}, extra)), /*#__PURE__*/React.createElement(Content, {
className: "sd-content"
}, children), footer && /*#__PURE__*/React.createElement(Footer, null, footer)));
}
export default observer(AppLayout);