refactor: wrap Spin with FC (#35114)

* refactor: wrap Spin with FC

* chore: code clean

components/spin/__tests__/delay.test.js

@@ -1,8 +1,14 @@
 import React from 'react';
 import { mount } from 'enzyme';
+// eslint-disable-next-line import/no-named-as-default
+import { render } from '@testing-library/react';
+import debounce from 'lodash/debounce';
 import Spin from '..';
 import { sleep } from '../../../tests/utils';
 
+jest.mock('lodash/debounce');
+debounce.mockImplementation(jest.requireActual('lodash/debounce'));
+
 describe('delay spinning', () => {
   it("should render with delay when it's mounted with spinning=true and delay", () => {
     const wrapper = mount(<Spin spinning delay={500} />);
@@ -23,11 +29,13 @@ describe('delay spinning', () => {
   });
 
   it('should cancel debounce function when unmount', async () => {
-    const wrapper = mount(<Spin spinning delay={100} />);
+    const debouncedFn = jest.fn();
-    const spy = jest.spyOn(wrapper.find(Spin).instance().updateSpinning, 'cancel');
+    const cancel = jest.fn();
-    expect(wrapper.find(Spin).instance().updateSpinning.cancel).toEqual(expect.any(Function));
+    debouncedFn.cancel = cancel;
-    expect(spy).not.toHaveBeenCalled();
+    debounce.mockReturnValueOnce(debouncedFn);
-    wrapper.unmount();
+    const { unmount } = render(<Spin spinning delay={100} />);
-    expect(spy).toHaveBeenCalled();
+    expect(cancel).not.toHaveBeenCalled();
+    unmount();
+    expect(cancel).toHaveBeenCalled();
   });
 });

components/spin/__tests__/index.test.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
+// eslint-disable-next-line import/no-named-as-default
+import { render } from '@testing-library/react';
 import Spin from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { render } from '../../../tests/utils';
 
 describe('Spin', () => {
   mountTest(Spin);
@@ -27,9 +28,9 @@ describe('Spin', () => {
 
   it('should be controlled by spinning', () => {
     const { container, rerender } = render(<Spin spinning={false} />);
-    expect(container.querySelector('.ant-spin')).not.toHaveClass('ant-spin-spinning');
+    expect(container.querySelector('.ant-spin-spinning')).toBeFalsy();
     rerender(<Spin spinning />);
-    expect(container.querySelector('.ant-spin')).toHaveClass('ant-spin-spinning');
+    expect(container.querySelector('.ant-spin-spinning')).toBeTruthy();
   });
 
   it('if indicator set null should not be render default indicator', () => {

components/spin/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import debounce from 'lodash/debounce';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigConsumer, ConfigConsumerProps, ConfigContext } from '../config-provider';
 import { tuple } from '../_util/type';
 import { isValidElement, cloneElement } from '../_util/reactNode';
 
@@ -23,6 +23,14 @@ export interface SpinProps {
   children?: React.ReactNode;
 }
 
+export interface SpinClassProps extends SpinProps {
+  spinPrefixCls: string;
+}
+
+export type SpinFCType = React.FC<SpinProps> & {
+  setDefaultIndicator: (indicator: React.ReactNode) => void;
+};
+
 export interface SpinState {
   spinning?: boolean;
   notCssAnimationSupported?: boolean;
@@ -31,7 +39,7 @@ export interface SpinState {
 // Render indicator
 let defaultIndicator: React.ReactNode = null;
 
-function renderIndicator(prefixCls: string, props: SpinProps): React.ReactNode {
+function renderIndicator(prefixCls: string, props: SpinClassProps): React.ReactNode {
   const { indicator } = props;
   const dotClassName = `${prefixCls}-dot`;
 
@@ -66,20 +74,16 @@ function shouldDelay(spinning?: boolean, delay?: number): boolean {
   return !!spinning && !!delay && !isNaN(Number(delay));
 }
 
-class Spin extends React.Component<SpinProps, SpinState> {
+class Spin extends React.Component<SpinClassProps, SpinState> {
   static defaultProps = {
     spinning: true,
     size: 'default' as SpinSize,
     wrapperClassName: '',
   };
 
-  static setDefaultIndicator(indicator: React.ReactNode) {
-    defaultIndicator = indicator;
-  }
-
   originalUpdateSpinning: () => void;
 
-  constructor(props: SpinProps) {
+  constructor(props: SpinClassProps) {
     super(props);
 
     const { spinning, delay } = props;
@@ -104,7 +108,7 @@ class Spin extends React.Component<SpinProps, SpinState> {
     this.cancelExistingSpin();
   }
 
-  debouncifyUpdateSpinning = (props?: SpinProps) => {
+  debouncifyUpdateSpinning = (props?: SpinClassProps) => {
     const { delay } = props || this.props;
     if (delay) {
       this.cancelExistingSpin();
@@ -131,9 +135,9 @@ class Spin extends React.Component<SpinProps, SpinState> {
     return !!(this.props && typeof this.props.children !== 'undefined');
   }
 
-  renderSpin = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
+  renderSpin = ({ direction }: ConfigConsumerProps) => {
     const {
-      prefixCls: customizePrefixCls,
+      spinPrefixCls: prefixCls,
       className,
       size,
       tip,
@@ -143,7 +147,6 @@ class Spin extends React.Component<SpinProps, SpinState> {
     } = this.props;
     const { spinning } = this.state;
 
-    const prefixCls = getPrefixCls('spin', customizePrefixCls);
     const spinClassName = classNames(
       prefixCls,
       {
@@ -157,7 +160,7 @@ class Spin extends React.Component<SpinProps, SpinState> {
     );
 
     // fix https://fb.me/react-unknown-prop
-    const divProps = omit(restProps, ['spinning', 'delay', 'indicator']);
+    const divProps = omit(restProps, ['spinning', 'delay', 'indicator', 'prefixCls']);
 
     const spinElement = (
       <div
@@ -192,4 +195,25 @@ class Spin extends React.Component<SpinProps, SpinState> {
   }
 }
 
-export default Spin;
+const SpinFC: SpinFCType = (props: SpinProps) => {
+  const { prefixCls: customizePrefixCls } = props;
+  const { getPrefixCls } = React.useContext(ConfigContext);
+
+  const spinPrefixCls = getPrefixCls('spin', customizePrefixCls);
+
+  const spinClassProps: SpinClassProps = {
+    ...props,
+    spinPrefixCls,
+  };
+  return <Spin {...spinClassProps} />;
+};
+
+SpinFC.setDefaultIndicator = (indicator: React.ReactNode) => {
+  defaultIndicator = indicator;
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  SpinFC.displayName = 'Spin';
+}
+
+export default SpinFC;