improve(ui): PageContainer loading

oceanbase · Feb 27, 2024 · 9a01c8d · 9a01c8d
1 parent 6c51412
commit 9a01c8d
Show file tree

Hide file tree

Showing 11 changed files with 170 additions and 18 deletions.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -180,6 +180,7 @@ export default defineConfig({
           children: [
             { title: 'BasicLayout 导航和布局', link: '/biz-components/basic-layout' },
             { title: 'PageContainer 页容器', link: '/biz-components/page-container' },
+            { title: 'PageLoading 页面级加载', link: '/biz-components/page-loading' },
             { title: 'FooterToolbar 底部操作栏', link: '/biz-components/footer-toolbar' },
             { title: 'Login 登录页', link: '/biz-components/login' },
             // { title: 'NavMenu', link: '/biz-components/nav-menu' },

diff --git a/packages/ui/src/PageContainer/demo/basic.tsx b/packages/ui/src/PageContainer/demo/basic.tsx
@@ -25,7 +25,7 @@ export default () => {
   return (
     <PageContainer
       ghost={false}
-      loading={loading}
+      loading={true}
       header={{
         title: '页面标题',
         reload: {

diff --git a/packages/ui/src/PageContainer/demo/complete.tsx b/packages/ui/src/PageContainer/demo/complete.tsx
@@ -103,7 +103,7 @@ export default () => {
   return (
     <PageContainer
       ghost={true}
-      loading={loading}
+      loading={true}
       header={{
         title: '页面标题',
         reload: {

diff --git a/packages/ui/src/PageContainer/index.tsx b/packages/ui/src/PageContainer/index.tsx
@@ -8,9 +8,10 @@ import { PageContainer as AntPageContainer } from '@ant-design/pro-components';
 import classNames from 'classnames';
 import { isObject } from 'lodash';
 import React, { useContext } from 'react';
-import { ConfigProvider, Space, Spin, Tooltip } from '@oceanbase/design';
+import { ConfigProvider, Space, Tooltip } from '@oceanbase/design';
 import LocaleWrapper from '../locale/LocaleWrapper';
 import ItemRender from './ItemRender';
+import PageLoading from '../PageLoading';
 import zhCN from './locale/zh-CN';
 import useStyle from './style';
 
@@ -106,13 +107,7 @@ const PageContainer = ({
       extraContent={extraContent}
       tabList={tabList}
       tabBarExtraContent={tabBarExtraContent}
-      loading={
-        loading === true ? (
-          <Spin size="large" gray={false} className={`${prefixCls}-loading`} />
-        ) : (
-          loading
-        )
-      }
+      loading={loading === true ? <PageLoading matchWrapperHeight={false} /> : loading}
       footerToolBarProps={{
         // render footer under parent instead of body by default
         portalDom: false,

diff --git a/packages/ui/src/PageContainer/style/index.ts b/packages/ui/src/PageContainer/style/index.ts
@@ -54,14 +54,6 @@ export const genPageContainerStyle: GenerateStyle<PageContainerToken> = (
           marginBlockStart: 0,
         },
       },
-      // PageContainer loading
-      [`${componentCls}-loading`]: {
-        position: 'absolute',
-        // 27px is 1/2 of large Spin height
-        top: 'calc(50% - 27px)',
-        // 36px is 1/2 of large Spin width
-        insetInlineStart: 'calc(50% - 36px)',
-      },
       [`${componentCls}-children-container`]: {
         paddingInline: paddingLG,
         paddingBlockStart: 0,

diff --git a/packages/ui/src/PageLoading/demo/basic.tsx b/packages/ui/src/PageLoading/demo/basic.tsx
@@ -0,0 +1,9 @@
+/**
+ * iframe: 400
+ */
+import React from 'react';
+import { PageLoading } from '@oceanbase/ui';
+
+export default () => {
+  return <PageLoading />;
+};
diff --git a/packages/ui/src/PageLoading/demo/matchWrapperHeight.tsx b/packages/ui/src/PageLoading/demo/matchWrapperHeight.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { PageLoading } from '@oceanbase/ui';
+import { Card } from '@oceanbase/design';
+
+export default () => {
+  return (
+    <Card
+      title="Card title"
+      bodyStyle={{
+        height: 400,
+      }}
+    >
+      <PageLoading matchWrapperHeight={true} />
+    </Card>
+  );
+};
diff --git a/packages/ui/src/PageLoading/demo/with-page-container.tsx b/packages/ui/src/PageLoading/demo/with-page-container.tsx
@@ -0,0 +1,67 @@
+/**
+ * iframe: 600
+ */
+import React from 'react';
+import { Button, Dropdown } from '@oceanbase/design';
+import { PageContainer } from '@oceanbase/ui';
+import { EllipsisOutlined } from '@oceanbase/icons';
+
+export default () => {
+  const loading = true;
+  return (
+    <PageContainer
+      ghost={false}
+      loading={loading}
+      header={{
+        title: '页面标题',
+        reload: {
+          spin: loading,
+        },
+        breadcrumb: {
+          items: [
+            {
+              href: '',
+              title: '一级页面',
+            },
+            {
+              href: '',
+              title: '二级页面',
+            },
+            {
+              title: '当前页面',
+            },
+          ],
+        },
+        extra: [
+          <Button key="1">次要按钮</Button>,
+          <Button key="2" type="primary">
+            主要按钮
+          </Button>,
+          <Dropdown
+            menu={{
+              items: [
+                {
+                  label: '下拉菜单',
+                  key: '1',
+                },
+                {
+                  label: '下拉菜单2',
+                  key: '2',
+                },
+                {
+                  label: '下拉菜单3',
+                  key: '3',
+                },
+              ],
+            }}
+          >
+            <Button key="3" style={{ padding: '0 8px' }}>
+              <EllipsisOutlined />
+            </Button>
+          </Dropdown>,
+        ],
+      }}
+      footer={[<Button>重置</Button>, <Button type="primary">提交</Button>]}
+    />
+  );
+};
diff --git a/packages/ui/src/PageLoading/index.md b/packages/ui/src/PageLoading/index.md
@@ -0,0 +1,22 @@
+---
+title: PageLoading 页面级加载
+nav:
+  title: 业务组件
+  path: /biz-components
+---
+
+## 代码演示
+
+<code src="./demo/basic.tsx" title="基本" description="常用于 `dynamicImport` 的加载动画"></code>
+
+<code src="./demo/with-page-container.tsx" title="页容器加载" description="已内置到 PageContainer，通过 loading 属性控制即可"></code>
+
+<code src="./demo/matchWrapperHeight.tsx" title="固定高度的容器内加载"></code>
+
+## API
+
+| 参数               | 说明             | 类型             | 默认值 | 版本 |
+| :----------------- | :--------------- | :--------------- | :----- | :--- |
+| matchWrapperHeight | 是否匹配容器高度 | boolean \| false | -      | -    |
+
+- 更多 API 详见 [Spin 文档](/components/spin#api)
diff --git a/packages/ui/src/PageLoading/index.tsx b/packages/ui/src/PageLoading/index.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Spin } from '@oceanbase/design';
+import type { SpinProps } from '@oceanbase/design';
+
+export interface PageLoadingProps extends SpinProps {
+  matchWrapperHeight?: boolean;
+}
+
+const PageLoading: React.FC<PageLoadingProps> = ({
+  prefixCls: customizePrefixCls,
+  style,
+  matchWrapperHeight = false,
+  ...restProps
+}) => {
+  const spinElement = (
+    <Spin
+      size="large"
+      gray={false}
+      style={{
+        position: 'absolute',
+        // horizontal align
+        // 36px is 1/2 of large Spin width
+        insetInlineStart: 'calc(50% - 36px)',
+        // vertical align
+        // 27px is 1/2 of large Spin height
+        top: 'calc(50% - 27px)',
+        ...style,
+      }}
+      {...restProps}
+    />
+  );
+
+  return matchWrapperHeight ? (
+    <div
+      style={{
+        height: '100%',
+        position: 'relative',
+      }}
+    >
+      {spinElement}
+    </div>
+  ) : (
+    spinElement
+  );
+};
+
+export default PageLoading;
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -55,6 +55,9 @@ export type { NavMenuProps, NavMenuItem } from './NavMenu';
 export { default as PageContainer } from './PageContainer';
 export type { PageContainerProps } from './PageContainer';
 
+export { default as PageLoading } from './PageLoading';
+export type { PageLoadingProps } from './PageLoading';
+
 export { default as FooterToolbar } from './FooterToolbar';
 export type { FooterToolbarProps } from './FooterToolbar';