From cebcdd91bda5c36f9d621a72b22ef7f052c1f5b3 Mon Sep 17 00:00:00 2001 From: syt Date: Mon, 8 Jun 2020 17:52:12 +0800 Subject: [PATCH] feat: update Statistic --- components/statistic/Countdown.jsx | 3 +- components/statistic/Number.jsx | 87 ++++++++++++++---------------- components/statistic/Statistic.jsx | 17 ++++-- components/statistic/index.js | 8 ++- examples/App.vue | 34 +++++++++++- examples/index.js | 2 + 6 files changed, 91 insertions(+), 60 deletions(-) diff --git a/components/statistic/Countdown.jsx b/components/statistic/Countdown.jsx index 79137efdbf..f30f405792 100644 --- a/components/statistic/Countdown.jsx +++ b/components/statistic/Countdown.jsx @@ -1,6 +1,6 @@ import * as moment from 'moment'; import interopDefault from '../_util/interopDefault'; -import { initDefaultProps, getListeners } from '../_util/props-util'; +import { initDefaultProps } from '../_util/props-util'; import Statistic, { StatisticProps } from './Statistic'; import { formatCountdown } from './utils'; @@ -82,7 +82,6 @@ export default { valueRender: this.valueRenderHtml, formatter: this.formatCountdown, }, - on: getListeners(this), }} /> ); diff --git a/components/statistic/Number.jsx b/components/statistic/Number.jsx index 49a1a1f6f8..7d8a8ff30f 100644 --- a/components/statistic/Number.jsx +++ b/components/statistic/Number.jsx @@ -1,57 +1,50 @@ import padEnd from 'lodash/padEnd'; +import { createVNode } from 'vue'; -export default { - name: 'AStatisticNumber', - functional: true, - render(h, context) { - const { - value, - formatter, - precision, - decimalSeparator, - groupSeparator = '', - prefixCls, - } = context.props; - let valueNode; +export default (_, { attrs }) => { + const { value, formatter, precision, decimalSeparator, groupSeparator = '', prefixCls } = attrs; + let valueNode; - if (typeof formatter === 'function') { - // Customize formatter - valueNode = formatter({ value, h }); + if (typeof formatter === 'function') { + // Customize formatter + valueNode = formatter({ value, h: createVNode }); + } else { + // Internal formatter + const val = String(value); + const cells = val.match(/^(-?)(\d*)(\.(\d+))?$/); + // Process if illegal number + if (!cells) { + valueNode = val; } else { - // Internal formatter - const val = String(value); - const cells = val.match(/^(-?)(\d*)(\.(\d+))?$/); - // Process if illegal number - if (!cells) { - valueNode = val; - } else { - const negative = cells[1]; - let int = cells[2] || '0'; - let decimal = cells[4] || ''; + const negative = cells[1]; + let int = cells[2] || '0'; + let decimal = cells[4] || ''; - int = int.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator); - if (typeof precision === 'number') { - decimal = padEnd(decimal, precision, '0').slice(0, precision); - } - - if (decimal) { - decimal = `${decimalSeparator}${decimal}`; - } + int = int.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator); + if (typeof precision === 'number') { + decimal = padEnd(decimal, precision, '0').slice(0, precision); + } - valueNode = [ - - {negative} - {int} - , - decimal && ( - - {decimal} - - ), - ]; + if (decimal) { + decimal = `${decimalSeparator}${decimal}`; } + + valueNode = [ + + {negative} + {int} + , + decimal && ( + + {decimal} + + ), + ]; } + } - return {valueNode}; - }, + return {valueNode}; }; + +const name = 'AStatisticNumber'; +export { name }; diff --git a/components/statistic/Statistic.jsx b/components/statistic/Statistic.jsx index fee065f276..edc08c2ea4 100644 --- a/components/statistic/Statistic.jsx +++ b/components/statistic/Statistic.jsx @@ -1,5 +1,6 @@ +import { inject } from 'vue'; import PropTypes from '../_util/vue-types'; -import { getComponentFromProp, initDefaultProps } from '../_util/props-util'; +import { getComponent, initDefaultProps } from '../_util/props-util'; import { ConfigConsumerProps } from '../config-provider'; import StatisticNumber from './Number'; @@ -28,15 +29,21 @@ export default { configProvider: { default: () => ConfigConsumerProps }, }, + setup() { + return { + configProvider: inject('configProvider', ConfigConsumerProps), + }; + }, + render() { const { prefixCls: customizePrefixCls, value = 0, valueStyle, valueRender } = this.$props; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('statistic', customizePrefixCls); - const title = getComponentFromProp(this, 'title'); - let prefix = getComponentFromProp(this, 'prefix'); - let suffix = getComponentFromProp(this, 'suffix'); - const formatter = getComponentFromProp(this, 'formatter', {}, false); + const title = getComponent(this, 'title'); + let prefix = getComponent(this, 'prefix'); + let suffix = getComponent(this, 'suffix'); + const formatter = getComponent(this, 'formatter', {}, false); let valueNode = ( ); diff --git a/components/statistic/index.js b/components/statistic/index.js index e464f189f1..7a7bb8aee0 100644 --- a/components/statistic/index.js +++ b/components/statistic/index.js @@ -1,13 +1,11 @@ import Statistic from './Statistic'; import Countdown from './Countdown'; -import Base from '../base'; Statistic.Countdown = Countdown; /* istanbul ignore next */ -Statistic.install = function(Vue) { - Vue.use(Base); - Vue.component(Statistic.name, Statistic); - Vue.component(Statistic.Countdown.name, Statistic.Countdown); +Statistic.install = function(app) { + app.component(Statistic.name, Statistic); + app.component(Statistic.Countdown.name, Statistic.Countdown); }; export default Statistic; diff --git a/examples/App.vue b/examples/App.vue index 65723acc5b..9e901276e3 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -1,3 +1,35 @@ + diff --git a/examples/index.js b/examples/index.js index 496092d97f..f5c2a09011 100644 --- a/examples/index.js +++ b/examples/index.js @@ -14,6 +14,7 @@ import Result from 'ant-design-vue/result'; import Spin from 'ant-design-vue/spin'; import Empty from 'ant-design-vue/empty'; import Timeline from 'ant-design-vue/timeline'; +import Statistic from 'ant-design-vue/statistic'; import 'ant-design-vue/style.js'; createApp(App) @@ -30,4 +31,5 @@ createApp(App) .use(Spin) .use(Empty) .use(Timeline) + .use(Statistic) .mount('#app');