@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.3

package/es/layout/components/SiderMenu/index.js

@@ -1,111 +1,82 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
-// src/layout/components/SiderMenu/index.tsx
-import { ConfigProvider, Drawer } from "antd";
-import classNames from "classnames";
-import omit from "rc-util/lib/omit";
-import React, { useContext, useEffect } from "react";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { omit } from '@rc-component/util';
+import { ConfigProvider, Drawer } from 'antd';
+import classNames from 'classnames';
+import React, { useContext, useEffect } from 'react';
 import { ProProvider } from "../../../provider";
 import { SiderMenu } from "./SiderMenu";
 import { useStyle } from "./style/index";
-var SiderMenuWrapper = (props) => {
-  var _a, _b;
-  const {
-    isMobile,
-    siderWidth,
-    collapsed,
-    onCollapse,
-    style,
-    className,
-    hide,
-    prefixCls,
-    getContainer
-  } = props;
-  const { token } = useContext(ProProvider);
-  useEffect(() => {
+import { jsx as _jsx } from "react/jsx-runtime";
+var SiderMenuWrapper = function SiderMenuWrapper(props) {
+  var _token$layout;
+  var isMobile = props.isMobile,
+    siderWidth = props.siderWidth,
+    collapsed = props.collapsed,
+    onCollapse = props.onCollapse,
+    style = props.style,
+    className = props.className,
+    hide = props.hide,
+    prefixCls = props.prefixCls,
+    getContainer = props.getContainer;
+  var _useContext = useContext(ProProvider),
+    token = _useContext.token;
+  useEffect(function () {
     if (isMobile === true) {
-      onCollapse == null ? void 0 : onCollapse(true);
+      onCollapse === null || onCollapse === void 0 || onCollapse(true);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMobile]);
-  const omitProps = omit(props, ["className", "style"]);
-  const { direction } = React.useContext(ConfigProvider.ConfigContext);
-  const { wrapSSR, hashId } = useStyle(`${prefixCls}-sider`, {
-    proLayoutCollapsedWidth: 64
-  });
-  const siderClassName = classNames(`${prefixCls}-sider`, className, hashId);
+  var omitProps = omit(props, ['className', 'style']);
+  var _React$useContext = React.useContext(ConfigProvider.ConfigContext),
+    direction = _React$useContext.direction;
+  var _useStyle = useStyle("".concat(prefixCls, "-sider"), {
+      proLayoutCollapsedWidth: 64
+    }),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var siderClassName = classNames("".concat(prefixCls, "-sider"), className, hashId);
   if (hide) {
     return null;
   }
-  return wrapSSR(
-    isMobile ? /* @__PURE__ */ React.createElement(
-      Drawer,
-      {
-        placement: direction === "rtl" ? "right" : "left",
-        className: classNames(`${prefixCls}-drawer-sider`, className),
-        open: !collapsed,
-        afterOpenChange: () => {
-          onCollapse == null ? void 0 : onCollapse(true);
-        },
-        style: __spreadValues({
-          padding: 0,
-          height: "100vh"
-        }, style),
-        onClose: () => {
-          onCollapse == null ? void 0 : onCollapse(true);
-        },
-        maskClosable: true,
-        closable: false,
-        getContainer: getContainer || false,
-        width: siderWidth,
-        styles: {
-          body: {
-            height: "100vh",
-            padding: 0,
-            display: "flex",
-            flexDirection: "row",
-            backgroundColor: (_b = (_a = token.layout) == null ? void 0 : _a.sider) == null ? void 0 : _b.colorMenuBackground
-          }
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        SiderMenu,
-        __spreadProps(__spreadValues({}, omitProps), {
-          isMobile: true,
-          className: siderClassName,
-          collapsed: isMobile ? false : collapsed,
-          splitMenus: false,
-          originCollapsed: collapsed
-        })
-      )
-    ) : /* @__PURE__ */ React.createElement(
-      SiderMenu,
-      __spreadProps(__spreadValues({
-        className: siderClassName,
-        originCollapsed: collapsed
-      }, omitProps), {
-        style
-      })
-    )
-  );
-};
-export {
-  SiderMenuWrapper as SiderMenu
+  return wrapSSR(isMobile ? /*#__PURE__*/_jsx(Drawer, {
+    placement: direction === 'rtl' ? 'right' : 'left',
+    className: classNames("".concat(prefixCls, "-drawer-sider"), className),
+    open: !collapsed,
+    afterOpenChange: function afterOpenChange() {
+      onCollapse === null || onCollapse === void 0 || onCollapse(true);
+    },
+    style: _objectSpread({
+      padding: 0,
+      height: '100vh'
+    }, style),
+    onClose: function onClose() {
+      onCollapse === null || onCollapse === void 0 || onCollapse(true);
+    },
+    maskClosable: true,
+    closable: false,
+    getContainer: getContainer || false,
+    width: siderWidth,
+    styles: {
+      body: {
+        height: '100vh',
+        padding: 0,
+        display: 'flex',
+        flexDirection: 'row',
+        backgroundColor: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.sider) === null || _token$layout === void 0 ? void 0 : _token$layout.colorMenuBackground
+      }
+    },
+    children: /*#__PURE__*/_jsx(SiderMenu, _objectSpread(_objectSpread({}, omitProps), {}, {
+      isMobile: true,
+      className: siderClassName,
+      collapsed: isMobile ? false : collapsed,
+      splitMenus: false,
+      originCollapsed: collapsed
+    }))
+  }) : /*#__PURE__*/_jsx(SiderMenu, _objectSpread(_objectSpread({
+    className: siderClassName,
+    originCollapsed: collapsed
+  }, omitProps), {}, {
+    style: style
+  })));
 };
+export { SiderMenuWrapper as SiderMenu };

package/es/layout/components/SiderMenu/style/index.js

@@ -1,224 +1,185 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
-// src/layout/components/SiderMenu/style/index.ts
-import { Keyframes } from "@ant-design/cssinjs";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { Keyframes } from '@ant-design/cssinjs';
 import { useStyle as useAntdStyle } from "../../../../provider";
-var proLayoutTitleHide = new Keyframes("antBadgeLoadingCircle", {
-  "0%": { display: "none", opacity: 0, overflow: "hidden" },
-  "80%": {
-    overflow: "hidden"
+export var proLayoutTitleHide = new Keyframes('antBadgeLoadingCircle', {
+  '0%': {
+    display: 'none',
+    opacity: 0,
+    overflow: 'hidden'
+  },
+  '80%': {
+    overflow: 'hidden'
   },
-  "100%": {
-    display: "unset",
+  '100%': {
+    display: 'unset',
     opacity: 1
   }
 });
-var genSiderMenuStyle = (token) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-  return {
-    [`${token.proComponentsCls}-layout`]: {
-      [`${token.antCls}-layout-sider${token.componentCls}`]: {
-        background: ((_b = (_a = token.layout) == null ? void 0 : _a.sider) == null ? void 0 : _b.colorMenuBackground) || "transparent"
+var genSiderMenuStyle = function genSiderMenuStyle(token) {
+  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5, _token$layout6, _token$layout7, _token$layout8, _token$layout9, _token$layout10, _token$layout11, _token$layout12;
+  return _defineProperty({}, "".concat(token.proComponentsCls, "-layout"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(token.antCls, "-layout-sider").concat(token.componentCls), {
+    background: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.sider) === null || _token$layout === void 0 ? void 0 : _token$layout.colorMenuBackground) || 'transparent'
+  }), token.componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: 'relative',
+    boxSizing: 'border-box',
+    '&-menu': {
+      position: 'relative',
+      zIndex: 10,
+      minHeight: '100%'
+    }
+  }, "& ".concat(token.antCls, "-layout-sider-children"), {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    paddingInline: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.sider) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.paddingInlineLayoutMenu,
+    paddingBlock: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.sider) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.paddingBlockLayoutMenu,
+    borderInlineEnd: "1px solid ".concat(token.colorSplit),
+    marginInlineEnd: -1
+  }), "".concat(token.antCls, "-menu"), _defineProperty(_defineProperty({}, "".concat(token.antCls, "-menu-item-group-title"), {
+    fontSize: token.fontSizeSM,
+    paddingBottom: 4
+  }), "".concat(token.antCls, "-menu-item:not(").concat(token.antCls, "-menu-item-selected):hover"), {
+    color: (_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.sider) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorTextMenuItemHover
+  })), '&-logo', {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingInline: 12,
+    paddingBlock: 16,
+    color: (_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.sider) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.colorTextMenu,
+    cursor: 'pointer',
+    borderBlockEnd: "1px solid ".concat((_token$layout6 = token.layout) === null || _token$layout6 === void 0 || (_token$layout6 = _token$layout6.sider) === null || _token$layout6 === void 0 ? void 0 : _token$layout6.colorMenuItemDivider),
+    '> a': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: 22,
+      fontSize: 22,
+      '> img': {
+        display: 'inline-block',
+        height: 22,
+        verticalAlign: 'middle'
       },
-      [token.componentCls]: {
-        position: "relative",
-        boxSizing: "border-box",
-        "&-menu": {
-          position: "relative",
-          zIndex: 10,
-          minHeight: "100%"
-        },
-        [`& ${token.antCls}-layout-sider-children`]: {
-          position: "relative",
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
-          paddingInline: (_d = (_c = token.layout) == null ? void 0 : _c.sider) == null ? void 0 : _d.paddingInlineLayoutMenu,
-          paddingBlock: (_f = (_e = token.layout) == null ? void 0 : _e.sider) == null ? void 0 : _f.paddingBlockLayoutMenu,
-          borderInlineEnd: `1px solid ${token.colorSplit}`,
-          marginInlineEnd: -1
-        },
-        [`${token.antCls}-menu`]: {
-          [`${token.antCls}-menu-item-group-title`]: {
-            fontSize: token.fontSizeSM,
-            paddingBottom: 4
-          },
-          [`${token.antCls}-menu-item:not(${token.antCls}-menu-item-selected):hover`]: {
-            color: (_h = (_g = token.layout) == null ? void 0 : _g.sider) == null ? void 0 : _h.colorTextMenuItemHover
-          }
-        },
-        "&-logo": {
-          position: "relative",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          paddingInline: 12,
-          paddingBlock: 16,
-          color: (_j = (_i = token.layout) == null ? void 0 : _i.sider) == null ? void 0 : _j.colorTextMenu,
-          cursor: "pointer",
-          borderBlockEnd: `1px solid ${(_l = (_k = token.layout) == null ? void 0 : _k.sider) == null ? void 0 : _l.colorMenuItemDivider}`,
-          "> a": {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            minHeight: 22,
-            fontSize: 22,
-            "> img": {
-              display: "inline-block",
-              height: 22,
-              verticalAlign: "middle"
-            },
-            "> h1": {
-              display: "inline-block",
-              height: 22,
-              marginBlock: 0,
-              marginInlineEnd: 0,
-              marginInlineStart: 6,
-              color: (_n = (_m = token.layout) == null ? void 0 : _m.sider) == null ? void 0 : _n.colorTextMenuTitle,
-              animationName: proLayoutTitleHide,
-              animationDuration: ".4s",
-              animationTimingFunction: "ease",
-              fontWeight: 600,
-              fontSize: 16,
-              lineHeight: "22px",
-              verticalAlign: "middle"
-            }
-          },
-          "&-collapsed": {
-            flexDirection: "column-reverse",
-            margin: 0,
-            padding: 12,
-            [`${token.proComponentsCls}-layout-apps-icon`]: {
-              marginBlockEnd: 8,
-              fontSize: 16,
-              transition: "font-size 0.2s ease-in-out,color 0.2s ease-in-out"
-            }
-          }
-        },
-        "&-actions": {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          marginBlock: 4,
-          marginInline: 0,
-          color: (_p = (_o = token.layout) == null ? void 0 : _o.sider) == null ? void 0 : _p.colorTextMenu,
-          "&-collapsed": {
-            flexDirection: "column-reverse",
-            paddingBlock: 0,
-            paddingInline: 8,
-            fontSize: 16,
-            transition: "font-size 0.3s ease-in-out"
-          },
-          "&-list": {
-            color: (_r = (_q = token.layout) == null ? void 0 : _q.sider) == null ? void 0 : _r.colorTextMenuSecondary,
-            "&-collapsed": {
-              marginBlockEnd: 8,
-              animationName: "none"
-            },
-            "&-item": {
-              paddingInline: 6,
-              paddingBlock: 6,
-              lineHeight: "16px",
-              fontSize: 16,
-              cursor: "pointer",
-              borderRadius: token.borderRadius,
-              "&:hover": {
-                background: token.colorBgTextHover
-              }
-            }
-          },
-          "&-avatar": {
-            fontSize: 14,
-            paddingInline: 8,
-            paddingBlock: 8,
-            display: "flex",
-            alignItems: "center",
-            gap: token.marginXS,
-            borderRadius: token.borderRadius,
-            "& *": {
-              cursor: "pointer"
-            },
-            "&:hover": {
-              background: token.colorBgTextHover
-            }
-          }
-        },
-        "&-hide-menu-collapsed": {
-          insetInlineStart: `-${token.proLayoutCollapsedWidth - 12}px`,
-          position: "absolute"
-        },
-        "&-extra": {
-          marginBlockEnd: 16,
-          marginBlock: 0,
-          marginInline: 16,
-          "&-no-logo": {
-            marginBlockStart: 16
-          }
-        },
-        "&-links": {
-          width: "100%",
-          ul: {
-            height: "auto"
-          }
-        },
-        "&-link-menu": {
-          border: "none",
-          boxShadow: "none",
-          background: "transparent"
-        },
-        "&-footer": {
-          color: (_t = (_s = token.layout) == null ? void 0 : _s.sider) == null ? void 0 : _t.colorTextMenuSecondary,
-          paddingBlockEnd: 16,
-          fontSize: token.fontSize,
-          animationName: proLayoutTitleHide,
-          animationDuration: ".4s",
-          animationTimingFunction: "ease"
-        }
+      '> h1': {
+        display: 'inline-block',
+        height: 22,
+        marginBlock: 0,
+        marginInlineEnd: 0,
+        marginInlineStart: 6,
+        color: (_token$layout7 = token.layout) === null || _token$layout7 === void 0 || (_token$layout7 = _token$layout7.sider) === null || _token$layout7 === void 0 ? void 0 : _token$layout7.colorTextMenuTitle,
+        animationName: proLayoutTitleHide,
+        animationDuration: '.4s',
+        animationTimingFunction: 'ease',
+        fontWeight: 600,
+        fontSize: 16,
+        lineHeight: '22px',
+        verticalAlign: 'middle'
+      }
+    },
+    '&-collapsed': _defineProperty({
+      flexDirection: 'column-reverse',
+      margin: 0,
+      padding: 12
+    }, "".concat(token.proComponentsCls, "-layout-apps-icon"), {
+      marginBlockEnd: 8,
+      fontSize: 16,
+      transition: 'font-size 0.2s ease-in-out,color 0.2s ease-in-out'
+    })
+  }), '&-actions', {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBlock: 4,
+    marginInline: 0,
+    color: (_token$layout8 = token.layout) === null || _token$layout8 === void 0 || (_token$layout8 = _token$layout8.sider) === null || _token$layout8 === void 0 ? void 0 : _token$layout8.colorTextMenu,
+    '&-collapsed': {
+      flexDirection: 'column-reverse',
+      paddingBlock: 0,
+      paddingInline: 8,
+      fontSize: 16,
+      transition: 'font-size 0.3s ease-in-out'
+    },
+    '&-list': {
+      color: (_token$layout9 = token.layout) === null || _token$layout9 === void 0 || (_token$layout9 = _token$layout9.sider) === null || _token$layout9 === void 0 ? void 0 : _token$layout9.colorTextMenuSecondary,
+      '&-collapsed': {
+        marginBlockEnd: 8,
+        animationName: 'none'
       },
-      [`${token.componentCls}${token.componentCls}-fixed`]: {
-        position: "fixed",
-        insetBlockStart: 0,
-        insetInlineStart: 0,
-        zIndex: "100",
-        height: "100%",
-        "&-mix": {
-          height: `calc(100% - ${((_v = (_u = token.layout) == null ? void 0 : _u.header) == null ? void 0 : _v.heightLayoutHeader) || 56}px)`,
-          insetBlockStart: `${((_x = (_w = token.layout) == null ? void 0 : _w.header) == null ? void 0 : _x.heightLayoutHeader) || 56}px`
+      '&-item': {
+        paddingInline: 6,
+        paddingBlock: 6,
+        lineHeight: '16px',
+        fontSize: 16,
+        cursor: 'pointer',
+        borderRadius: token.borderRadius,
+        '&:hover': {
+          background: token.colorBgTextHover
         }
       }
+    },
+    '&-avatar': {
+      fontSize: 14,
+      paddingInline: 8,
+      paddingBlock: 8,
+      display: 'flex',
+      alignItems: 'center',
+      gap: token.marginXS,
+      borderRadius: token.borderRadius,
+      '& *': {
+        cursor: 'pointer'
+      },
+      '&:hover': {
+        background: token.colorBgTextHover
+      }
+    }
+  }), '&-hide-menu-collapsed', {
+    insetInlineStart: "-".concat(token.proLayoutCollapsedWidth - 12, "px"),
+    position: 'absolute'
+  }), '&-extra', {
+    marginBlockEnd: 16,
+    marginBlock: 0,
+    marginInline: 16,
+    '&-no-logo': {
+      marginBlockStart: 16
     }
-  };
+  }), '&-links', {
+    width: '100%',
+    ul: {
+      height: 'auto'
+    }
+  }), '&-link-menu', {
+    border: 'none',
+    boxShadow: 'none',
+    background: 'transparent'
+  }), '&-footer', {
+    color: (_token$layout10 = token.layout) === null || _token$layout10 === void 0 || (_token$layout10 = _token$layout10.sider) === null || _token$layout10 === void 0 ? void 0 : _token$layout10.colorTextMenuSecondary,
+    paddingBlockEnd: 16,
+    fontSize: token.fontSize,
+    animationName: proLayoutTitleHide,
+    animationDuration: '.4s',
+    animationTimingFunction: 'ease'
+  })), "".concat(token.componentCls).concat(token.componentCls, "-fixed"), {
+    position: 'fixed',
+    insetBlockStart: 0,
+    insetInlineStart: 0,
+    zIndex: '100',
+    height: '100%',
+    '&-mix': {
+      height: "calc(100% - ".concat(((_token$layout11 = token.layout) === null || _token$layout11 === void 0 || (_token$layout11 = _token$layout11.header) === null || _token$layout11 === void 0 ? void 0 : _token$layout11.heightLayoutHeader) || 56, "px)"),
+      insetBlockStart: "".concat(((_token$layout12 = token.layout) === null || _token$layout12 === void 0 || (_token$layout12 = _token$layout12.header) === null || _token$layout12 === void 0 ? void 0 : _token$layout12.heightLayoutHeader) || 56, "px")
+    }
+  }));
 };
-function useStyle(prefixCls, {
-  proLayoutCollapsedWidth
-}) {
-  return useAntdStyle("ProLayoutSiderMenu", (token) => {
-    const siderMenuToken = __spreadProps(__spreadValues({}, token), {
-      componentCls: `.${prefixCls}`,
-      proLayoutCollapsedWidth
+export function useStyle(prefixCls, _ref2) {
+  var proLayoutCollapsedWidth = _ref2.proLayoutCollapsedWidth;
+  return useAntdStyle('ProLayoutSiderMenu', function (token) {
+    var siderMenuToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls),
+      proLayoutCollapsedWidth: proLayoutCollapsedWidth
     });
     return [genSiderMenuStyle(siderMenuToken)];
   });
-}
-export {
-  proLayoutTitleHide,
-  useStyle
-};
+}