@ant-design/pro-layout/es/components/SiderMenu/SiderMenu.js

@ant-design/pro-layout

import "antd/es/menu/style";
import _Menu from "antd/es/menu";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import "antd/es/layout/style";
import _Layout from "antd/es/layout";
import React from 'react';
import classNames from 'classnames';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import './index.less';
import BaseMenu from './BaseMenu';
import MenuCounter from './Counter';
var Sider = _Layout.Sider;
export var defaultRenderLogo = function defaultRenderLogo(logo) {
  if (typeof logo === 'string') {
    return /*#__PURE__*/React.createElement("img", {
      src: logo,
      alt: "logo"
    });
  }

  if (typeof logo === 'function') {
    return logo();
  }

  return logo;
};
export var defaultRenderLogoAndTitle = function defaultRenderLogoAndTitle(props) {
  var renderKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'menuHeaderRender';
  var logo = props.logo,
      title = props.title,
      layout = props.layout;
  var renderFunction = props[renderKey || ''];

  if (renderFunction === false) {
    return null;
  }

  var logoDom = defaultRenderLogo(logo);
  var titleDom = /*#__PURE__*/React.createElement("h1", null, title !== null && title !== void 0 ? title : 'Ant Design Pro');

  if (renderFunction) {
    // when collapsed, no render title
    return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
  }

  if (layout === 'mix' && renderKey === 'menuHeaderRender') {
    return null;
  }

  return /*#__PURE__*/React.createElement("a", null, logoDom, props.collapsed ? null : titleDom);
};
export var defaultRenderCollapsedButton = function defaultRenderCollapsedButton(collapsed) {
  return collapsed ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null);
};

var SiderMenu = function SiderMenu(props) {
  var _classNames;

  var collapsed = props.collapsed,
      fixSiderbar = props.fixSiderbar,
      menuFooterRender = props.menuFooterRender,
      _onCollapse = props.onCollapse,
      theme = props.theme,
      siderWidth = props.siderWidth,
      isMobile = props.isMobile,
      onMenuHeaderClick = props.onMenuHeaderClick,
      _props$breakpoint = props.breakpoint,
      breakpoint = _props$breakpoint === void 0 ? 'lg' : _props$breakpoint,
      style = props.style,
      layout = props.layout,
      _props$menuExtraRende = props.menuExtraRender,
      menuExtraRender = _props$menuExtraRende === void 0 ? false : _props$menuExtraRende,
      _props$collapsedButto = props.collapsedButtonRender,
      collapsedButtonRender = _props$collapsedButto === void 0 ? defaultRenderCollapsedButton : _props$collapsedButto,
      links = props.links,
      menuContentRender = props.menuContentRender,
      prefixCls = props.prefixCls,
      onOpenChange = props.onOpenChange,
      headerHeight = props.headerHeight,
      logoStyle = props.logoStyle;
  var baseClassName = "".concat(prefixCls, "-sider");

  var _MenuCounter$useConta = MenuCounter.useContainer(),
      flatMenuKeys = _MenuCounter$useConta.flatMenuKeys;

  var siderClassName = classNames("".concat(baseClassName), (_classNames = {}, _defineProperty(_classNames, "".concat(baseClassName, "-fixed"), fixSiderbar), _defineProperty(_classNames, "".concat(baseClassName, "-layout-").concat(layout), layout && !isMobile), _defineProperty(_classNames, "".concat(baseClassName, "-light"), theme !== 'dark'), _classNames));
  var headerDom = defaultRenderLogoAndTitle(props);
  var extraDom = menuExtraRender && menuExtraRender(props);
  var menuDom = menuContentRender !== false && flatMenuKeys && /*#__PURE__*/React.createElement(BaseMenu, _extends({}, props, {
    key: "base-menu",
    mode: "inline",
    handleOpenChange: onOpenChange,
    style: {
      width: '100%'
    },
    className: "".concat(baseClassName, "-menu")
  }));
  var menuRenderDom = menuContentRender ? menuContentRender(props, menuDom) : menuDom;
  var linksMenuItems = (links || []).map(function (node, index) {
    return {
      className: "".concat(baseClassName, "-link"),
      label: node,
      key: index
    };
  });

  if (collapsedButtonRender && !isMobile) {
    linksMenuItems.push({
      className: "".concat(baseClassName, "-collapsed-button"),
      //@ts-ignore
      title: false,
      key: 'collapsed',
      onClick: function onClick() {
        if (_onCollapse) {
          _onCollapse(!collapsed);
        }
      },
      label: collapsedButtonRender(collapsed)
    });
  }

  return /*#__PURE__*/React.createElement(React.Fragment, null, fixSiderbar && /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      width: collapsed ? 48 : siderWidth,
      overflow: 'hidden',
      flex: "0 0 ".concat(collapsed ? 48 : siderWidth, "px"),
      maxWidth: collapsed ? 48 : siderWidth,
      minWidth: collapsed ? 48 : siderWidth,
      transition: "background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
    }, style)
  }), /*#__PURE__*/React.createElement(Sider, {
    collapsible: true,
    trigger: null,
    collapsed: collapsed,
    breakpoint: breakpoint === false ? undefined : breakpoint,
    onCollapse: function onCollapse(collapse) {
      if (isMobile) return;
      _onCollapse === null || _onCollapse === void 0 ? void 0 : _onCollapse(collapse);
    },
    collapsedWidth: 48,
    style: _objectSpread({
      overflow: 'hidden',
      paddingTop: layout === 'mix' && !isMobile ? headerHeight : undefined
    }, style),
    width: siderWidth,
    theme: theme,
    className: siderClassName
  }, headerDom && /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(baseClassName, "-logo"), _defineProperty({}, "".concat(baseClassName, "-collapsed"), collapsed)),
    onClick: layout !== 'mix' ? onMenuHeaderClick : undefined,
    id: "logo",
    style: logoStyle
  }, headerDom), extraDom && /*#__PURE__*/React.createElement("div", {
    className: "".concat(baseClassName, "-extra ").concat(!headerDom && "".concat(baseClassName, "-extra-no-logo"))
  }, extraDom), /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1,
      overflowY: 'auto',
      overflowX: 'hidden'
    }
  }, menuRenderDom), /*#__PURE__*/React.createElement("div", {
    className: "".concat(baseClassName, "-links")
  }, /*#__PURE__*/React.createElement(_Menu, {
    theme: theme,
    inlineIndent: 16,
    className: "".concat(baseClassName, "-link-menu"),
    selectedKeys: [],
    openKeys: [],
    mode: "inline",
    items: linksMenuItems
  })), menuFooterRender && /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(baseClassName, "-footer"), _defineProperty({}, "".concat(baseClassName, "-footer-collapsed"), !collapsed))
  }, menuFooterRender(props))));
};

export default SiderMenu;