From 36fbfbe72a722b9bee37e0a2f3ddff34ef0a24fa Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 17 Oct 2017 15:55:33 +0800 Subject: [PATCH] rename Countdown to CountDown --- src/components/CountDown/demo/simple.md | 16 ++++ src/components/CountDown/index.js | 105 ++++++++++++++++++++++++ src/components/CountDown/index.md | 16 ++++ 3 files changed, 137 insertions(+) create mode 100644 src/components/CountDown/demo/simple.md create mode 100644 src/components/CountDown/index.js create mode 100644 src/components/CountDown/index.md diff --git a/src/components/CountDown/demo/simple.md b/src/components/CountDown/demo/simple.md new file mode 100644 index 00000000..5a3d8d55 --- /dev/null +++ b/src/components/CountDown/demo/simple.md @@ -0,0 +1,16 @@ +--- +order: 0 +title: Simple +--- + +简单的页头。 + +````jsx +import CountDown from 'ant-design-pro/lib/CountDown'; + +const targetTime = new Date().getTime() + 3900000; + +ReactDOM.render( + +, mountNode); +```` diff --git a/src/components/CountDown/index.js b/src/components/CountDown/index.js new file mode 100644 index 00000000..19c1cf48 --- /dev/null +++ b/src/components/CountDown/index.js @@ -0,0 +1,105 @@ +import React, { Component } from 'react'; + +function fixedZero(val) { + return val * 1 < 10 ? `0${val}` : val; +} + +class CountDown extends Component { + constructor(props) { + super(props); + + const { lastTime } = this.initTime(props); + + this.state = { + lastTime, + }; + } + + componentDidMount() { + this.tick(); + } + + componentWillReceiveProps(nextProps) { + if (this.props.target !== nextProps.target) { + const { lastTime } = this.initTime(nextProps); + this.setState({ + lastTime, + }); + } + } + + componentWillUnmount() { + clearTimeout(this.timer); + } + + timer = 0; + interval = 1000; + initTime = (props) => { + let lastTime = 0; + let targetTime = 0; + try { + if (Object.prototype.toString.call(props.target) === '[object Date]') { + targetTime = props.target.getTime(); + } else { + targetTime = new Date(props.target).getTime(); + } + } catch (e) { + throw new Error('invalid target prop', e); + } + + lastTime = targetTime - new Date().getTime(); + + return { + lastTime, + }; + } + // defaultFormat = time => ( + // {moment(time).format('hh:mm:ss')} + // ); + defaultFormat = (time) => { + const hours = 60 * 60 * 1000; + const minutes = 60 * 1000; + + const h = fixedZero(Math.floor(time / hours)); + const m = fixedZero(Math.floor((time - (h * hours)) / minutes)); + const s = fixedZero(Math.floor((time - (h * hours) - (m * minutes)) / 1000)); + return ( + {h}:{m}:{s} + ); + } + tick = () => { + const { onEnd } = this.props; + let { lastTime } = this.state; + + this.timer = setTimeout(() => { + if (lastTime < this.interval) { + clearTimeout(this.timer); + this.setState({ + lastTime: 0, + }); + + if (onEnd) { + onEnd(); + } + } else { + lastTime -= this.interval; + this.setState({ + lastTime, + }); + + this.tick(); + } + }, this.interval); + } + + render() { + const { format = this.defaultFormat } = this.props; + const { lastTime } = this.state; + + const result = format(lastTime); + + return result; + } +} + +export default CountDown; diff --git a/src/components/CountDown/index.md b/src/components/CountDown/index.md new file mode 100644 index 00000000..026ea3fa --- /dev/null +++ b/src/components/CountDown/index.md @@ -0,0 +1,16 @@ +--- +category: Components +type: General +title: CountDown +subtitle: 倒计时 +cols: 1 +--- + +倒计时组件。 + +## API + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| format | 时间格式化显示显示 | Function(time) | | +| target | 目标时间 | Date | - | -- GitLab