ant-design/components/badge/ScrollNumber.tsx
二货爱吃白萝卜 45eeee60bb
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
feat: Add unstable api for React 19 compitable (#51979)
* chore: add unstable entrance

* chore: rest of it

* chore: use React 19

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: test ignore 19 preload

* chore: bump rc-util

* fix: warning of pure render

* fix: warning of 19

* chore: adjust ts

* test: fix test logic

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* chore: restore file

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: update test

* test: fix test case

* test: update snapshot

* test: fix coverage

* test: fix coverage

* test: add ignore image
2024-12-18 14:09:49 +08:00

93 lines
2.4 KiB
TypeScript

import * as React from 'react';
import classNames from 'classnames';
import { cloneElement } from '../_util/reactNode';
import { ConfigContext } from '../config-provider';
import SingleNumber from './SingleNumber';
export interface ScrollNumberProps {
prefixCls?: string;
className?: string;
motionClassName?: string;
count?: string | number | null;
children?: React.ReactElement;
component?: React.ComponentType<any>;
style?: React.CSSProperties;
title?: string | number | null;
show: boolean;
}
export interface ScrollNumberState {
animateStarted?: boolean;
count?: string | number | null;
}
const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
count,
className,
motionClassName,
style,
title,
show,
component: Component = 'sup',
children,
...restProps
} = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
// ============================ Render ============================
const newProps = {
...restProps,
'data-show': show,
style,
className: classNames(prefixCls, className, motionClassName),
title: title as string,
};
// Only integer need motion
let numberNodes: React.ReactNode = count;
if (count && Number(count) % 1 === 0) {
const numberList = String(count).split('');
numberNodes = (
<bdi>
{numberList.map((num, i) => (
<SingleNumber
prefixCls={prefixCls}
count={Number(count)}
value={num}
// eslint-disable-next-line react/no-array-index-key
key={numberList.length - i}
/>
))}
</bdi>
);
}
// allow specify the border
// mock border-color by box-shadow for compatible with old usage:
// <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
if (style?.borderColor) {
newProps.style = {
...style,
boxShadow: `0 0 0 1px ${style.borderColor} inset`,
};
}
if (children) {
return cloneElement(children, (oriProps) => ({
className: classNames(`${prefixCls}-custom-component`, oriProps?.className, motionClassName),
}));
}
return (
<Component {...newProps} ref={ref}>
{numberNodes}
</Component>
);
});
export default ScrollNumber;