✨ feat: 新增 loading 状态控制 props

Author: arvinxx

docs/components/common/examples/PageLoading/Fullscreen.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Button, Card } from 'antd';
+
+import PageLoading from '@arvinxu/page-loading';
+
+const FullScreenLoading = () => {
+  const [fullscreen, setFullScreen] = useState(false);
+
+  return (
+    <div>
+      {fullscreen ? (
+        <Button style={{ zIndex: 100000 }} onClick={() => setFullScreen(false)}>
+          取消全屏
+        </Button>
+      ) : (
+        <Button onClick={() => setFullScreen(true)}>全屏</Button>
+      )}
+
+      <div style={{ height: 300, marginTop: 16 }}>
+        <PageLoading fullscreen={fullscreen} id={'fullscreen'}>
+          <Card>内容卡片</Card>
+        </PageLoading>
+      </div>
+    </div>
+  );
+};
+
+export default FullScreenLoading;

docs/components/common/examples/PageLoading/LoadingState.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Button, Card } from 'antd';
+
+import PageLoading from '@arvinxu/page-loading';
+
+const { Group } = Button;
+const Loading = () => {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <div>
+      <Group>
+        <Button onClick={() => setLoading(true)}>加载中</Button>
+        <Button onClick={() => setLoading(false)}>加载完成</Button>
+      </Group>
+      <span style={{ marginLeft: 8 }}>
+        状态: {loading ? '加载中' : '加载完成'}
+      </span>
+      <div style={{ height: 300, marginTop: 16 }}>
+        <PageLoading loading={loading} id={'loading'}>
+          <Card>内容卡片</Card>
+        </PageLoading>
+      </div>
+    </div>
+  );
+};
+
+export default Loading;

docs/components/common/page-loading.md

@@ -26,11 +26,11 @@ group:
 
 ### 全屏加载
 
-TODO
+<code src="./examples/PageLoading/Fullscreen" />
 
 ### 加载状态控制
 
-TODO
+<code src="./examples/PageLoading/LoadingState" />
 
 ###
 

packages/page-loading/src/index.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, FC } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -11,46 +11,59 @@ const clsPrefix = 'avx-page-loading';
 
 export interface PageLoadingProps {
   /**
-   * 是否全屏
+   * 是否全屏(可选)
    * @default false
    */
   fullscreen?: boolean;
 
   /**
-   * 是否显示加载进度条
+   * 显示加载进度条(可选)
    * @default true
    */
   progress?: boolean;
 
   /**
-   * 主色
+   * 主色(可选)
    * @default #1890ff
    */
   color?: string;
   /**
-   * 背景颜色
+   * 背景颜色(可选)
    * @default #f3f4f6
    */
   backgroundColor?: string;
 
   /**
-   * 进度条 id。如果存在多个 PageLoading 组件，需要指定 id 以区分进度条
+   * 进度条 id。(可选)
+   * 如果存在多个 PageLoading 组件，需要指定 id 以区分进度条
+   *
    */
   id?: string;
+
+  /**
+   * 加载状态
+   */
+  loading?: boolean;
 }
 
-const PageLoading: React.FC<PageLoadingProps> = ({
-  progress,
+const PageLoading: FC<PageLoadingProps> = ({
+  progress = true,
   fullscreen,
   color = '#1890ff',
   id = 'avx-page-loading-container',
   backgroundColor = '#f5f5f5',
+  loading = true,
+  children,
 }) => {
   // 控制 Progress 显示
-  useProgress(id, color, progress);
+  useProgress(id, { color, progress, loading, fullscreen });
 
   const colorStyle: CSSProperties = { background: color };
 
+  // 如果明确指定了 loading 为 false
+  // 返回 children
+  if (typeof loading === 'boolean' && !loading) return <>{children}</>;
+
   return (
     <div
       id={id}
@@ -81,4 +94,5 @@ const PageLoading: React.FC<PageLoadingProps> = ({
     </div>
   );
 };
+
 export default PageLoading;

packages/page-loading/src/style.less

@@ -14,12 +14,12 @@
   }
 
   &-fullscreen {
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 1000;
+    z-index: 9900;
   }
 
   &-content {

packages/page-loading/src/useProgress.ts

@@ -16,9 +16,12 @@ const progressColor = (color) => `
   border-left-color: ${color};
 }`;
 
-export const useProgress = (container, color, enable = true) => {
+export const useProgress = (container, config) => {
+  const { color, enable = true, loading = true, fullscreen } = config;
   // 控制 Progress 显示
   useEffect(() => {
+    if (typeof loading === 'boolean' && !loading) return;
+
     // 如果传入 progress props 且为 false
     if (typeof enable === 'boolean' && !enable) return;
 
@@ -33,9 +36,14 @@ export const useProgress = (container, color, enable = true) => {
     np.inc();
 
     return () => {
-      np.done();
+      try {
+        np.done();
+        // eslint-disable-next-line no-empty
+      } catch (e) {
+        np.remove();
+      }
     };
-  }, [container, enable]);
+  }, [container, enable, loading, fullscreen]);
 
   // 控制 progress 颜色
   useEffect(() => {