Countdown.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = exports.countdownProps = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  10. var _omit = _interopRequireDefault(require("../_util/omit"));
  11. var _initDefaultProps = _interopRequireDefault(require("../_util/props-util/initDefaultProps"));
  12. var _type = require("../_util/type");
  13. var _Statistic = _interopRequireWildcard(require("./Statistic"));
  14. var _utils = require("./utils");
  15. function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
  16. function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
  17. const REFRESH_INTERVAL = 1000 / 30;
  18. function getTime(value) {
  19. return new Date(value).getTime();
  20. }
  21. const countdownProps = () => {
  22. return (0, _extends2.default)((0, _extends2.default)({}, (0, _Statistic.statisticProps)()), {
  23. value: (0, _type.someType)([Number, String, Object]),
  24. format: String,
  25. onFinish: Function,
  26. onChange: Function
  27. });
  28. };
  29. exports.countdownProps = countdownProps;
  30. var _default = exports.default = (0, _vue.defineComponent)({
  31. compatConfig: {
  32. MODE: 3
  33. },
  34. name: 'AStatisticCountdown',
  35. props: (0, _initDefaultProps.default)(countdownProps(), {
  36. format: 'HH:mm:ss'
  37. }),
  38. // emits: ['finish', 'change'],
  39. setup(props, _ref) {
  40. let {
  41. emit,
  42. slots
  43. } = _ref;
  44. const countdownId = (0, _vue.ref)();
  45. const statistic = (0, _vue.ref)();
  46. const syncTimer = () => {
  47. const {
  48. value
  49. } = props;
  50. const timestamp = getTime(value);
  51. if (timestamp >= Date.now()) {
  52. startTimer();
  53. } else {
  54. stopTimer();
  55. }
  56. };
  57. const startTimer = () => {
  58. if (countdownId.value) return;
  59. const timestamp = getTime(props.value);
  60. countdownId.value = setInterval(() => {
  61. statistic.value.$forceUpdate();
  62. if (timestamp > Date.now()) {
  63. emit('change', timestamp - Date.now());
  64. }
  65. syncTimer();
  66. }, REFRESH_INTERVAL);
  67. };
  68. const stopTimer = () => {
  69. const {
  70. value
  71. } = props;
  72. if (countdownId.value) {
  73. clearInterval(countdownId.value);
  74. countdownId.value = undefined;
  75. const timestamp = getTime(value);
  76. if (timestamp < Date.now()) {
  77. emit('finish');
  78. }
  79. }
  80. };
  81. const formatCountdown = _ref2 => {
  82. let {
  83. value,
  84. config
  85. } = _ref2;
  86. const {
  87. format
  88. } = props;
  89. return (0, _utils.formatCountdown)(value, (0, _extends2.default)((0, _extends2.default)({}, config), {
  90. format
  91. }));
  92. };
  93. const valueRenderHtml = node => node;
  94. (0, _vue.onMounted)(() => {
  95. syncTimer();
  96. });
  97. (0, _vue.onUpdated)(() => {
  98. syncTimer();
  99. });
  100. (0, _vue.onBeforeUnmount)(() => {
  101. stopTimer();
  102. });
  103. return () => {
  104. const value = props.value;
  105. return (0, _vue.createVNode)(_Statistic.default, (0, _objectSpread2.default)({
  106. "ref": statistic
  107. }, (0, _extends2.default)((0, _extends2.default)({}, (0, _omit.default)(props, ['onFinish', 'onChange'])), {
  108. value,
  109. valueRender: valueRenderHtml,
  110. formatter: formatCountdown
  111. })), slots);
  112. };
  113. }
  114. });