github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: refactor statistic to ts

feat-dayjs
Amour1688 2020-10-17 11:51:17 +08:00
parent 8eb6afb9b0
commit 49fda0f7c8
5 changed files with 153 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
components/statistic/Countdown.tsx
View File

@ -1,79 +1,88 @@
import { defineComponent } from 'vue';
import moment from 'moment'; import moment from 'moment';
import interopDefault from '../_util/interopDefault'; import interopDefault from '../_util/interopDefault';
import initDefaultProps from '../_util/props-util/initDefaultProps';
import Statistic, { StatisticProps } from './Statistic'; import Statistic, { StatisticProps } from './Statistic';
import { formatCountdown } from './utils'; import { formatCountdown, countdownValueType, FormatConfig } from './utils';
import { defineComponent, ref, onMounted, onUpdated, onBeforeUnmount } from 'vue';
import PropTypes from '../_util/vue-types/index';
const REFRESH_INTERVAL = 1000 / 30; const REFRESH_INTERVAL = 1000 / 30;
function getTime(value) {
function getTime(value?: countdownValueType) {
return interopDefault(moment)(value).valueOf(); return interopDefault(moment)(value).valueOf();
} }
const StatisticCountdown = defineComponent({ export default defineComponent({
name: 'AStatisticCountdown', name: 'AStatisticCountdown',
props: { props: initDefaultProps(StatisticProps, {
...StatisticProps, format: 'HH:mm:ss',
format: PropTypes.string.def('HH:mm:ss'), }),
setup() {
return {
countdownId: undefined,
} as { countdownId: number };
},
mounted() {
this.syncTimer();
}, },
emits: ['finish'],
setup(props, { emit }) {
let countdownId: number | undefined = undefined;
const renderKey = ref(0);
const syncTimer = () => { updated() {
const timestamp = getTime(props.value); this.syncTimer();
},
beforeUnmount() {
this.stopTimer();
},
methods: {
syncTimer() {
const { value } = this.$props;
const timestamp = getTime(value);
if (timestamp >= Date.now()) { if (timestamp >= Date.now()) {
startTimer(); this.startTimer();
} else { } else {
stopTimer(); this.stopTimer();
} }
}; },
const startTimer = () => { startTimer() {
if (countdownId) return; if (this.countdownId) return;
countdownId = window.setInterval(() => { this.countdownId = window.setInterval(() => {
renderKey.value++; (this.$refs.statistic as any).$forceUpdate();
syncTimer(); this.syncTimer();
}, REFRESH_INTERVAL); }, REFRESH_INTERVAL);
}; },
const stopTimer = () => { stopTimer() {
if (countdownId) { const { value } = this.$props;
clearInterval(countdownId); if (this.countdownId) {
countdownId = undefined; clearInterval(this.countdownId);
this.countdownId = undefined;
const timestamp = getTime(props.value); const timestamp = getTime(value);
if (timestamp < Date.now()) { if (timestamp < Date.now()) {
emit('finish'); this.$emit('finish');
} }
} }
}; },
onMounted(() => { formatCountdown({ value, config }: { value: countdownValueType; config: FormatConfig }) {
syncTimer(); const { format } = this.$props;
}); return formatCountdown(value, { ...config, format });
},
onUpdated(() => { valueRenderHtml: node => node,
syncTimer(); },
});
onBeforeUnmount(() => { render() {
stopTimer(); return (
});
return () => (
<Statistic <Statistic
data-key={renderKey.value}
ref="statistic" ref="statistic"
{...{ {...{
...props, ...this.$props,
valueRender: node => node, valueRender: this.valueRenderHtml,
formatter: ({ value }) => formatCountdown(value, { format: props.format }), formatter: this.formatCountdown,
}} }}
/> />
); );
}, },
}); });
export default StatisticCountdown;

48
components/statistic/Number.tsx
View File

