@ant-design/pro-layout/lib/components/SiderMenu/index.js

@ant-design/pro-layout

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("antd/es/drawer/style");

var _drawer = _interopRequireDefault(require("antd/es/drawer"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _omit = _interopRequireDefault(require("omit.js"));

var _routeUtils = require("@umijs/route-utils");

var _SiderMenu = _interopRequireDefault(require("./SiderMenu"));

var _Counter = _interopRequireDefault(require("./Counter"));

var SiderMenuWrapper = function SiderMenuWrapper(props) {
  var isMobile = props.isMobile,
      menuData = props.menuData,
      siderWidth = props.siderWidth,
      collapsed = props.collapsed,
      onCollapse = props.onCollapse,
      style = props.style,
      className = props.className,
      hide = props.hide,
      getContainer = props.getContainer,
      prefixCls = props.prefixCls,
      matchMenuKeys = props.matchMenuKeys;

  var _MenuCounter$useConta = _Counter.default.useContainer(),
      setFlatMenuKeys = _MenuCounter$useConta.setFlatMenuKeys;

  (0, _react.useEffect)(function () {
    if (!menuData || menuData.length < 1) {
      return;
    } // 当 menu data 改变的时候重新计算这两个参数


    var newFlatMenus = (0, _routeUtils.getFlatMenus)(menuData);
    setFlatMenuKeys(Object.keys(newFlatMenus)); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [matchMenuKeys.join('-')]);
  (0, _react.useEffect)(function () {
    if (isMobile === true) {
      onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(true);
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [isMobile]);
  var omitProps = (0, _omit.default)(props, ['className', 'style']);

  if (hide) {
    return null;
  }

  return isMobile ? /*#__PURE__*/_react.default.createElement(_drawer.default, {
    visible: !collapsed,
    placement: "left",
    className: (0, _classnames.default)("".concat(prefixCls, "-drawer-sider"), className),
    onClose: function onClose() {
      return onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(true);
    },
    style: (0, _objectSpread2.default)({
      padding: 0,
      height: '100vh'
    }, style),
    getContainer: getContainer,
    width: siderWidth,
    bodyStyle: {
      height: '100vh',
      padding: 0,
      display: 'flex',
      flexDirection: 'row'
    }
  }, /*#__PURE__*/_react.default.createElement(_SiderMenu.default, (0, _extends2.default)({}, omitProps, {
    className: (0, _classnames.default)("".concat(prefixCls, "-sider"), className),
    collapsed: isMobile ? false : collapsed,
    splitMenus: false
  }))) : /*#__PURE__*/_react.default.createElement(_SiderMenu.default, (0, _extends2.default)({
    className: (0, _classnames.default)("".concat(prefixCls, "-sider"), className)
  }, omitProps, {
    style: style
  }));
};

var _default = SiderMenuWrapper;
exports.default = _default;