feat(spin): configProvider support indicator prop (#50183)

components/config-provider/context.ts

@@ -24,6 +24,7 @@ import type { ArgsProps } from '../notification/interface';
 import type { PaginationProps } from '../pagination';
 import type { SelectProps } from '../select';
 import type { SpaceProps } from '../space';
+import type { SpinProps } from '../spin';
 import type { TableProps } from '../table';
 import type { TabsProps } from '../tabs';
 import type { TagProps } from '../tag';
@@ -175,6 +176,8 @@ export type SelectConfig = ComponentStyleConfig & Pick<SelectProps, 'showSearch'
 
 export type SpaceConfig = ComponentStyleConfig & Pick<SpaceProps, 'size' | 'classNames' | 'styles'>;
 
+export type SpinConfig = ComponentStyleConfig & Pick<SpinProps, 'indicator'>;
+
 export type InputNumberConfig = ComponentStyleConfig & Pick<InputNumberProps, 'variant'>;
 
 export type CascaderConfig = ComponentStyleConfig & Pick<CascaderProps, 'variant'>;
@@ -254,7 +257,7 @@ export interface ConfigConsumerProps {
   floatButtonGroup?: FloatButtonGroupConfig;
   typography?: ComponentStyleConfig;
   skeleton?: ComponentStyleConfig;
-  spin?: ComponentStyleConfig;
+  spin?: SpinConfig;
   segmented?: ComponentStyleConfig;
   steps?: ComponentStyleConfig;
   statistic?: ComponentStyleConfig;

components/config-provider/index.en-US.md

@@ -152,7 +152,7 @@ const {
 | slider | Set Slider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | switch | Set Switch common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
-| spin | Set Spin common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| spin | Set Spin common props | { className?: string, style?: React.CSSProperties, indicator?: React.ReactElement } | - | 5.7.0, indicator: 5.20.0 |
 | statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | table | Set Table common props | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } } | - | 5.7.0, expandable: 5.14.0 |

components/config-provider/index.tsx

@@ -43,6 +43,7 @@ import type {
   RangePickerConfig,
   SelectConfig,
   SpaceConfig,
+  SpinConfig,
   TableConfig,
   TabsConfig,
   TagConfig,
@@ -189,7 +190,7 @@ export interface ConfigProviderProps {
   drawer?: DrawerConfig;
   typography?: ComponentStyleConfig;
   skeleton?: ComponentStyleConfig;
-  spin?: ComponentStyleConfig;
+  spin?: SpinConfig;
   segmented?: ComponentStyleConfig;
   statistic?: ComponentStyleConfig;
   steps?: ComponentStyleConfig;

components/config-provider/index.zh-CN.md

@@ -154,7 +154,7 @@ const {
 | slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | switch | 设置 Switch 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
-| spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: React.ReactElement } | - | 5.7.0, indicator: 5.20.0 |
 | statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } } | - | 5.7.0, expandable: 5.14.0 |

components/spin/__tests__/index.test.tsx

@@ -4,6 +4,7 @@ import Spin from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { act, render, waitFakeTimer } from '../../../tests/utils';
+import ConfigProvider from '../../config-provider';
 
 describe('Spin', () => {
   beforeEach(() => {
@@ -101,6 +102,15 @@ describe('Spin', () => {
     expect(element).not.toHaveStyle({ pointerEvents: 'none' });
   });
 
+  it('should support ConfigProvider indicator', () => {
+    const { container } = render(
+      <ConfigProvider spin={{ indicator: <div className="custom-indicator" /> }}>
+        <Spin />
+      </ConfigProvider>,
+    );
+    expect(container.querySelector('.custom-indicator')).toBeTruthy();
+  });
+
   describe('percent', () => {
     it('percent support auto', () => {
       const { container } = render(<Spin percent="auto" />);

components/spin/index.tsx

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import { debounce } from 'throttle-debounce';
 
 import { devUseWarning } from '../_util/warning';
-import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
 import Indicator from './Indicator';
 import useStyle from './style/index';
@@ -70,7 +69,7 @@ const Spin: SpinType = (props) => {
     ...restProps
   } = props;
 
-  const { getPrefixCls } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, spin } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('spin', customizePrefixCls);
 
@@ -111,8 +110,6 @@ const Spin: SpinType = (props) => {
     );
   }
 
-  const { direction, spin } = React.useContext<ConfigConsumerProps>(ConfigContext);
-
   const spinClassName = classNames(
     prefixCls,
     spin?.className,
@@ -133,6 +130,8 @@ const Spin: SpinType = (props) => {
     [`${prefixCls}-blur`]: spinning,
   });
 
+  const mergedIndicator = indicator ?? spin?.indicator ?? defaultIndicator;
+
   const mergedStyle: React.CSSProperties = { ...spin?.style, ...style };
 
   const spinElement: React.ReactNode = (
@@ -143,11 +142,7 @@ const Spin: SpinType = (props) => {
       aria-live="polite"
       aria-busy={spinning}
     >
-      <Indicator
+      <Indicator prefixCls={prefixCls} indicator={mergedIndicator} percent={mergedPercent} />
-        prefixCls={prefixCls}
-        indicator={indicator ?? defaultIndicator}
-        percent={mergedPercent}
-      />
       {tip && (isNestedPattern || fullscreen) ? (
         <div className={`${prefixCls}-text`}>{tip}</div>
       ) : null}