diff --git a/src/components/CountDown/demo/simple.md b/src/components/CountDown/demo/simple.md new file mode 100644 index 0000000000000000000000000000000000000000..5a3d8d55ba36b95202dc763bd6f9396c4c207f95 --- /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 0000000000000000000000000000000000000000..19c1cf48e371d432dedbde5098d4166e433c5083 --- /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 0000000000000000000000000000000000000000..026ea3fad33164918d0b2e5d21d32c008652e01f --- /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 | - |