feat: make statistic component support html role and data-* and aria-* attributes

components/statistic/Countdown.tsx

@@ -9,7 +9,6 @@ import { formatCountdown } from './utils';
 const REFRESH_INTERVAL = 1000 / 30;
 
 export interface CountdownProps extends StatisticProps {
-  value?: valueType;
   format?: string;
   onFinish?: () => void;
   onChange?: (value?: valueType) => void;
@@ -20,7 +19,7 @@ function getTime(value?: valueType) {
 }
 
 const Countdown: React.FC<CountdownProps> = (props) => {
-  const { value, format = 'HH:mm:ss', onChange, onFinish } = props;
+  const { value, format = 'HH:mm:ss', onChange, onFinish, ...rest } = props;
 
   const forceUpdate = useForceUpdate();
 
@@ -63,7 +62,7 @@ const Countdown: React.FC<CountdownProps> = (props) => {
   const valueRender = (node: React.ReactElement<HTMLDivElement>) =>
     cloneElement(node, { title: undefined });
 
-  return <Statistic {...props} valueRender={valueRender} formatter={formatter} />;
+  return <Statistic {...rest} value={value} valueRender={valueRender} formatter={formatter} />;
 };
 
 export default React.memo(Countdown);

components/statistic/Number.tsx

@@ -3,6 +3,7 @@ import type { FormatConfig, valueType } from './utils';
 
 interface NumberProps extends FormatConfig {
   value: valueType;
+  prefixCls?: string;
 }
 
 const StatisticNumber: React.FC<NumberProps> = (props) => {

components/statistic/Statistic.tsx

@@ -7,23 +7,26 @@ import StatisticNumber from './Number';
 import useStyle from './style';
 import type { FormatConfig, valueType } from './utils';
 
-export interface StatisticProps extends FormatConfig {
+type StatisticHTMLAttributes = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'title' | 'prefix' | 'onChange'
+>;
+
+interface StatisticReactProps extends FormatConfig {
   prefixCls?: string;
-  className?: string;
   rootClassName?: string;
-  style?: React.CSSProperties;
   value?: valueType;
   valueStyle?: React.CSSProperties;
   valueRender?: (node: React.ReactNode) => React.ReactNode;
   title?: React.ReactNode;
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   loading?: boolean;
-  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
-  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
 }
 
-const Statistic: React.FC<StatisticProps> = (props) => {
+export type StatisticProps = StatisticHTMLAttributes & StatisticReactProps;
+
+const Statistic: React.FC<StatisticProps & StatisticHTMLAttributes> = (props) => {
   const {
     prefixCls: customizePrefixCls,
     className,
@@ -36,10 +39,13 @@ const Statistic: React.FC<StatisticProps> = (props) => {
     prefix,
     suffix,
     loading = false,
-    onMouseEnter,
-    onMouseLeave,
+    /* --- FormatConfig starts --- */
+    formatter,
+    precision,
     decimalSeparator = '.',
     groupSeparator = ',',
+    /* --- FormatConfig starts --- */
+    ...rest
   } = props;
 
   const { getPrefixCls, direction, statistic } =
@@ -54,7 +60,8 @@ const Statistic: React.FC<StatisticProps> = (props) => {
       decimalSeparator={decimalSeparator}
       groupSeparator={groupSeparator}
       prefixCls={prefixCls}
-      {...props}
+      formatter={formatter}
+      precision={precision}
       value={value}
     />
   );
@@ -72,12 +79,7 @@ const Statistic: React.FC<StatisticProps> = (props) => {
   );
 
   return wrapCSSVar(
-    <div
-      className={cls}
-      style={{ ...statistic?.style, ...style }}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-    >
+    <div {...rest} className={cls} style={{ ...statistic?.style, ...style }}>
       {title && <div className={`${prefixCls}-title`}>{title}</div>}
       <Skeleton paragraph={false} loading={loading} className={`${prefixCls}-skeleton`}>
         <div style={valueStyle} className={`${prefixCls}-content`}>

components/statistic/__tests__/index.test.tsx

@@ -81,6 +81,16 @@ describe('Statistic', () => {
     expect(container.querySelectorAll('.ant-statistic-content')).toHaveLength(0);
   });
 
+  it('data attrs', () => {
+    const { container } = render(<Statistic value={1128} data-abc="1" />);
+    expect(container.querySelector('.ant-statistic')!.getAttribute('data-abc')).toEqual('1');
+
+    const { container: countdownContainer } = render(<Statistic.Countdown data-xyz="2" />);
+    expect(countdownContainer.querySelector('.ant-statistic')!.getAttribute('data-xyz')).toEqual(
+      '2',
+    );
+  });
+
   describe('Countdown', () => {
     it('render correctly', () => {
       const now = dayjs()

components/statistic/utils.ts

@@ -15,7 +15,6 @@ export interface FormatConfig {
   decimalSeparator?: string;
   groupSeparator?: string;
   precision?: number;
-  prefixCls?: string;
 }
 
 export interface CountdownFormatConfig extends FormatConfig {