taro-material/h5/components/countdown/index.js

Mini Program components that implement Google's Material Design.

import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import PropTypes from 'prop-types';
import { View } from '@tarojs/components';
import classNames from 'classnames';
import AtComponent from "../../common/component";
import AtCountdownItem from "./item/index";

const toSeconds = (day, hours, minutes, seconds) => day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds;

export default class AtCountdown extends AtComponent {
  constructor() {
    super(...arguments);
    const { day, hours, minutes, seconds } = this.props;
    this.seconds = toSeconds(day, hours, minutes, seconds);
    this.state = {
      _day: day,
      _hours: hours,
      _minutes: minutes,
      _seconds: seconds
    };
    this.timer = null;
  }

  setTimer() {
    if (!this.timer) this.countdonwn();
  }

  clearTimer() {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
  }

  countdonwn() {
    let [day, hours, minutes, seconds] = [0, 0, 0, 0];

    if (this.seconds > 0) {
      day = Math.floor(this.seconds / 86400);
      hours = Math.floor(this.seconds / 3600) - day * 24;
      minutes = Math.floor(this.seconds / 60) - day * 24 * 60 - hours * 60;
      seconds = Math.floor(this.seconds) - day * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60;
    }

    this.setState({
      _day: day,
      _hours: hours,
      _minutes: minutes,
      _seconds: seconds
    });
    this.seconds--;

    if (this.seconds < 0) {
      this.clearTimer();
      this.props.onTimeUp();
      return;
    }

    this.timer = setTimeout(() => {
      this.countdonwn();
    }, 1000);
  }

  componentWillReceiveProps(nextProps) {
    if (JSON.stringify(this.props) === JSON.stringify(nextProps)) return;

    const { day, hours, minutes, seconds } = nextProps;
    this.seconds = toSeconds(day, hours, minutes, seconds);
    this.clearTimer();
    this.setTimer();
  }

  componentDidMount() {
    this.setTimer();
  }

  componentWillUnmount() {
    this.clearTimer();
  }

  componentDidHide() {
    this.clearTimer();
  }

  componentDidShow() {
    this.setTimer();
  }

  render() {
    const {
      className,
      customStyle,
      format,
      isShowDay,
      isCard
    } = this.props;
    const {
      _day,
      _hours,
      _minutes,
      _seconds
    } = this.state;

    return <View className={classNames({
      'at-countdown': true,
      'at-countdown--card': isCard
    }, className)} style={customStyle}>
        {isShowDay && <AtCountdownItem num={_day} separator={format.day} />}
        <AtCountdownItem num={_hours} separator={format.hours} />
        <AtCountdownItem num={_minutes} separator={format.minutes} />
        <AtCountdownItem num={_seconds} separator={format.seconds} />
      </View>;
  }
}

AtCountdown.defaultProps = {
  customStyle: '',
  className: '',
  isCard: false,
  isShowDay: false,
  format: {
    day: '天',
    hours: '时',
    minutes: '分',
    seconds: '秒'
  },
  day: 0,
  hours: 0,
  minutes: 0,
  seconds: 0,
  onTimeUp() {}
};

AtCountdown.propTypes = {
  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  className: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
  isCard: PropTypes.bool,
  isShowDay: PropTypes.bool,
  format: PropTypes.object,
  day: PropTypes.number,
  hours: PropTypes.number,
  minutes: PropTypes.number,
  seconds: PropTypes.number,
  onTimeUp: PropTypes.func
};