@ant-design/pro-components 3.0.2-0 → 3.1.1-0

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

@@ -1,159 +1,163 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../../provider";
-var genSettingDrawerStyle = function genSettingDrawerStyle(token) {
-  return _defineProperty(_defineProperty({}, "".concat(token.componentCls, "-handle"), {
-    position: 'fixed',
-    insetBlockStart: '240px',
-    insetInlineEnd: '0px',
-    zIndex: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '48px',
-    height: '48px',
-    fontSize: '16px',
-    textAlign: 'center',
-    backgroundColor: token.colorPrimary,
-    borderEndStartRadius: token.borderRadiusLG,
-    borderStartStartRadius: token.borderRadiusLG,
-    '-webkit-backdropilter': 'saturate(180%) blur(20px)',
-    backdropFilter: 'saturate(180%) blur(20px)',
-    cursor: 'pointer',
-    pointerEvents: 'auto'
-  }), token.componentCls, {
-    '&-content': {
-      position: 'relative',
-      minHeight: '100%',
-      color: token.colorText
-    },
-    '&-body-title': {
-      marginBlock: token.marginXS,
-      fontSize: '14px',
-      lineHeight: '22px',
-      color: token.colorTextHeading
-    },
-    '&-block-checkbox': {
+const genSettingDrawerStyle = token => {
+  return {
+    [`${token.componentCls}-handle`]: {
+      position: 'fixed',
+      insetBlockStart: '240px',
+      insetInlineEnd: '0px',
+      zIndex: 0,
       display: 'flex',
-      minHeight: 42,
-      gap: token.marginSM,
-      '& &-item': {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '48px',
+      height: '48px',
+      fontSize: '16px',
+      textAlign: 'center',
+      backgroundColor: token.colorPrimary,
+      borderEndStartRadius: token.borderRadiusLG,
+      borderStartStartRadius: token.borderRadiusLG,
+      '-webkit-backdropilter': 'saturate(180%) blur(20px)',
+      backdropFilter: 'saturate(180%) blur(20px)',
+      cursor: 'pointer',
+      pointerEvents: 'auto'
+    },
+    [token.componentCls]: {
+      '&-content': {
         position: 'relative',
-        width: '44px',
-        height: '36px',
-        overflow: 'hidden',
-        borderRadius: '4px',
-        boxShadow: token.boxShadow,
-        cursor: 'pointer',
-        fontSize: 56,
-        lineHeight: '56px',
-        '&::before': {
-          position: 'absolute',
-          insetBlockStart: 0,
-          insetInlineStart: 0,
-          width: '33%',
-          height: '100%',
-          content: "''"
-        },
-        '&::after': {
-          position: 'absolute',
-          insetBlockStart: 0,
-          insetInlineStart: 0,
-          width: '100%',
-          height: '25%',
-          content: "''"
-        },
-        '&-realDark': {
-          backgroundColor: 'rgba(0, 21, 41, 0.85)',
+        minHeight: '100%',
+        color: token.colorText
+      },
+      '&-body-title': {
+        marginBlock: token.marginXS,
+        fontSize: '14px',
+        lineHeight: '22px',
+        color: token.colorTextHeading
+      },
+      '&-block-checkbox': {
+        display: 'flex',
+        minHeight: 42,
+        gap: token.marginSM,
+        '& &-item': {
+          position: 'relative',
+          width: '44px',
+          height: '36px',
+          overflow: 'hidden',
+          borderRadius: '4px',
+          boxShadow: token.boxShadow,
+          cursor: 'pointer',
+          fontSize: 56,
+          lineHeight: '56px',
           '&::before': {
-            backgroundColor: 'rgba(0, 0, 0, 0.65)'
+            position: 'absolute',
+            insetBlockStart: 0,
+            insetInlineStart: 0,
+            width: '33%',
+            height: '100%',
+            content: "''"
           },
           '&::after': {
-            backgroundColor: 'rgba(0, 0, 0, 0.85)'
-          }
-        },
-        '&-light': {
-          backgroundColor: '#fff',
-          '&::before': {
-            backgroundColor: '#fff'
+            position: 'absolute',
+            insetBlockStart: 0,
+            insetInlineStart: 0,
+            width: '100%',
+            height: '25%',
+            content: "''"
           },
-          '&::after': {
-            backgroundColor: '#fff'
-          }
-        },
-        '&-dark,&-side': {
-          backgroundColor: token.colorBgElevated,
-          '&::before': {
-            zIndex: '1',
-            backgroundColor: '#001529'
+          '&-realDark': {
+            backgroundColor: 'rgba(0, 21, 41, 0.85)',
+            '&::before': {
+              backgroundColor: 'rgba(0, 0, 0, 0.65)'
+            },
+            '&::after': {
+              backgroundColor: 'rgba(0, 0, 0, 0.85)'
+            }
           },
-          '&::after': {
-            backgroundColor: token.colorBgContainer
-          }
-        },
-        '&-top': {
-          backgroundColor: token.colorBgElevated,
-          '&::before': {
-            backgroundColor: 'transparent'
+          '&-light': {
+            backgroundColor: '#fff',
+            '&::before': {
+              backgroundColor: '#fff'
+            },
+            '&::after': {
+              backgroundColor: '#fff'
+            }
           },
-          '&::after': {
-            backgroundColor: '#001529'
+          '&-dark,&-side': {
+            backgroundColor: token.colorBgElevated,
+            '&::before': {
+              zIndex: '1',
+              backgroundColor: '#001529'
+            },
+            '&::after': {
+              backgroundColor: token.colorBgContainer
+            }
+          },
+          '&-top': {
+            backgroundColor: token.colorBgElevated,
+            '&::before': {
+              backgroundColor: 'transparent'
+            },
+            '&::after': {
+              backgroundColor: '#001529'
+            }
+          },
+          '&-mix': {
+            backgroundColor: token.colorBgElevated,
+            '&::before': {
+              backgroundColor: token.colorBgContainer
+            },
+            '&::after': {
+              backgroundColor: '#001529'
+            }
           }
         },
-        '&-mix': {
-          backgroundColor: token.colorBgElevated,
-          '&::before': {
-            backgroundColor: token.colorBgContainer
-          },
-          '&::after': {
-            backgroundColor: '#001529'
+        '& &-selectIcon': {
+          position: 'absolute',
+          insetInlineEnd: '6px',
+          bottom: '4px',
+          color: token.colorPrimary,
+          fontWeight: 'bold',
+          fontSize: '14px',
+          pointerEvents: 'none',
+          '.action': {
+            color: token.colorPrimary
           }
+        },
+        '& &-icon': {
+          fontSize: 56,
+          lineHeight: '56px'
         }
       },
-      '& &-selectIcon': {
-        position: 'absolute',
-        insetInlineEnd: '6px',
-        bottom: '4px',
-        color: token.colorPrimary,
-        fontWeight: 'bold',
-        fontSize: '14px',
-        pointerEvents: 'none',
-        '.action': {
-          color: token.colorPrimary
+      '&-theme-color': {
+        marginBlockStart: '16px',
+        overflow: 'hidden',
+        '& &-block': {
+          float: 'left',
+          width: '20px',
+          height: '20px',
+          marginBlockStart: 8,
+          marginInlineEnd: 8,
+          color: '#fff',
+          fontWeight: 'bold',
+          textAlign: 'center',
+          borderRadius: '2px',
+          cursor: 'pointer'
         }
       },
-      '& &-icon': {
-        fontSize: 56,
-        lineHeight: '56px'
-      }
-    },
-    '&-theme-color': {
-      marginBlockStart: '16px',
-      overflow: 'hidden',
-      '& &-block': {
-        float: 'left',
-        width: '20px',
-        height: '20px',
-        marginBlockStart: 8,
-        marginInlineEnd: 8,
-        color: '#fff',
-        fontWeight: 'bold',
-        textAlign: 'center',
-        borderRadius: '2px',
-        cursor: 'pointer'
+      '&-list': {
+        [`li${token.antCls}-list-item`]: {
+          paddingInline: 0,
+          paddingBlock: 8
+        }
       }
-    },
-    '&-list': _defineProperty({}, "li".concat(token.antCls, "-list-item"), {
-      paddingInline: 0,
-      paddingBlock: 8
-    })
-  });
+    }
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ProLayoutSettingDrawer', function (token) {
-    var settingDrawerToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProLayoutSettingDrawer', token => {
+    const settingDrawerToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genSettingDrawerStyle(settingDrawerToken)];
   });
 }

package/es/layout/components/SiderMenu/BaseMenu.d.ts

@@ -15,7 +15,7 @@ export type BaseMenuProps = {
     mode?: MenuMode;
     onCollapse?: (collapsed: boolean) => void;
     openKeys?: WithFalse<string[]> | undefined;
-    handleOpenChange?: (openKeys: string[]) => void;
+    onOpenChange?: (openKeys: string[]) => void;
     iconPrefixes?: string;
     /** 要给菜单的props, 参考antd-menu的属性。https://ant.design/components/menu-cn/ */
     menuProps?: MenuProps;