Merge pull request #194 from oceanbase/dengfuping-dev

improve(ui): PageContainer footer bar width adapt to sider width of BasicLayout
oceanbase · Oct 19, 2023 · bc20fcb · bc20fcb
2 parents 5818e5f + 13f0683
commit bc20fcb
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/packages/ui/src/BasicLayout/index.tsx b/packages/ui/src/BasicLayout/index.tsx
@@ -292,7 +292,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = ({
   let siderWidth = 0;
   // 根据菜单项的配置计算侧边栏的宽度
   if (subSideMenus && menus) {
-    siderWidth = collapsed ? 104 : 192;
+    siderWidth = collapsed ? 52 * 2 : 208;
   } else if (subSideMenus && !menus) {
     siderWidth = 52;
   } else if (!subSideMenus && menus) {
@@ -307,6 +307,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = ({
       <Layout
         className={classNames(prefix, className, basicLayoutCls, {
           [`${prefix}-with-banner`]: banner,
+          [`${prefixCls}-sider-${siderWidth}`]: true,
         })}
         {...restProps}
       >

diff --git a/packages/ui/src/BasicLayout/style/index.ts b/packages/ui/src/BasicLayout/style/index.ts
@@ -7,7 +7,19 @@ export type BasicLayoutToken = FullToken<any>;
 export const genBasicLayoutStyle: GenerateStyle<BasicLayoutToken> = (
   token: BasicLayoutToken
 ): CSSObject => {
-  const { componentCls, proComponentsCls } = token;
+  const { componentCls, proComponentsCls, motionDurationSlow } = token;
+  const siderWidthList = [0, 52, 52 * 2, 192, 208];
+
+  const footerBarStyle: CSSObject = {};
+  siderWidthList.forEach(width => {
+    footerBarStyle[`${componentCls}${componentCls}-sider-${width}`] = {
+      [`${proComponentsCls}-footer-bar`]: {
+        // footer bar width adapt to sider width of BasicLayout
+        width: width === 0 ? '100%' : `calc(100% - ${width}px - 24px)`,
+        transition: `width ${motionDurationSlow}`,
+      },
+    };
+  });
 
   return {
     [`${componentCls}`]: {
@@ -16,10 +28,8 @@ export const genBasicLayoutStyle: GenerateStyle<BasicLayoutToken> = (
         // 48px is the height of BasicLayout header
         minHeight: 'calc(100vh - 48px)',
       },
-      [`${proComponentsCls}-footer-bar`]: {
-        width: `calc(100% - 192px - 24px)`,
-      },
     },
+    ...footerBarStyle,
   };
 };
 

diff --git a/packages/ui/src/PageContainer/demo/empty.tsx b/packages/ui/src/PageContainer/demo/empty.tsx
@@ -11,6 +11,7 @@ export default () => {
       header={{
         title: '总览',
       }}
+      footer={[<a>111</a>]}
     >
       <Card
         bordered={false}