105 lines
2.7 KiB
Vue
105 lines
2.7 KiB
Vue
import type { ExtractPropTypes, PropType } from 'vue';
|
|
import { defineComponent, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue';
|
|
import omit from '../_util/omit';
|
|
import initDefaultProps from '../_util/props-util/initDefaultProps';
|
|
import Statistic, { statisticProps } from './Statistic';
|
|
import type { countdownValueType, FormatConfig } from './utils';
|
|
import { formatCountdown as formatCD } from './utils';
|
|
|
|
const REFRESH_INTERVAL = 1000 / 30;
|
|
|
|
function getTime(value?: countdownValueType) {
|
|
return new Date(value as any).getTime();
|
|
}
|
|
export const countdownProps = () => {
|
|
return {
|
|
...statisticProps(),
|
|
value: [Number, String],
|
|
format: String,
|
|
onFinish: Function as PropType<() => void>,
|
|
onChange: Function as PropType<(value?: countdownValueType) => void>,
|
|
};
|
|
};
|
|
|
|
export type CountdownProps = Partial<ExtractPropTypes<ReturnType<typeof countdownProps>>>;
|
|
export default defineComponent({
|
|
name: 'AStatisticCountdown',
|
|
props: initDefaultProps(countdownProps(), {
|
|
format: 'HH:mm:ss',
|
|
}),
|
|
// emits: ['finish', 'change'],
|
|
setup(props, { emit, slots }) {
|
|
const countdownId = ref<any>();
|
|
const statistic = ref();
|
|
const syncTimer = () => {
|
|
const { value } = props;
|
|
const timestamp = getTime(value);
|
|
if (timestamp >= Date.now()) {
|
|
startTimer();
|
|
} else {
|
|
stopTimer();
|
|
}
|
|
};
|
|
|
|
const startTimer = () => {
|
|
if (countdownId.value) return;
|
|
const timestamp = getTime(props.value);
|
|
countdownId.value = setInterval(() => {
|
|
statistic.value.$forceUpdate();
|
|
if (timestamp > Date.now()) {
|
|
emit('change', timestamp - Date.now());
|
|
}
|
|
syncTimer();
|
|
}, REFRESH_INTERVAL);
|
|
};
|
|
|
|
const stopTimer = () => {
|
|
const { value } = props;
|
|
if (countdownId.value) {
|
|
clearInterval(countdownId.value);
|
|
countdownId.value = undefined;
|
|
|
|
const timestamp = getTime(value);
|
|
if (timestamp < Date.now()) {
|
|
emit('finish');
|
|
}
|
|
}
|
|
};
|
|
|
|
const formatCountdown = ({
|
|
value,
|
|
config,
|
|
}: {
|
|
value: countdownValueType;
|
|
config: FormatConfig;
|
|
}) => {
|
|
const { format } = props;
|
|
return formatCD(value, { ...config, format });
|
|
};
|
|
|
|
const valueRenderHtml = (node: any) => node;
|
|
onMounted(() => {
|
|
syncTimer();
|
|
});
|
|
onUpdated(() => {
|
|
syncTimer();
|
|
});
|
|
onBeforeUnmount(() => {
|
|
stopTimer();
|
|
});
|
|
return () => {
|
|
return (
|
|
<Statistic
|
|
ref={statistic}
|
|
{...{
|
|
...omit(props, ['onFinish', 'onChange']),
|
|
valueRender: valueRenderHtml,
|
|
formatter: formatCountdown,
|
|
}}
|
|
v-slots={slots}
|
|
/>
|
|
);
|
|
};
|
|
},
|
|
});
|