@ -1,19 +1,23 @@
import padEnd from 'lodash-es/padEnd'; import padEnd from 'lodash-es/padEnd';
import { FunctionalComponent, VNodeTypes } from 'vue'; import { FunctionalComponent, VNodeTypes } from 'vue';
import { StatisticProps, StatisticPropsType } from './Statistic'; import { FormatConfig, valueType } from './utils';
import PropTypes from '../_util/vue-types/index';
const StatisticNumber: FunctionalComponent<Omit<StatisticPropsType, 'formatter'> & { interface NumberProps extends FormatConfig {
formatter?: VNodeTypes; value: valueType;
}> = props => { }
const { formatter, value, groupSeparator, precision, decimalSeparator, prefixCls } = props;
const Number: FunctionalComponent<NumberProps> = props => {
const { value, formatter, precision, decimalSeparator, groupSeparator = '', prefixCls } = props;
let valueNode: VNodeTypes; let valueNode: VNodeTypes;
if (formatter) { if (typeof formatter === 'function') {
valueNode = formatter; // Customize formatter
valueNode = formatter({ value });
} else { } else {
// Internal formatter
const val = String(value); const val = String(value);
const cells = val.match(/^(-?)(\d*)(\.(\d+))?$/); const cells = val.match(/^(-?)(\d*)(\.(\d+))?$/);
// Process if illegal number
if (!cells) { if (!cells) {
valueNode = val; valueNode = val;
} else { } else {
@ -29,25 +33,21 @@ const StatisticNumber: FunctionalComponent<Omit<StatisticPropsType, 'formatter'>
if (decimal) { if (decimal) {
decimal = `${decimalSeparator}${decimal}`; decimal = `${decimalSeparator}${decimal}`;
} }
valueNode = (
<> valueNode = [
<span key="int" class={`${prefixCls}-content-value-int`}> <span key="int" class={`${prefixCls}-content-value-int`}>
{negative} {negative}
{int} {int}
</span>,
decimal && (
<span key="decimal" class={`${prefixCls}-content-value-decimal`}>
{decimal}
</span> </span>
{decimal && ( ),
<span key="decimal" class={`${prefixCls}-content-value-decimal`}> ];
{decimal}
</span>
)}
</>
);
} }
} }
return <span class={`${prefixCls}-content-value`}>{valueNode}</span>; return <span class={`${prefixCls}-content-value`}>{valueNode}</span>;
}; };
export default Number;
StatisticNumber.props = { ...StatisticProps, formatter: PropTypes.VNodeChild };
export default StatisticNumber;

82
components/statistic/Statistic.tsx
View File

@ -1,63 +1,71 @@
import { defineComponent, inject, VNodeTypes, computed } from 'vue'; import { defineComponent, inject, PropType } from 'vue';
import { VueTypeValidableDef } from 'vue-types';
import { defaultConfigProvider } from '../config-provider';
import { getComponent } from '../_util/props-util';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { getComponent } from '../_util/props-util';
import initDefaultProps from '../_util/props-util/initDefaultProps';
import { defaultConfigProvider } from '../config-provider';
import StatisticNumber from './Number'; import StatisticNumber from './Number';
import { countdownValueType } from './utils';
export const StatisticProps = { export const StatisticProps = {
decimalSeparator: PropTypes.string.def('.'), prefixCls: PropTypes.string,
formatter: PropTypes.func as VueTypeValidableDef<(params: { value: unknown }) => VNodeTypes>, decimalSeparator: PropTypes.string,
groupSeparator: PropTypes.string.def(','), groupSeparator: PropTypes.string,
format: PropTypes.string,
value: {
type: [String, Number, Object] as PropType<countdownValueType>,
},
valueStyle: PropTypes.style,
valueRender: PropTypes.any,
formatter: PropTypes.any,
precision: PropTypes.number, precision: PropTypes.number,
prefix: PropTypes.VNodeChild, prefix: PropTypes.VNodeChild,
suffix: PropTypes.VNodeChild, suffix: PropTypes.VNodeChild,
title: PropTypes.VNodeChild, title: PropTypes.VNodeChild,
value: PropTypes.any, onFinish: PropTypes.func,
valueStyle: PropTypes.style,
prefixCls: PropTypes.string,
valueRender: PropTypes.func as VueTypeValidableDef<(node: VNodeTypes) => VNodeTypes>,
}; };
export type StatisticPropsType = Parameters<typeof Statistic['setup']>['0']; export default defineComponent({
const Statistic = defineComponent({
name: 'AStatistic', name: 'AStatistic',
props: StatisticProps, props: initDefaultProps(StatisticProps, {
setup(props) { decimalSeparator: '.',
const configProvider = inject('configProvider', defaultConfigProvider); groupSeparator: ',',
const getPrefixCls = configProvider.getPrefixCls; }),
const prefixCls = computed(() => getPrefixCls('statistic', props.prefixCls));
return { prefixCls };
},
render() {
const { prefixCls, valueStyle, valueRender, value } = this;
const valueNode = ( setup() {
<StatisticNumber return {
{...{ configProvider: inject('configProvider', defaultConfigProvider),
...this.$props, };
prefixCls: this.prefixCls, },
formatter: getComponent(this, 'formatter', { value }),
}} render() {
/> const { prefixCls: customizePrefixCls, value = 0, valueStyle, valueRender } = this.$props;
); const { getPrefixCls } = this.configProvider;
const prefixCls = getPrefixCls('statistic', customizePrefixCls);
const title = getComponent(this, 'title'); const title = getComponent(this, 'title');
const prefix = getComponent(this, 'prefix'); let prefix = getComponent(this, 'prefix');
const suffix = getComponent(this, 'suffix'); let suffix = getComponent(this, 'suffix');
const formatter = getComponent(this, 'formatter', {}, false);
const props = {
...this.$props,
prefixCls,
value,
formatter,
};
let valueNode = <StatisticNumber {...props} />;
if (valueRender) {
valueNode = valueRender(valueNode);
}
return ( return (
<div class={prefixCls}> <div class={prefixCls}>
{title && <div class={`${prefixCls}-title`}>{title}</div>} {title && <div class={`${prefixCls}-title`}>{title}</div>}
<div style={valueStyle} class={`${prefixCls}-content`}> <div style={valueStyle} class={`${prefixCls}-content`}>
{prefix && <span class={`${prefixCls}-content-prefix`}>{prefix}</span>} {prefix && <span class={`${prefixCls}-content-prefix`}>{prefix}</span>}
{valueRender ? valueRender(valueNode) : valueNode} {valueNode}
{suffix && <span class={`${prefixCls}-content-suffix`}>{suffix}</span>} {suffix && <span class={`${prefixCls}-content-suffix`}>{suffix}</span>}
</div> </div>
</div> </div>
); );
}, },
}); });
export default Statistic;

