Spin support setDefaultIndicator (#10815)

* Add `setDefaultIndicator` in Spin
* Update doc

ref: https://github.com/ant-design/ant-design/issues/10787

components/spin/index.en-US.md

@@ -20,3 +20,8 @@ When part of the page is waiting for asynchronous data or during a rendering pro
 | spinning | whether Spin is spinning | boolean | true |
 | tip | customize description content when Spin has children | string | - |
 | wrapperClassName | className of wrapper when Spin has children | string | - |
+
+### Static Method
+
+- `Spin.setDefaultIndicator(indicator: ReactElement)`  
+  As `indicator`, you can define the global default spin element

components/spin/index.tsx

@@ -24,7 +24,35 @@ export interface SpinState {
   notCssAnimationSupported?: boolean;
 }
 
-export default class Spin extends React.Component<SpinProps, SpinState> {
+// Render indicator
+let defaultIndicator: React.ReactNode = null;
+
+function renderIndicator(props: SpinProps): React.ReactNode {
+  const { prefixCls, indicator } = props;
+  const dotClassName = `${prefixCls}-dot`;
+  if (React.isValidElement(indicator)) {
+    return React.cloneElement((indicator as SpinIndicator), {
+      className: classNames((indicator as SpinIndicator).props.className, dotClassName),
+    });
+  }
+
+  if (React.isValidElement(defaultIndicator)) {
+    return React.cloneElement((defaultIndicator as SpinIndicator), {
+      className: classNames((defaultIndicator as SpinIndicator).props.className, dotClassName),
+    });
+  }
+
+  return (
+    <span className={classNames(dotClassName, `${prefixCls}-dot-spin`)}>
+        <i />
+        <i />
+        <i />
+        <i />
+      </span>
+  );
+}
+
+class Spin extends React.Component<SpinProps, SpinState> {
   static defaultProps = {
     prefixCls: 'ant-spin',
     spinning: true,
@@ -41,6 +69,10 @@ export default class Spin extends React.Component<SpinProps, SpinState> {
     indicator: PropTypes.node,
   };
 
+  static setDefaultIndicator(indicator: React.ReactNode) {
+    defaultIndicator = indicator;
+  }
+
   debounceTimeout: number;
   delayTimeout: number;
 
@@ -90,24 +122,6 @@ export default class Spin extends React.Component<SpinProps, SpinState> {
     }
   }
 
-  renderIndicator() {
-    const { prefixCls, indicator } = this.props;
-    const dotClassName = `${prefixCls}-dot`;
-    if (React.isValidElement(indicator)) {
-      return React.cloneElement((indicator as SpinIndicator), {
-        className: classNames((indicator as SpinIndicator).props.className, dotClassName),
-      });
-    }
-    return (
-      <span className={classNames(dotClassName, `${prefixCls}-dot-spin`)}>
-        <i />
-        <i />
-        <i />
-        <i />
-      </span>
-    );
-  }
-
   render() {
     const { className, size, prefixCls, tip, wrapperClassName, ...restProps } = this.props;
     const { spinning } = this.state;
@@ -128,7 +142,7 @@ export default class Spin extends React.Component<SpinProps, SpinState> {
 
     const spinElement = (
       <div {...divProps} className={spinClassName} >
-        {this.renderIndicator()}
+        {renderIndicator(this.props)}
         {tip ? <div className={`${prefixCls}-text`}>{tip}</div> : null}
       </div>
     );
@@ -159,3 +173,5 @@ export default class Spin extends React.Component<SpinProps, SpinState> {
     return spinElement;
   }
 }
+
+export default Spin;

components/spin/index.zh-CN.md

@@ -21,3 +21,8 @@ subtitle: 加载中
 | spinning | 是否旋转 | boolean | true |
 | tip | 当作为包裹元素时，可以自定义描述文案 | string | - |
 | wrapperClassName | 包装器的类属性 | string | - |
+
+### 静态方法
+
+- `Spin.setDefaultIndicator(indicator: ReactElement)`  
+  同上 `indicator`，你可以自定义全局默认元素