diff --git a/components/spin/index.en-US.md b/components/spin/index.en-US.md index e2754f2157..d7fe54f4ba 100644 --- a/components/spin/index.en-US.md +++ b/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 diff --git a/components/spin/index.tsx b/components/spin/index.tsx index c071cd23c7..d1262e718f 100644 --- a/components/spin/index.tsx +++ b/components/spin/index.tsx @@ -24,7 +24,35 @@ export interface SpinState { notCssAnimationSupported?: boolean; } -export default class Spin extends React.Component { +// 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 ( + + + + + + + ); +} + +class Spin extends React.Component { static defaultProps = { prefixCls: 'ant-spin', spinning: true, @@ -41,6 +69,10 @@ export default class Spin extends React.Component { 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 { } } - 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 ( - - - - - - - ); - } - 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 { const spinElement = (
- {this.renderIndicator()} + {renderIndicator(this.props)} {tip ?
{tip}
: null}
); @@ -159,3 +173,5 @@ export default class Spin extends React.Component { return spinElement; } } + +export default Spin; diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md index e5c8899d4c..d3f01600a0 100644 --- a/components/spin/index.zh-CN.md +++ b/components/spin/index.zh-CN.md @@ -21,3 +21,8 @@ subtitle: 加载中 | spinning | 是否旋转 | boolean | true | | tip | 当作为包裹元素时,可以自定义描述文案 | string | - | | wrapperClassName | 包装器的类属性 | string | - | + +### 静态方法 + +- `Spin.setDefaultIndicator(indicator: ReactElement)` + 同上 `indicator`,你可以自定义全局默认元素