Merge pull request #191 from oceanbase/dengfuping-dev

fix(ui): reload should work when subTitle is null
oceanbase · Oct 18, 2023 · fa73c36 · fa73c36
2 parents 45db855 + 5f4e185
commit fa73c36
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/packages/ui/src/PageContainer/demo/basic.tsx b/packages/ui/src/PageContainer/demo/basic.tsx
@@ -1,17 +1,37 @@
 /**
  * iframe: 600
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { EllipsisOutlined } from '@oceanbase/icons';
-import { Button, Descriptions, Dropdown, Radio } from '@oceanbase/design';
+import { Button, Descriptions, Dropdown, Radio, message } from '@oceanbase/design';
 import { PageContainer } from '@oceanbase/ui';
 
 export default () => {
+  const [loading, setLoading] = useState(false);
+
+  const mockRequest = () => {
+    const promise = new Promise<void>(resolve => {
+      setTimeout(() => {
+        resolve();
+      }, 1000);
+    });
+    setLoading(true);
+    promise.then(() => {
+      setLoading(false);
+      message.success('刷新成功');
+    });
+  };
   return (
     <PageContainer
       ghost={false}
       header={{
         title: '页面标题',
+        reload: {
+          spin: loading,
+          onClick: () => {
+            mockRequest();
+          },
+        },
         breadcrumb: {
           items: [
             {

diff --git a/packages/ui/src/PageContainer/demo/header-less.tsx b/packages/ui/src/PageContainer/demo/header-less.tsx
@@ -84,7 +84,7 @@ export default () => {
     },
   ];
   return (
-    <PageContainer ghost={true} header={{}}>
+    <PageContainer ghost={true}>
       <Card
         bordered={false}
         tabList={[

diff --git a/packages/ui/src/PageContainer/index.tsx b/packages/ui/src/PageContainer/index.tsx
@@ -55,7 +55,7 @@ const PageContainer = ({
     reloadProps.className
   );
 
-  const newSubTitle = subTitle && (
+  const newSubTitle = (reload || subTitle) && (
     <Space size={12}>
       {reload && (
         <Tooltip title={locale.reload}>

diff --git a/packages/ui/src/PageContainer/style/index.ts b/packages/ui/src/PageContainer/style/index.ts
@@ -31,7 +31,8 @@ export const genPageContainerStyle: GenerateStyle<PageContainerToken> = (
       },
       [`${antCls}-page-header`]: {
         [`${antCls}-page-header-breadcrumb`]: {
-          marginBottom: 6,
+          // overwritten pro-components style
+          paddingBlockStart: 0,
         },
         [`${antCls}-page-header-heading-title`]: {
           fontSize: fontSizeHeading3,
@@ -62,8 +63,10 @@ export const genPageContainerStyle: GenerateStyle<PageContainerToken> = (
       },
       // 减小内容区左右两侧间距
       [`${componentCls}-warp-page-header`]: {
-        paddingInline: `${paddingLG}px !important`,
-        paddingBlock: `${padding}px !important`,
+        paddingInlineStart: paddingLG,
+        paddingInlineEnd: paddingLG,
+        paddingBlockStart: padding,
+        paddingBlockEnd: padding,
       },
       [`${componentCls}-children-container`]: {
         paddingInline: paddingLG,