ant-design/components/spin/usePercent.ts
二货爱吃白萝卜 0352b2fd2e
feat: Spin support percent (#48657)
* feat: spin support ptg

* chore: ptg

* chore: update demo

* chore: popout component

* chore: adjust logic

* test: update snapshot

* test: update snapshot

* docs: update docs

* test: update snapshot

* test: update snapshot

* test: update snapshot

* chore: back of snapshot

* chore: clean up

* test: fix test case

* chore: fix types

* test: update snapshot

* chore: opt

* test: update testcase

* test: coverage

* test: update snapshot
2024-06-03 11:30:27 +08:00

47 lines
1.1 KiB
TypeScript

import * as React from 'react';
const AUTO_INTERVAL = 200;
const STEP_BUCKETS: [limit: number, stepPtg: number][] = [
[30, 0.05],
[70, 0.03],
[96, 0.01],
];
export default function usePercent(
spinning: boolean,
percent?: number | 'auto',
): number | undefined {
const [mockPercent, setMockPercent] = React.useState(0);
const mockIntervalRef = React.useRef<ReturnType<typeof setInterval>>();
const isAuto = percent === 'auto';
React.useEffect(() => {
if (isAuto && spinning) {
setMockPercent(0);
mockIntervalRef.current = setInterval(() => {
setMockPercent((prev) => {
const restPTG = 100 - prev;
for (let i = 0; i < STEP_BUCKETS.length; i += 1) {
const [limit, stepPtg] = STEP_BUCKETS[i];
if (prev <= limit) {
return prev + restPTG * stepPtg;
}
}
return prev;
});
}, AUTO_INTERVAL);
}
return () => {
clearInterval(mockIntervalRef.current);
};
}, [isAuto, spinning]);
return isAuto ? mockPercent : percent;
}