feat:定时器countDown

Roderick-cc · Apr 1, 2021 · cf0ecf8 · cf0ecf8
1 parent ce993fd
commit cf0ecf8
Show file tree

Hide file tree

Showing 12 changed files with 615 additions and 37 deletions.
diff --git a/demo/Button.tsx b/demo/Button.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, FloatLayout } from '../src';
+import { Button } from '../src';
 /**
  * title: Basic Modal
  * title.zh-CN: 基础 Modal

diff --git a/demo/Countdown.tsx b/demo/Countdown.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Countdown } from '../src';
+import './index.less';
+
+function CountdownDemo() {
+  return (
+    <div>
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <div style={{ marginBottom: '10px' }}>
+        <h6>默认格式：时 : 分 : 秒</h6>
+        <Countdown seconds={10000} />
+        <h6>显示天数</h6>
+        <Countdown isShowDay seconds={10000} />
+      </div>
+      <div style={{ marginBottom: '10px' }}>
+        <h6>自定义格式： 天 : hh : mm : ss</h6>
+        <Countdown
+          isShowHour
+          format={{ day: '天', hours: ':', minutes: ':', seconds: '' }}
+          seconds={10000}
+        />
+      </div>
+      <div style={{ marginBottom: '10px' }}>
+        <h6> 倒计时时间到，执行的回调函数</h6>
+        <Countdown
+          isShowHour
+          format={{ day: '天', hours: ':', minutes: ':', seconds: '' }}
+          seconds={20}
+          onTimeUp={() => {
+            console.log('biu~');
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+export default CountdownDemo;
diff --git a/demo/index.less b/demo/index.less
@@ -7,3 +7,7 @@
     border-radius: 10px;
   }
 }
+* {
+  margin: 0;
+  padding: 0;
+}
diff --git a/docs/guide/Countdown.md b/docs/guide/Countdown.md
@@ -0,0 +1,25 @@
+---
+title: Countdown 倒计时
+---
+
+## Countdown 倒计时
+
+倒计时组件
+
+- 支持自定义格式
+- 支持 天 时 分 秒
+
+<code src="../../demo/Countdown"></code>
+
+| 参数       | 说明           | 类型    | 可选值 | 默认值                                           |
+| ---------- | -------------- | ------- | ------ | ------------------------------------------------ |
+| isShowDay  | 是否显示天数   | Boolean | -      | false                                            |
+| isShowHour | 是否显示小时   | Boolean | -      | true                                             |
+| format     | 格式化分割符号 | Object  | -      | day: '天',hours: '时',minutes: '分 seconds : '秒 |
+| day        | 天数           | Number  | -      | 0                                                |
+| hours      | 小时           | Number  | -      | 0                                                |
+| minutes    | 分钟           | Number  | -      | 0                                                |
+| seconds    | 秒             | Number  | -      | 0                                                |
+
+tip:
+后续考虑设计多定时器样式 依据 type 状态机选择定时器样式
diff --git a/src/.umi/core/routes.ts b/src/.umi/core/routes.ts
@@ -197,7 +197,7 @@ export function getRoutes() {
           exact: true,
           meta: {
             filePath: 'docs/guide/ArrowButton.md',
-            updatedTime: null,
+            updatedTime: 1617088633000,
             title: 'ArrowButton 不规则标签',
             slugs: [
               {
@@ -207,8 +207,8 @@ export function getRoutes() {
               },
               {
                 depth: 2,
-                value: 'API文档',
-                heading: 'api文档'
+                value: 'API 文档',
+                heading: 'api-文档'
               }
             ],
             nav: {
@@ -241,6 +241,29 @@ export function getRoutes() {
           },
           title: 'Button 按钮'
         },
+        {
+          path: '/guide/countdown',
+          component: require('/Users/shide/PROJ/biuUI/docs/guide/Countdown.md')
+            .default,
+          exact: true,
+          meta: {
+            filePath: 'docs/guide/Countdown.md',
+            updatedTime: null,
+            title: 'Countdown 倒计时',
+            slugs: [
+              {
+                depth: 2,
+                value: 'Countdown 倒计时',
+                heading: 'countdown-倒计时'
+              }
+            ],
+            nav: {
+              path: '/guide',
+              title: 'Guide'
+            }
+          },
+          title: 'Countdown 倒计时'
+        },
         {
           path: '/guide/curtain',
           component: require('/Users/shide/PROJ/biuUI/docs/guide/Curtain.md')
@@ -276,7 +299,7 @@ export function getRoutes() {
           exact: true,
           meta: {
             filePath: 'docs/guide/Tag.md',
-            updatedTime: null,
+            updatedTime: 1617088633000,
             title: 'Tag 标签',
             slugs: [
               {
@@ -286,8 +309,8 @@ export function getRoutes() {
               },
               {
                 depth: 2,
-                value: 'API文档',
-                heading: 'api文档'
+                value: 'API 文档',
+                heading: 'api-文档'
               }
             ],
             nav: {
@@ -304,7 +327,7 @@ export function getRoutes() {
           exact: true,
           meta: {
             filePath: 'docs/guide/index.md',
-            updatedTime: 1615798841000,
+            updatedTime: 1617088633000,
             title: '指引',
             order: 2,
             slugs: [

diff --git a/src/.umi/dumi/config.json b/src/.umi/dumi/config.json
@@ -50,6 +50,11 @@
           "title": "Button 按钮",
           "meta": {}
         },
+        {
+          "path": "/guide/countdown",
+          "title": "Countdown 倒计时",
+          "meta": {}
+        },
         {
           "path": "/guide/curtain",
           "title": "Curtain 幕帘",