Countdown.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
  3. import { defineComponent, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue';
  4. import omit from '../_util/omit';
  5. import initDefaultProps from '../_util/props-util/initDefaultProps';
  6. import Statistic, { statisticProps } from './Statistic';
  7. import { formatCountdown as formatCD } from './utils';
  8. var REFRESH_INTERVAL = 1000 / 30;
  9. function getTime(value) {
  10. return new Date(value).getTime();
  11. }
  12. export var countdownProps = function countdownProps() {
  13. return _objectSpread(_objectSpread({}, statisticProps()), {}, {
  14. value: [Number, String, Object],
  15. format: String,
  16. onFinish: Function,
  17. onChange: Function
  18. });
  19. };
  20. export default defineComponent({
  21. compatConfig: {
  22. MODE: 3
  23. },
  24. name: 'AStatisticCountdown',
  25. props: initDefaultProps(countdownProps(), {
  26. format: 'HH:mm:ss'
  27. }),
  28. // emits: ['finish', 'change'],
  29. setup: function setup(props, _ref) {
  30. var emit = _ref.emit,
  31. slots = _ref.slots;
  32. var countdownId = ref();
  33. var statistic = ref();
  34. var syncTimer = function syncTimer() {
  35. var value = props.value;
  36. var timestamp = getTime(value);
  37. if (timestamp >= Date.now()) {
  38. startTimer();
  39. } else {
  40. stopTimer();
  41. }
  42. };
  43. var startTimer = function startTimer() {
  44. if (countdownId.value) return;
  45. var timestamp = getTime(props.value);
  46. countdownId.value = setInterval(function () {
  47. statistic.value.$forceUpdate();
  48. if (timestamp > Date.now()) {
  49. emit('change', timestamp - Date.now());
  50. }
  51. syncTimer();
  52. }, REFRESH_INTERVAL);
  53. };
  54. var stopTimer = function stopTimer() {
  55. var value = props.value;
  56. if (countdownId.value) {
  57. clearInterval(countdownId.value);
  58. countdownId.value = undefined;
  59. var timestamp = getTime(value);
  60. if (timestamp < Date.now()) {
  61. emit('finish');
  62. }
  63. }
  64. };
  65. var formatCountdown = function formatCountdown(_ref2) {
  66. var value = _ref2.value,
  67. config = _ref2.config;
  68. var format = props.format;
  69. return formatCD(value, _objectSpread(_objectSpread({}, config), {}, {
  70. format: format
  71. }));
  72. };
  73. var valueRenderHtml = function valueRenderHtml(node) {
  74. return node;
  75. };
  76. onMounted(function () {
  77. syncTimer();
  78. });
  79. onUpdated(function () {
  80. syncTimer();
  81. });
  82. onBeforeUnmount(function () {
  83. stopTimer();
  84. });
  85. return function () {
  86. var value = props.value;
  87. return _createVNode(Statistic, _objectSpread({
  88. "ref": statistic
  89. }, _objectSpread(_objectSpread({}, omit(props, ['onFinish', 'onChange'])), {}, {
  90. value: value,
  91. valueRender: valueRenderHtml,
  92. formatter: formatCountdown
  93. })), slots);
  94. };
  95. }
  96. });