mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
chore: move useCountdown to @vant/use
This commit is contained in:
chenjiahan
parent
43036efdc4
commit
c8a00f3ad3
@ -58,7 +58,7 @@
|
||||
"dependencies": {
|
||||
"@babel/runtime": "7.x",
|
||||
"@vant/icons": "1.3.0",
|
||||
"@vant/use": "^0.0.6",
|
||||
"@vant/use": "^0.0.7",
|
||||
"vue-lazyload": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { ref, watch, reactive, computed, onMounted, onActivated } from 'vue';
|
||||
|
||||
// Utils
|
||||
import { raf, pick, getScrollTop } from '../utils';
|
||||
import { pick, getScrollTop } from '../utils';
|
||||
import { isDate } from '../utils/validate/date';
|
||||
import {
|
||||
t,
|
||||
@ -17,7 +17,7 @@ import {
|
||||
} from './utils';
|
||||
|
||||
// Composition
|
||||
import { useRect } from '@vant/use';
|
||||
import { raf, useRect } from '@vant/use';
|
||||
import { useRefs } from '../composition/use-refs';
|
||||
import { useExpose } from '../composition/use-expose';
|
||||
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
import { watch, computed } from 'vue';
|
||||
import {
|
||||
raf,
|
||||
isObject,
|
||||
cancelRaf,
|
||||
getSizeStyle,
|
||||
createNamespace,
|
||||
} from '../utils';
|
||||
import { raf, cancelRaf } from '@vant/use';
|
||||
import { isObject, getSizeStyle, createNamespace } from '../utils';
|
||||
import { BLUE, WHITE } from '../utils/constant';
|
||||
|
||||
const [createComponent, bem] = createNamespace('circle');
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { ref, watch, computed, nextTick } from 'vue';
|
||||
|
||||
// Utils
|
||||
import { raf, doubleRaf, createNamespace } from '../utils';
|
||||
import { createNamespace } from '../utils';
|
||||
|
||||
// Composition
|
||||
import { useParent } from '@vant/use';
|
||||
import { raf, doubleRaf, useParent } from '@vant/use';
|
||||
import { useExpose } from '../composition/use-expose';
|
||||
import { useLazyRender } from '../composition/use-lazy-render';
|
||||
|
||||
|
||||
@ -5,8 +5,8 @@ import { createNamespace } from '../utils';
|
||||
import { parseFormat } from './utils';
|
||||
|
||||
// Composition
|
||||
import { useCountDown } from '@vant/use';
|
||||
import { useExpose } from '../composition/use-expose';
|
||||
import { useCountDown } from './use-count-down';
|
||||
|
||||
const [createComponent, bem] = createNamespace('count-down');
|
||||
|
||||
|
||||
@ -1,152 +0,0 @@
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
onActivated,
|
||||
onDeactivated,
|
||||
onBeforeUnmount,
|
||||
} from 'vue';
|
||||
import { raf, cancelRaf } from '../utils';
|
||||
|
||||
export type CurrentTime = {
|
||||
days: number;
|
||||
hours: number;
|
||||
total: number;
|
||||
minutes: number;
|
||||
seconds: number;
|
||||
milliseconds: number;
|
||||
};
|
||||
|
||||
export type UseCountDownOptions = {
|
||||
time: number;
|
||||
millisecond?: boolean;
|
||||
onChange?: (current: CurrentTime) => void;
|
||||
onFinish?: () => void;
|
||||
};
|
||||
|
||||
const SECOND = 1000;
|
||||
const MINUTE = 60 * SECOND;
|
||||
const HOUR = 60 * MINUTE;
|
||||
const DAY = 24 * HOUR;
|
||||
|
||||
export function parseTime(time: number): CurrentTime {
|
||||
const days = Math.floor(time / DAY);
|
||||
const hours = Math.floor((time % DAY) / HOUR);
|
||||
const minutes = Math.floor((time % HOUR) / MINUTE);
|
||||
const seconds = Math.floor((time % MINUTE) / SECOND);
|
||||
const milliseconds = Math.floor(time % SECOND);
|
||||
|
||||
return {
|
||||
total: time,
|
||||
days,
|
||||
hours,
|
||||
minutes,
|
||||
seconds,
|
||||
milliseconds,
|
||||
};
|
||||
}
|
||||
|
||||
function isSameSecond(time1: number, time2: number): boolean {
|
||||
return Math.floor(time1 / 1000) === Math.floor(time2 / 1000);
|
||||
}
|
||||
|
||||
export function useCountDown(options: UseCountDownOptions) {
|
||||
let rafId: number;
|
||||
let endTime: number;
|
||||
let counting: boolean;
|
||||
let deactivated: boolean;
|
||||
|
||||
const remain = ref(options.time);
|
||||
const current = computed(() => parseTime(remain.value));
|
||||
|
||||
const pause = () => {
|
||||
counting = false;
|
||||
cancelRaf(rafId);
|
||||
};
|
||||
|
||||
const getCurrentRemain = () => Math.max(endTime - Date.now(), 0);
|
||||
|
||||
const setRemain = (value: number) => {
|
||||
remain.value = value;
|
||||
options.onChange?.(current.value);
|
||||
|
||||
if (value === 0) {
|
||||
pause();
|
||||
options.onFinish?.();
|
||||
}
|
||||
};
|
||||
|
||||
const microTick = () => {
|
||||
rafId = raf(() => {
|
||||
// in case of call reset immediately after finish
|
||||
if (counting) {
|
||||
setRemain(getCurrentRemain());
|
||||
|
||||
if (remain.value > 0) {
|
||||
microTick();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const macroTick = () => {
|
||||
rafId = raf(() => {
|
||||
// in case of call reset immediately after finish
|
||||
if (counting) {
|
||||
const remainRemain = getCurrentRemain();
|
||||
|
||||
if (!isSameSecond(remainRemain, remain.value) || remainRemain === 0) {
|
||||
setRemain(remainRemain);
|
||||
}
|
||||
|
||||
if (remain.value > 0) {
|
||||
macroTick();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const tick = () => {
|
||||
if (options.millisecond) {
|
||||
microTick();
|
||||
} else {
|
||||
macroTick();
|
||||
}
|
||||
};
|
||||
|
||||
const start = () => {
|
||||
if (!counting) {
|
||||
endTime = Date.now() + remain.value;
|
||||
counting = true;
|
||||
tick();
|
||||
}
|
||||
};
|
||||
|
||||
const reset = (totalTime: number) => {
|
||||
pause();
|
||||
remain.value = totalTime;
|
||||
};
|
||||
|
||||
onBeforeUnmount(pause);
|
||||
|
||||
onActivated(() => {
|
||||
if (deactivated) {
|
||||
counting = true;
|
||||
deactivated = false;
|
||||
tick();
|
||||
}
|
||||
});
|
||||
|
||||
onDeactivated(() => {
|
||||
if (counting) {
|
||||
pause();
|
||||
deactivated = true;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
start,
|
||||
pause,
|
||||
reset,
|
||||
current,
|
||||
};
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import { padZero } from '../utils';
|
||||
import { CurrentTime } from './use-count-down';
|
||||
import { CurrentTime } from '@vant/use';
|
||||
|
||||
export function parseFormat(format: string, currentTime: CurrentTime): string {
|
||||
const { days } = currentTime;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { ref, watch, reactive, nextTick, onActivated } from 'vue';
|
||||
import { isDef, doubleRaf, createNamespace } from '../utils';
|
||||
import { isDef, createNamespace } from '../utils';
|
||||
|
||||
// Composition
|
||||
import { useRect, useEventListener } from '@vant/use';
|
||||
import { useRect, doubleRaf, useEventListener } from '@vant/use';
|
||||
|
||||
// Components
|
||||
import Icon from '../icon';
|
||||
|
||||
@ -10,17 +10,12 @@ import {
|
||||
} from 'vue';
|
||||
|
||||
// Utils
|
||||
import {
|
||||
range,
|
||||
isHidden,
|
||||
doubleRaf,
|
||||
preventDefault,
|
||||
createNamespace,
|
||||
} from '../utils';
|
||||
import { range, isHidden, preventDefault, createNamespace } from '../utils';
|
||||
|
||||
// Composition
|
||||
import {
|
||||
useRect,
|
||||
doubleRaf,
|
||||
useChildren,
|
||||
useWindowSize,
|
||||
usePageVisibility,
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { raf, cancelRaf, getScrollTop, setScrollTop } from '../utils';
|
||||
import { raf, cancelRaf } from '@vant/use';
|
||||
import { getScrollTop, setScrollTop } from '../utils';
|
||||
|
||||
let rafId: number;
|
||||
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
/**
|
||||
* requestAnimationFrame polyfill
|
||||
*/
|
||||
|
||||
import { inBrowser } from '../base';
|
||||
|
||||
let prev = Date.now();
|
||||
|
||||
function fallback(fn: FrameRequestCallback): number {
|
||||
const curr = Date.now();
|
||||
const ms = Math.max(0, 16 - (curr - prev));
|
||||
const id = setTimeout(fn, ms);
|
||||
prev = curr + ms;
|
||||
return id;
|
||||
}
|
||||
|
||||
const root = (inBrowser ? window : global) as Window;
|
||||
|
||||
const iRaf = root.requestAnimationFrame || fallback;
|
||||
|
||||
const iCancel = root.cancelAnimationFrame || root.clearTimeout;
|
||||
|
||||
export function raf(fn: FrameRequestCallback): number {
|
||||
return iRaf.call(root, fn);
|
||||
}
|
||||
|
||||
// double raf for animation
|
||||
export function doubleRaf(fn: FrameRequestCallback): void {
|
||||
raf(() => {
|
||||
raf(fn);
|
||||
});
|
||||
}
|
||||
|
||||
export function cancelRaf(id: number) {
|
||||
iCancel.call(root, id);
|
||||
}
|
||||
@ -3,7 +3,6 @@ export * from './create';
|
||||
export * from './format/unit';
|
||||
export * from './format/number';
|
||||
export * from './format/string';
|
||||
export * from './dom/raf';
|
||||
export * from './dom/style';
|
||||
export * from './dom/event';
|
||||
export * from './dom/scroll';
|
||||
|
||||
@ -2175,10 +2175,10 @@
|
||||
resolved "https://registry.yarnpkg.com/@vant/touch-emulator/-/touch-emulator-1.2.0.tgz#486300b23e57db9ce9231a04e0a0c621c68692d8"
|
||||
integrity sha512-sJ97zU85zOq51qoi7+CpBEcOyH3CitjP1KC7/GQwqaurUJni+EP7/F9n0HMnAh8GXMjgtgDBNJ5z48x+coNKYQ==
|
||||
|
||||
"@vant/use@^0.0.6":
|
||||
version "0.0.6"
|
||||
resolved "https://registry.npmjs.org/@vant/use/-/use-0.0.6.tgz#96939bacbd21964f1cc2a84dc4bfa702c9670175"
|
||||
integrity sha512-ML5i3U/cbnIYYHocNqZewjbsbgamCJ2bR3Vo9R8znjVzvjBm2OnGBE68UZKUWwBmcF0prBI+QdaLYbkQLow7jA==
|
||||
"@vant/use@^0.0.7":
|
||||
version "0.0.7"
|
||||
resolved "https://registry.npmjs.org/@vant/use/-/use-0.0.7.tgz#9ab1f54dd38c02b2707d2bcab7b725e81402db71"
|
||||
integrity sha512-7QztMvrYWEJdlOd5xmQNjT+46AdoMZs9h9f72baAtHsl/a4Q+abTzVQo4Rg8E592djsDIVfnlWr9IZ1VomdJag==
|
||||
|
||||
"@vue/babel-helper-vue-transform-on@^1.0.0-rc.2":
|
||||
version "1.0.0-rc.2"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user