✨ feat: 提供自定义加载图形接口

arvinxx · Mar 20, 2021 · dd553cf · dd553cf
1 parent 8b55263
commit dd553cf
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 37 deletions.
diff --git a/docs/components/common/examples/PageLoading/CustomLoader.tsx b/docs/components/common/examples/PageLoading/CustomLoader.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import PageLoading from '@arvinxu/page-loading';
+
+const Loading = () => {
+  return (
+    <div style={{ height: 300 }}>
+      <PageLoading loader={<div>loading...</div>} id={'custom'} />
+    </div>
+  );
+};
+
+export default Loading;
diff --git a/docs/components/common/page-loading.md b/docs/components/common/page-loading.md
@@ -9,10 +9,11 @@ group:
 # PageLoading
 
 页面加载组件，特性：
+
 - 支持全屏；
 - 吸顶加载进度条；
 - 自定义主色；
-- （TODO）自定义加载图形；
+- 自定义加载图形；
 
 ## 使用案例
 
@@ -36,6 +37,10 @@ group:
 
 <code src="./examples/PageLoading/LoadingState" />
 
+### 自定义加载图形
+
+<code src="./examples/PageLoading/CustomLoader" />
+
 ###
 
 <API src="../../../packages/page-loading/src/index.tsx"></API>
diff --git a/packages/page-loading/src/index.tsx b/packages/page-loading/src/index.tsx
@@ -1,4 +1,4 @@
-import type { CSSProperties, FC } from 'react';
+import type { CSSProperties, FC, ReactNode } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -7,15 +7,27 @@ import 'multi-nprogress/nprogress.css';
 import { useProgress } from './useProgress';
 import './style.less';
 
-const clsPrefix = 'avx-page-loading';
-
 export interface PageLoadingProps {
+  /**
+   * 进度条 id。(可选)
+   * 如果存在多个 PageLoading 组件，需要指定 id 以区分进度条
+   *
+   */
+  id?: string;
+
+  /**
+   * 加载状态
+   */
+  loading?: boolean;
+  /**
+   * 自定义加载图形
+   */
+  loader?: ReactNode;
   /**
    * 是否全屏(可选)
    * @default false
    */
   fullscreen?: boolean;
-
   /**
    * 显示加载进度条(可选)
    * @default true
@@ -32,18 +44,6 @@ export interface PageLoadingProps {
    * @default #f3f4f6
    */
   backgroundColor?: string;
-
-  /**
-   * 进度条 id。(可选)
-   * 如果存在多个 PageLoading 组件，需要指定 id 以区分进度条
-   *
-   */
-  id?: string;
-
-  /**
-   * 加载状态
-   */
-  loading?: boolean;
 }
 
 const PageLoading: FC<PageLoadingProps> = ({
@@ -54,6 +54,7 @@ const PageLoading: FC<PageLoadingProps> = ({
   backgroundColor = '#f5f5f5',
   loading = true,
   children,
+  loader,
 }) => {
   // 控制 Progress 显示
   useProgress(id, { color, enable: progress, loading, fullscreen });
@@ -68,28 +69,29 @@ const PageLoading: FC<PageLoadingProps> = ({
     <div
       id={id}
       className={classNames(
-        `${clsPrefix}-container`,
-        fullscreen ? `${clsPrefix}-fullscreen` : null,
+        'avx-page-loading-container',
+        fullscreen ? 'avx-page-loading-fullscreen' : '',
       )}
       style={{ background: backgroundColor }}
     >
-      <div className={`${clsPrefix}-content`}>
-        <div className={`${clsPrefix}-item`} style={colorStyle} />
-        <div
-          className={classNames(
-            `${clsPrefix}-item`,
-            `${clsPrefix}-animation-delay`,
-          )}
-          style={colorStyle}
-        />
-        <div
-          className={classNames(
-            `${clsPrefix}-item`,
-            `${clsPrefix}-animation-delay`,
-          )}
-          style={colorStyle}
-        />
-        <div className={`${clsPrefix}-item`} style={colorStyle} />
+      <div className="avx-page-loading-loader">
+        {loader || (
+          <div className="avx-page-loading-content">
+            <div className="avx-page-loading-item" style={colorStyle} />
+            <div
+              className="avx-page-loading-item avx-page-loading-animation-delay"
+              style={colorStyle}
+            />
+            <div
+              className={classNames(
+                'avx-page-loading-item',
+                'avx-page-loading-animation-delay',
+              )}
+              style={colorStyle}
+            />
+            <div className="avx-page-loading-item" style={colorStyle} />
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/packages/page-loading/src/style.less b/packages/page-loading/src/style.less
@@ -22,6 +22,10 @@
     z-index: 9900;
   }
 
+  &-loader {
+    margin: auto;
+  }
+
   &-content {
     display: flex;
     flex-direction: row;
@@ -30,7 +34,6 @@
     justify-content: space-around;
     width: 36px;
     height: 36px;
-    margin: auto;
   }
 
   &-item {