taro-ui-vue3/lib/countdown/index.js

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, computed, ref, watch, reactive, onMounted, onUnmounted, mergeProps} from "vue";
import {View} from "@tarojs/components";
import AtCountdownItem from "./item";
const toSeconds = (day, hours, minutes, seconds) => day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds;
const AtCountdown = defineComponent({
  name: "AtCountdown",
  props: {
    isCard: Boolean,
    isShowDay: Boolean,
    isShowHour: {type: Boolean, default: true},
    format: {
      type: Object,
      default: () => ({
        day: "\u5929",
        hours: "\u65F6",
        minutes: "\u5206",
        seconds: "\u79D2"
      })
    },
    day: {
      type: Number,
      default: 0
    },
    hours: {
      type: Number,
      default: 0
    },
    minutes: {
      type: Number,
      default: 0
    },
    seconds: {
      type: Number,
      default: 0
    },
    onTimeUp: Function
  },
  onShow() {
    this.setTimer();
  },
  onHide() {
    this.clearTimer();
  },
  setup(props, {attrs}) {
    const secondsRef = ref(toSeconds(props.day, props.hours, props.minutes, props.seconds));
    const timer = ref(null);
    const state = reactive(calculateTime());
    const rootClass = computed(() => ({
      "at-countdown": true,
      "at-countdown--card": props.isCard
    }));
    watch(() => [
      props.day,
      props.hours,
      props.minutes,
      props.seconds
    ], ([
      day,
      hours,
      minutes,
      seconds
    ]) => {
      secondsRef.value = toSeconds(day, hours, minutes, seconds);
      clearTimer();
      setTimer();
    });
    function setTimer() {
      if (!timer.value)
        countdown();
    }
    function clearTimer() {
      if (timer.value) {
        clearTimeout(timer.value);
      }
    }
    function calculateTime() {
      let [_day, _hours, _minutes, _seconds] = [0, 0, 0, 0];
      if (secondsRef.value > 0) {
        _day = props.isShowDay ? Math.floor(secondsRef.value / (60 * 60 * 24)) : 0;
        _hours = Math.floor(secondsRef.value / (60 * 60)) - _day * 24;
        _minutes = Math.floor(secondsRef.value / 60) - _day * 24 * 60 - _hours * 60;
        _seconds = Math.floor(secondsRef.value) - _day * 24 * 60 * 60 - _hours * 60 * 60 - _minutes * 60;
      }
      return {
        _day,
        _hours,
        _minutes,
        _seconds
      };
    }
    function countdown() {
      Object.assign(state, calculateTime());
      secondsRef.value--;
      if (secondsRef.value < 0) {
        clearTimer();
        props.onTimeUp && props.onTimeUp();
        return;
      }
      timer.value = setTimeout(() => {
        countdown();
      }, 1e3);
    }
    onMounted(() => {
      setTimer();
    });
    onUnmounted(() => {
      clearTimer();
    });
    return () => {
      return h(View, mergeProps(attrs, {
        class: rootClass.value
      }), {
        default: () => [
          props.isShowDay && h(AtCountdownItem, {
            num: state._day,
            separator: props.format.day
          }),
          props.isShowHour && h(AtCountdownItem, {
            num: state._hours,
            separator: props.format.hours
          }),
          h(AtCountdownItem, {
            num: state._minutes,
            separator: props.format.minutes
          }),
          h(AtCountdownItem, {
            num: state._seconds,
            separator: props.format.seconds
          })
        ]
      });
    };
  }
});
var countdown_default = AtCountdown;
export {
  countdown_default as default
};