@antdp/basic-layouts/lib/Sider/index.js

入口框架公共界面

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _icons = require("@ant-design/icons");
var _antd = require("antd");
var _react = _interopRequireWildcard(require("react"));
var _reactRouterDom = require("react-router-dom");
var _hooks = require("../hooks");
var _interface = require("../interface");
var _utils = require("../utils");
var _Logo = _interopRequireDefault(require("./../Logo"));
var _jsxRuntime = require("react/jsx-runtime");
var Sider = function Sider(props) {
  var theme = props.theme,
    menuProps = props.menuProps;
  var location = (0, _reactRouterDom.useLocation)();
  var _useLayouts = (0, _hooks.useLayouts)(),
    HandleMenu = _useLayouts.HandleMenu,
    collapsed = _useLayouts.collapsed,
    _useLayouts$siderWidt = _useLayouts.siderWidth,
    siderWidth = _useLayouts$siderWidt === void 0 ? 260 : _useLayouts$siderWidt,
    setCollapsed = _useLayouts.setCollapsed,
    layout = _useLayouts.layout,
    defultOpenMenus = _useLayouts.defultOpenMenus;
  var _useState = (0, _react.useState)([]),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    defaultOpenKeys = _useState2[0],
    setDefaultOpenKeys = _useState2[1];
  (0, _react.useEffect)(function () {
    var keys = localStorage.getItem('defaultOpenKeys');
    if (keys !== null) {
      setDefaultOpenKeys(JSON.parse(keys));
    }
    return function () {
      // 组件销毁时执行清空操作
      setDefaultOpenKeys([]);
      localStorage.removeItem('defaultOpenKeys');
    };
  }, []);
  var collapsedView = (0, _react.useMemo)(function () {
    return /*#__PURE__*/_react["default"].createElement(collapsed ? _icons.MenuUnfoldOutlined : _icons.MenuFoldOutlined, {
      className: 'trigger',
      style: {
        fontSize: 20,
        marginTop: 13
      },
      onClick: function onClick() {
        return setCollapsed(!collapsed);
      }
    });
  }, [collapsed]);
  var menus = HandleMenu.getSiderMenus(location.pathname);
  var items = (0, _react.useMemo)(function () {
    var keys = localStorage.getItem('defaultOpenKeys');
    if (keys !== null && defultOpenMenus) {
      setDefaultOpenKeys(JSON.parse(keys));
    }
    return (0, _utils.getSiderMenus)(menus, layout === _interface.LayoutModel.TOPLEFT);
  }, [menus, layout]);
  if (!items.length) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react["default"].Fragment, {});
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Layout.Sider, {
    className: "antdp-basic-layouts-sider",
    collapsible: true,
    width: siderWidth,
    collapsed: collapsed,
    theme: theme,
    onCollapse: function onCollapse(value) {
      setCollapsed(value);
    },
    trigger: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "antdp-basic-layouts-collapsed",
      children: collapsedView
    }),
    children: [layout === _interface.LayoutModel.SLIDER && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo["default"], {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: {
        flex: '1 1 0%',
        overflow: 'hidden auto'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Menu, (0, _objectSpread2["default"])({
        theme: theme,
        selectedKeys: [location.pathname],
        defaultSelectedKeys: [location.pathname],
        defaultOpenKeys: defaultOpenKeys,
        mode: "inline",
        items: items,
        style: {
          width: '100%'
        },
        onOpenChange: function onOpenChange(keys) {
          if (defultOpenMenus) {
            setDefaultOpenKeys(keys);
            localStorage.setItem('defaultOpenKeys', JSON.stringify(keys));
          }
        }
      }, menuProps))
    })]
  });
};
var _default = exports["default"] = Sider;
module.exports = exports.default;