chore: replace raf with rc-util/lib/raf (#27864)

components/_util/__tests__/util.test.js

@@ -1,4 +1,4 @@
-import raf from 'raf';
+import raf from 'rc-util/lib/raf';
 import React from 'react';
 import { mount } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';

components/_util/raf.ts

@@ -1,4 +1,4 @@
-import raf from 'raf';
+import raf from 'rc-util/lib/raf';
 
 interface RafMap {
   [id: number]: number;

components/_util/scrollTo.ts

@@ -1,4 +1,4 @@
-import raf from 'raf';
+import raf from 'rc-util/lib/raf';
 import getScroll, { isWindow } from './getScroll';
 import { easeInOutCubic } from './easings';
 

components/_util/throttleByAnimationFrame.tsx

@@ -1,4 +1,4 @@
-import raf from 'raf';
+import raf from 'rc-util/lib/raf';
 
 export function throttleByAnimationFrame(fn: (...args: any[]) => void) {
   let requestId: number | null;

components/collapse/openAnimation.tsx

@@ -3,7 +3,7 @@
  * If you are creating new component with animation, please use `./motion`.
  */
 import cssAnimation from '@ant-design/css-animation';
-import raf from 'raf';
+import raf from 'rc-util/lib/raf';
 
 function animate(node: HTMLElement, show: boolean, done: () => void) {
   let height: number;

components/form/__tests__/list.test.js

@@ -1,21 +1,12 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import raf from 'raf';
 import { act } from 'react-dom/test-utils';
 import Form from '..';
 import Input from '../../input';
 import Button from '../../button';
 import { sleep } from '../../../tests/utils';
 
-jest.mock('raf');
-
 describe('Form.List', () => {
-  raf.mockImplementation(callback => window.setTimeout(callback));
-
-  afterAll(() => {
-    raf.mockRestore();
-  });
-
   async function change(wrapper, index, value) {
     wrapper.find(Input).at(index).simulate('change', { target: { value } });
     await sleep();

components/form/hooks/useFrameState.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRef } from 'react';
-import raf from 'raf';
+import raf from 'rc-util/lib/raf';
 
 type Updater<ValueType> = (prev?: ValueType) => ValueType;
 

components/slider/SliderTooltip.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useRef } from 'react';
 import { composeRef } from 'rc-util/lib/ref';
+import raf from 'rc-util/lib/raf';
 import Tooltip, { TooltipProps } from '../tooltip';
 
 const SliderTooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
@@ -10,12 +11,12 @@ const SliderTooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   const rafRef = useRef<number | null>(null);
 
   function cancelKeepAlign() {
-    window.cancelAnimationFrame(rafRef.current!);
+    raf.cancel(rafRef.current!);
     rafRef.current = null;
   }
 
   function keepAlign() {
-    rafRef.current = window.requestAnimationFrame(() => {
+    rafRef.current = raf(() => {
       innerRef.current.forcePopupAlign();
       rafRef.current = null;
       keepAlign();

package.json

@@ -117,7 +117,6 @@
     "lodash": "^4.17.20",
     "moment": "^2.25.3",
     "omit.js": "^2.0.2",
-    "raf": "^3.4.1",
     "rc-animate": "~3.1.0",
     "rc-cascader": "~1.4.0",
     "rc-checkbox": "~2.3.0",
@@ -166,7 +165,6 @@
     "@types/jest-image-snapshot": "^4.1.0",
     "@types/lodash": "^4.14.139",
     "@types/puppeteer": "^5.4.0",
-    "@types/raf": "^3.4.0",
     "@types/react": "^16.9.21",
     "@types/react-color": "^3.0.1",
     "@types/react-copy-to-clipboard": "^4.3.0",