♻️ refactor: 基于 preloader 组件重构

arvinxx · Mar 20, 2021 · 919004a · 919004a
1 parent e827348
commit 919004a
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 43 deletions.
diff --git a/packages/page-loading/.fatherrc.js b/packages/page-loading/.fatherrc.js
@@ -2,4 +2,5 @@ const base = require('../../.fatherrc');
 
 module.exports = {
   ...base,
+  pkgs: ['@arvinxu/preloader'],
 };
diff --git a/packages/page-loading/package.json b/packages/page-loading/package.json
@@ -17,7 +17,8 @@
   "dependencies": {
     "multi-nprogress": "^0.3.5",
     "classnames": "^2.2.6",
-    "insert-css": "^2.0.0"
+    "insert-css": "^2.0.0",
+    "@arvinxu/preloader": "^1.0.0"
   },
   "devDependencies": {
     "@types/nprogress": "^0.2.0",

diff --git a/packages/page-loading/src/index.tsx b/packages/page-loading/src/index.tsx
@@ -1,6 +1,7 @@
-import type { CSSProperties, FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import React from 'react';
 import classNames from 'classnames';
+import { Square } from '@arvinxu/preloader';
 
 import 'multi-nprogress/nprogress.css';
 
@@ -59,8 +60,6 @@ const PageLoading: FC<PageLoadingProps> = ({
   // 控制 Progress 显示
   useProgress(id, { color, enable: progress, loading, fullscreen });
 
-  const colorStyle: CSSProperties = { background: color };
-
   // 如果明确指定了 loading 为 false
   // 返回 children
   if (typeof loading === 'boolean' && !loading) return <>{children}</>;
@@ -75,23 +74,7 @@ const PageLoading: FC<PageLoadingProps> = ({
       style={{ background: backgroundColor }}
     >
       <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>
-        )}
+        {loader || <Square color={color} />}
       </div>
     </div>
   );

diff --git a/packages/page-loading/src/style.less b/packages/page-loading/src/style.less
@@ -25,25 +25,4 @@
   &-loader {
     margin: auto;
   }
-
-  &-content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-around;
-    width: 36px;
-    height: 36px;
-  }
-
-  &-item {
-    width: 35%;
-    height: 35%;
-    animation: pulse 0.75s ease-in infinite alternate;
-  }
-
-  &-animation-delay {
-    -webkit-animation-delay: 0.75s;
-    animation-delay: 0.75s;
-  }
 }
diff --git a/packages/page-loading/tsconfig.json b/packages/page-loading/tsconfig.json
@@ -10,6 +10,10 @@
     "module": "ESNext",
     /* 模块导入配置项 */
     "esModuleInterop": true,
-    "types": ["../../types", "@types/jest"]
+    "types": ["../../types", "@types/jest"],
+    "baseUrl": "../..",
+    "paths": {
+      "@arvinxu/preloader": ["./packages/preloader/src"]
+    }
   }
 }