From a438b9b33f864074e6eba1362ea5b0323b216a9b Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Wed, 14 Feb 2018 12:30:31 +0800 Subject: [PATCH] Add spin dot className to custom indicator --- .../__tests__/__snapshots__/demo.test.js.snap | 4 +- .../__tests__/__snapshots__/demo.test.js.snap | 14 +++---- .../__snapshots__/index.test.js.snap | 11 ++++++ components/spin/__tests__/index.test.js | 6 +-- components/spin/index.en-US.md | 2 +- components/spin/index.tsx | 37 +++++++++++++------ components/spin/index.zh-CN.md | 2 +- components/spin/style/index.less | 8 +++- .../__snapshots__/empty.test.js.snap | 2 +- 9 files changed, 57 insertions(+), 29 deletions(-) create mode 100644 components/spin/__tests__/__snapshots__/index.test.js.snap diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap index 113e9b2a2f..9c4b9b45f7 100644 --- a/components/list/__tests__/__snapshots__/demo.test.js.snap +++ b/components/list/__tests__/__snapshots__/demo.test.js.snap @@ -364,7 +364,7 @@ exports[`renders ./components/list/demo/infinite-virtualized-load.md correctly 1 class="ant-spin" > @@ -389,7 +389,7 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = ` class="ant-spin ant-spin-spinning" > diff --git a/components/spin/__tests__/__snapshots__/demo.test.js.snap b/components/spin/__tests__/__snapshots__/demo.test.js.snap index c7aff5c92b..a8d4e63770 100644 --- a/components/spin/__tests__/__snapshots__/demo.test.js.snap +++ b/components/spin/__tests__/__snapshots__/demo.test.js.snap @@ -5,7 +5,7 @@ exports[`renders ./components/spin/demo/basic.md correctly 1`] = ` class="ant-spin ant-spin-spinning" > @@ -20,7 +20,7 @@ exports[`renders ./components/spin/demo/custom-indicator.md correctly 1`] = ` class="ant-spin ant-spin-spinning" > @@ -75,7 +75,7 @@ exports[`renders ./components/spin/demo/inside.md correctly 1`] = ` class="ant-spin ant-spin-spinning" > @@ -133,7 +133,7 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = ` class="ant-spin ant-spin-sm ant-spin-spinning" > @@ -145,7 +145,7 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = ` class="ant-spin ant-spin-spinning" > @@ -157,7 +157,7 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = ` class="ant-spin ant-spin-lg ant-spin-spinning" > @@ -177,7 +177,7 @@ exports[`renders ./components/spin/demo/tip.md correctly 1`] = ` class="ant-spin ant-spin-spinning ant-spin-show-text" > diff --git a/components/spin/__tests__/__snapshots__/index.test.js.snap b/components/spin/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..73e2f59bed --- /dev/null +++ b/components/spin/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Spin should render custom indicator when it's set 1`] = ` +
+
+
+`; diff --git a/components/spin/__tests__/index.test.js b/components/spin/__tests__/index.test.js index b98981c579..2094661be1 100644 --- a/components/spin/__tests__/index.test.js +++ b/components/spin/__tests__/index.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow, render } from 'enzyme'; import Spin from '..'; describe('Spin', () => { @@ -15,9 +15,9 @@ describe('Spin', () => { it('should render custom indicator when it\'s set', () => { const customIndicator =
; - const wrapper = shallow( + const wrapper = render( ); - expect(wrapper.contains(customIndicator)).toEqual(true); + expect(wrapper).toMatchSnapshot(); }); }); diff --git a/components/spin/index.en-US.md b/components/spin/index.en-US.md index 236c9b62f7..e2754f2157 100644 --- a/components/spin/index.en-US.md +++ b/components/spin/index.en-US.md @@ -15,7 +15,7 @@ When part of the page is waiting for asynchronous data or during a rendering pro | Property | Description | Type | Default Value | | -------- | ----------- | ---- | ------------- | | delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - | -| indicator | React node of the spinning indicator | ReactNode | - | +| indicator | React node of the spinning indicator | ReactElement | - | | size | size of Spin, options: `small`, `default` and `large` | string | `default` | | spinning | whether Spin is spinning | boolean | true | | tip | customize description content when Spin has children | string | - | diff --git a/components/spin/index.tsx b/components/spin/index.tsx index 38631621c5..8c79125c37 100644 --- a/components/spin/index.tsx +++ b/components/spin/index.tsx @@ -5,6 +5,8 @@ import Animate from 'rc-animate'; import isCssAnimationSupported from '../_util/isCssAnimationSupported'; import omit from 'omit.js'; +export type SpinIndicator = React.ReactElement; + export interface SpinProps { prefixCls?: string; className?: string; @@ -14,7 +16,7 @@ export interface SpinProps { tip?: string; delay?: number; wrapperClassName?: string; - indicator?: React.ReactNode; + indicator?: SpinIndicator; } export interface SpinState { @@ -96,8 +98,27 @@ 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, indicator, ...restProps } = this.props; + const { className, size, prefixCls, tip, wrapperClassName, ...restProps } = this.props; const { spinning, notCssAnimationSupported } = this.state; const spinClassName = classNames(prefixCls, { @@ -111,20 +132,12 @@ export default class Spin extends React.Component { const divProps = omit(restProps, [ 'spinning', 'delay', + 'indicator', ]); - const spinIndicator = indicator ? indicator : ( - - - - - - - ); - const spinElement = (
- {spinIndicator} + {this.renderIndicator()} {tip ?
{tip}
: null}
); diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md index 19a784761a..e5c8899d4c 100644 --- a/components/spin/index.zh-CN.md +++ b/components/spin/index.zh-CN.md @@ -16,7 +16,7 @@ subtitle: 加载中 | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - | -| indicator | 加载指示符 | ReactNode | - | +| indicator | 加载指示符 | ReactElement | - | | size | 组件大小，可选值为 `small` `default` `large` | string | 'default' | | spinning | 是否旋转 | boolean | true | | tip | 当作为包裹元素时，可以自定义描述文案 | string | - | diff --git a/components/spin/style/index.less b/components/spin/style/index.less index d3e8f34813..cc77d12c04 100644 --- a/components/spin/style/index.less +++ b/components/spin/style/index.less @@ -115,8 +115,7 @@ position: relative; display: inline-block; .square(@spin-dot-size); - transform: rotate(45deg); - animation: antRotate 1.2s infinite linear; + i { width: 9px; height: 9px; @@ -148,6 +147,11 @@ animation-delay: 1.2s; } } + + &-spin { + transform: rotate(45deg); + animation: antRotate 1.2s infinite linear; + } } // Sizes diff --git a/components/table/__tests__/__snapshots__/empty.test.js.snap b/components/table/__tests__/__snapshots__/empty.test.js.snap index 70676805bb..288e144231 100644 --- a/components/table/__tests__/__snapshots__/empty.test.js.snap +++ b/components/table/__tests__/__snapshots__/empty.test.js.snap @@ -465,7 +465,7 @@ exports[`Table renders empty table without emptyText when loading 1`] = ` class="ant-spin ant-spin-spinning ant-table-without-pagination ant-table-spin-holder" >