@antdp/basic-layouts
Version:
94 lines • 2.89 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { useLayouts } from '../hooks';
import { LayoutModel } from '../interface';
import { getSiderMenus } from '../utils';
import Logo from './../Logo';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Sider = props => {
var {
theme,
menuProps
} = props;
var location = useLocation();
var {
HandleMenu,
collapsed,
siderWidth = 260,
setCollapsed,
layout,
defultOpenMenus
} = useLayouts();
var [defaultOpenKeys, setDefaultOpenKeys] = useState([]);
useEffect(() => {
var keys = localStorage.getItem('defaultOpenKeys');
if (keys !== null) {
setDefaultOpenKeys(JSON.parse(keys));
}
return () => {
// 组件销毁时执行清空操作
setDefaultOpenKeys([]);
localStorage.removeItem('defaultOpenKeys');
};
}, []);
var collapsedView = useMemo(() => /*#__PURE__*/React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
style: {
fontSize: 20,
marginTop: 13
},
onClick: () => setCollapsed(!collapsed)
}), [collapsed]);
var menus = HandleMenu.getSiderMenus(location.pathname);
var items = useMemo(() => {
var keys = localStorage.getItem('defaultOpenKeys');
if (keys !== null && defultOpenMenus) {
setDefaultOpenKeys(JSON.parse(keys));
}
return getSiderMenus(menus, layout === LayoutModel.TOPLEFT);
}, [menus, layout]);
if (!items.length) {
return /*#__PURE__*/_jsx(React.Fragment, {});
}
return /*#__PURE__*/_jsxs(Layout.Sider, {
className: "antdp-basic-layouts-sider",
collapsible: true,
width: siderWidth,
collapsed: collapsed,
theme: theme,
onCollapse: value => {
setCollapsed(value);
},
trigger: /*#__PURE__*/_jsx("div", {
className: "antdp-basic-layouts-collapsed",
children: collapsedView
}),
children: [layout === LayoutModel.SLIDER && /*#__PURE__*/_jsx(Logo, {}), /*#__PURE__*/_jsx("div", {
style: {
flex: '1 1 0%',
overflow: 'hidden auto'
},
children: /*#__PURE__*/_jsx(Menu, _extends({
theme: theme,
selectedKeys: [location.pathname],
defaultSelectedKeys: [location.pathname],
defaultOpenKeys: defaultOpenKeys,
mode: "inline",
items: items,
style: {
width: '100%'
},
onOpenChange: keys => {
if (defultOpenMenus) {
setDefaultOpenKeys(keys);
localStorage.setItem('defaultOpenKeys', JSON.stringify(keys));
}
}
}, menuProps))
})]
});
};
export default Sider;