feat: custom global indicator for Spin (#2897)

packages/semi-foundation/button/animation.scss

@@ -65,3 +65,6 @@ $transform_scale-button_light: var(--semi-transform_scale-none);//浅色按钮-
 $transform_scale-button_warning: var(--semi-transform_scale-none);//警告按钮-放大
 $transform_scale-button_danger: var(--semi-transform_scale-none);//危险按钮-放大
 $transform_scale-button_borderless: var(--semi-transform_scale-none);//无边框按钮-放大
+
+$animation_duration-button_icon_loading: 600ms; // 加载图标容器旋转一周时长
+$animation_duration-button_icon_customIcon_loading: 1600ms; // 自定义指示器时旋转一周时长

packages/semi-foundation/button/iconButton.scss

@@ -1,5 +1,6 @@
 @import "./variables.scss";
 @import "../keyframes/rotate.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-button;
 
@@ -29,10 +30,14 @@ $module: #{$prefix}-button;
 
         .#{$module}-content {
 
+            .#{$module}-content-loading-icon {
+                animation: $animation_duration-button_icon_customIcon_loading linear infinite #{$prefix}-animation-rotate;
+            }
+
             &>svg {
                 width: 16px;
                 height: 16px;
-                animation: .6s linear infinite #{$prefix}-animation-rotate;
+                animation: $animation_duration-button_icon_loading linear infinite #{$prefix}-animation-rotate;
                 animation-fill-mode: forwards;
             }
         }

packages/semi-ui/_utils/semi-global.ts

@@ -18,6 +18,7 @@ import type { TimePickerProps } from "../timePicker";
 import type { ToastReactProps } from "../toast";
 import type { TooltipProps } from "../tooltip";
 import type { MarkdownRenderProps } from "../markdownRender";
+import { SpinProps } from "../spin";
 
 class SemiGlobal {
 
@@ -70,7 +71,7 @@ class SemiGlobal {
             // Skeleton?: Partial<SkeletonProps>;
             // Slider?: Partial<SliderProps>;
             // Space?: Partial<SpaceProps>;
-            // Spin?: Partial<SpinProps>;
+            Spin?: Partial<SpinProps>;
             // Steps?: Partial<StepsProps>;
             // Switch?: Partial<SwitchProps>;
             // Table?: Partial<TableProps>;

packages/semi-ui/iconButton/index.tsx

@@ -92,7 +92,7 @@ class IconButton extends PureComponent<IconButtonProps> {
         let IconElem = null;
 
         if (loading && !otherProps.disabled) {
-            IconElem = <SpinIcon />;
+            IconElem = <SpinIcon customIconCls={`${prefixCls}-content-loading-icon`}/>;
         } else if (React.isValidElement(icon)) {
             IconElem = icon;
         }

packages/semi-ui/spin/icon.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
 import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
+import semiGlobal from '../_utils/semi-global';
+import { get } from 'lodash';
+import cls from 'classnames';
 
 let _id = -1;
 
@@ -8,11 +11,16 @@ export interface IconProps {
     component?: React.ReactNode;
     size?: number;
     className?: string;
-    type?: string
+    type?: string;
+    customIconCls?: string;
 }
 
 function Icon(props: IconProps = {}) {
-    const { id: propsId, className, ...rest } = props;
+    const { id: propsId, className, customIconCls, ...rest } = props;
+    const globalIndicator = get(semiGlobal, 'config.overrideDefaultProps.Spin.indicator');
+    if (globalIndicator && React.isValidElement(globalIndicator)) {
+        return React.cloneElement(globalIndicator, { className: cls({ [customIconCls]: customIconCls, [className]: className }) } as any);
+    }
     let _propsId = propsId;
     if (isNullOrUndefined(_propsId)) {
         _id++;

packages/semi-ui/spin/index.tsx

@@ -6,6 +6,7 @@ import { cssClasses as css, strings } from '@douyinfe/semi-foundation/spin/const
 import SpinFoundation from '@douyinfe/semi-foundation/spin/foundation';
 import SpinIcon from './icon';
 import '@douyinfe/semi-foundation/spin/spin.scss';
+import { getDefaultPropsFromGlobalConfig } from '../_utils';
 
 const prefixCls = css.PREFIX;
 
@@ -40,13 +41,15 @@ class Spin extends BaseComponent<SpinProps, SpinState> {
         style: PropTypes.object,
     };
 
-    static defaultProps: SpinProps = {
+    static __SemiComponentName__ = "Spin";
+
+    static defaultProps = getDefaultPropsFromGlobalConfig(Spin.__SemiComponentName__, {
         size: 'middle',
         spinning: true,
         children: null,
         indicator: null,
         delay: 0,
-    };
+    });
 
     constructor(props: SpinProps) {
         super(props);