feat: update Statistic (#2386)

Co-authored-by: tangjinzhou <[email protected]>

Author: ununian

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),
         }}
       />
     );

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 = [
-          <span key="int" class={`${prefixCls}-content-value-int`}>
-            {negative}
-            {int}
-          </span>,
-          decimal && (
-            <span key="decimal" class={`${prefixCls}-content-value-decimal`}>
-              {decimal}
-            </span>
-          ),
-        ];
+      if (decimal) {
+        decimal = `${decimalSeparator}${decimal}`;
       }
+
+      valueNode = [
+        <span key="int" class={`${prefixCls}-content-value-int`}>
+          {negative}
+          {int}
+        </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>;
 };
+
+const name = 'AStatisticNumber';
+export { name };

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 = (
       <StatisticNumber {...{ props: { ...this.$props, prefixCls, value, formatter } }} />
     );

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;

examples/index.js

@@ -18,6 +18,7 @@ import PageHeader from 'ant-design-vue/page-header';
 import Skeleton from 'ant-design-vue/skeleton';
 import Empty from 'ant-design-vue/empty';
 import Timeline from 'ant-design-vue/timeline';
+import Statistic from 'ant-design-vue/statistic';
 import Checkbox from 'ant-design-vue/checkbox';
 import Col from 'ant-design-vue/col';
 import Row from 'ant-design-vue/row';
@@ -34,6 +35,7 @@ import Menu from 'ant-design-vue/menu';
 import Mentions from 'ant-design-vue/mentions';
 import Dropdown from 'ant-design-vue/dropdown';
 import Steps from 'ant-design-vue/steps';
+
 import 'ant-design-vue/style.js';
 
 const basic = {
@@ -68,6 +70,7 @@ app
   .use(Empty)
   .use(Checkbox)
   .use(Timeline)
+  .use(Statistic)
   .use(Col)
   .use(Row)
   .use(Tooltip)