Feat progress bar (#320)

* feat: optimize progress bar

* docs: basic use

* feat: nodeJS.Timeout

---------

Co-authored-by: liuyi <>
Co-authored-by: liuyi <[email protected]>

Author: liuxy0551

src/progressBar/__test__/progressBar.test.tsx

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom/extend-expect';
+import ProgressBar from '..';
+
+describe('test ProgressBar', () => {
+    const progressBar = ProgressBar;
+
+    test('show method should add progress bar and loading image to the DOM', () => {
+        progressBar.show();
+        // show 方法内有延时
+        setTimeout(() => {
+            expect(progressBar.hasAdded()).toBe(true);
+        }, 200);
+    });
+
+    test('hide method should remove progress bar and loading image from the DOM', () => {
+        progressBar.show();
+        progressBar.hide();
+        expect(progressBar.hasAdded()).toBe(false);
+    });
+});

src/progressBar/index.md

@@ -17,6 +17,7 @@ demo:
 ```jsx
 /**
  * iframe: "true"
+ * title: "基础使用"
  */
 import React from 'react';
 import { ProgressBar } from 'dt-react-component';
@@ -26,14 +27,15 @@ export default () => {
     return (
         <>
             <Button
+                style={{ margin: '40px 10px 0 20px' }}
+                type="primary"
                 onClick={() => {
                     ProgressBar.show();
                 }}
             >
                 发起请求
             </Button>
             <Button
-                style={{ marginLeft: '10px' }}
                 onClick={() => {
                     ProgressBar.hide();
                 }}
@@ -44,3 +46,10 @@ export default () => {
     );
 };
 ```
+
+## API
+
+| 参数 | 说明       | 类型       | 默认值 |
+| ---- | ---------- | ---------- | ------ |
+| show | 显示进度条 | `Function` | -      |
+| hide | 隐藏进度条 | `Function` | -      |

src/progressBar/index.tsx

@@ -1,20 +1,24 @@
 import './style.scss';
 
 class ProgressBar {
-    _clock: any;
+    // 定时器
+    _timer: NodeJS.Timeout | null;
+    // 计数，小于等于 0 时表示需要清除进度条
     _count: number;
-    className: string;
+    // 进度条
     img: HTMLDivElement;
-    hodor: HTMLDivElement;
+    // loading 图片
+    bar: HTMLDivElement;
+
     constructor() {
-        this._clock = null;
+        this._timer = null;
         this._count = 0;
-        this.className = 'dtc-progress-progress-bar';
-        this.hodor = document.createElement('div');
-        this.hodor.className = this.className;
+
+        this.bar = document.createElement('div');
+        this.bar.className = 'dtc-progress-bar';
 
         this.img = document.createElement('div');
-        this.img.className = 'dtc-progress-progress-img';
+        this.img.className = 'dtc-progress-img';
         this.img.innerHTML = `<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                          width="30px" height="30px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
                         <path fill="#2491F7" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
@@ -31,9 +35,9 @@ class ProgressBar {
 
     show() {
         this._count++;
-        if (!this.hasAdded() && !this._clock) {
-            this._clock = setTimeout(() => {
-                document.body.appendChild(this.hodor);
+        if (!this.hasAdded() && !this._timer) {
+            this._timer = setTimeout(() => {
+                document.body.appendChild(this.bar);
                 document.body.appendChild(this.img);
             }, 200);
         }
@@ -42,19 +46,20 @@ class ProgressBar {
     hide() {
         this._count--;
         if (this._count <= 0) {
-            if (this._clock) {
-                clearTimeout(this._clock);
-                this._clock = null;
+            if (this._timer) {
+                clearTimeout(this._timer);
+                this._timer = null;
             }
             if (this.hasAdded()) {
-                this.hodor.remove();
+                this.bar.remove();
                 this.img.remove();
             }
         }
     }
 
     hasAdded() {
-        return document.getElementsByClassName(this.className).length > 0;
+        return document.getElementsByClassName('dtc-progress-bar').length > 0;
     }
 }
+
 export default new ProgressBar();

src/progressBar/style.scss

@@ -1,32 +1,28 @@
 $prefix: "dtc-progress";
-.#{$prefix}-progress-bar {
-    position: fixed;
-    top: 0;
-    left: -100%;
-    z-index: 10000;
-    width: 100%;
-    height: 1px;
-    background: #2491F7;
-    box-shadow: 0 1px 3px #2491F7;
-    animation: dtc-progress-loading-anim 1s ease-in-out infinite;
-}
-
-.#{$prefix}-progress-img {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 30px;
-    height: 30px;
-    z-index: 10000;
-}
 
-@keyframes dtc-progress-loading-anim {
-    to {
-        transform: translateX(200%);
+.#{$prefix} {
+    &-bar {
+        position: fixed;
+        top: 0;
+        left: -100%;
+        z-index: 10000;
+        width: 100%;
+        height: 1px;
+        background: #2491F7;
+        box-shadow: 0 1px 3px #2491F7;
+        animation: dtc-progress-loading 1s ease-in-out infinite;
+    }
+    &-img {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 30px;
+        height: 30px;
+        z-index: 10000;
     }
 }
 
-@keyframes dtc-progress-loading-anim {
+@keyframes dtc-progress-loading {
     to {
         transform: translateX(200%);
     }