123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- 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) {
- clearTimeout(this.timer);
- const { lastTime } = this.initTime(nextProps);
- this.setState(
- {
- lastTime,
- },
- () => {
- this.tick();
- }
- );
- }
- }
-
- 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: lastTime < 0 ? 0 : lastTime,
- };
- };
- // defaultFormat = time => (
- // <span>{moment(time).format('hh:mm:ss')}</span>
- // );
- defaultFormat = time => {
- const hours = 60 * 60 * 1000;
- const minutes = 60 * 1000;
-
- const h = Math.floor(time / hours);
- const m = Math.floor((time - h * hours) / minutes);
- const s = Math.floor((time - h * hours - m * minutes) / 1000);
- return (
- <span>
- {fixedZero(h)}:{fixedZero(m)}:{fixedZero(s)}
- </span>
- );
- };
- 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, onEnd, ...rest } = this.props;
- const { lastTime } = this.state;
- const result = format(lastTime);
-
- return <span {...rest}>{result}</span>;
- }
- }
-
- export default CountDown;
|