2
components/statistic/index.ts
View File

@ -1,6 +1,6 @@
import { App } from 'vue';
import Statistic from './Statistic'; import Statistic from './Statistic';
import Countdown from './Countdown'; import Countdown from './Countdown';
import { App } from 'vue';
Statistic.Countdown = Countdown; Statistic.Countdown = Countdown;
/* istanbul ignore next */ /* istanbul ignore next */

32
components/statistic/utils.ts
View File

@ -1,10 +1,32 @@
import { VNodeTypes } from 'vue';
import moment from 'moment'; import moment from 'moment';
import padStart from 'lodash-es/padStart'; import padStart from 'lodash-es/padStart';
import interopDefault from '../_util/interopDefault'; import interopDefault from '../_util/interopDefault';
export type valueType = number | string;
export type countdownValueType = valueType | string;
export type Formatter =
| false
| 'number'
| 'countdown'
| (({ value, config }: { value: valueType; config?: FormatConfig }) => VNodeTypes);
export interface FormatConfig {
formatter?: Formatter;
decimalSeparator?: string;
groupSeparator?: string;
precision?: number;
prefixCls?: string;
}
export interface CountdownFormatConfig extends FormatConfig {
format?: string;
}
// Countdown // Countdown
const timeUnits = [ const timeUnits: [string, number][] = [
['Y', 1000 * 60 * 60 * 24 * 365], // years ['Y', 1000 * 60 * 60 * 24 * 365], // years
['M', 1000 * 60 * 60 * 24 * 30], // months ['M', 1000 * 60 * 60 * 24 * 30], // months
['D', 1000 * 60 * 60 * 24], // days ['D', 1000 * 60 * 60 * 24], // days
@ -12,10 +34,10 @@ const timeUnits = [
['m', 1000 * 60], // minutes ['m', 1000 * 60], // minutes
['s', 1000], // seconds ['s', 1000], // seconds
['S', 1], // million seconds ['S', 1], // million seconds
] as const; ];
export function formatTimeStr(duration, format) { export function formatTimeStr(duration: number, format: string) {
let leftDuration = duration; let leftDuration: number = duration;
const escapeRegex = /\[[^\]]*\]/g; const escapeRegex = /\[[^\]]*\]/g;
const keepList = (format.match(escapeRegex) || []).map(str => str.slice(1, -1)); const keepList = (format.match(escapeRegex) || []).map(str => str.slice(1, -1));
@ -41,7 +63,7 @@ export function formatTimeStr(duration, format) {
}); });
} }
export function formatCountdown(value, config) { export function formatCountdown(value: countdownValueType, config: CountdownFormatConfig) {
const { format = '' } = config; const { format = '' } = config;
const target = interopDefault(moment)(value).valueOf(); const target = interopDefault(moment)(value).valueOf();
const current = interopDefault(moment)().valueOf(); const current = interopDefault(moment)().valueOf();