From 92aa34c1b5c66f49fe0a50da96062cf7543da923 Mon Sep 17 00:00:00 2001 From: kossel Date: Fri, 3 Nov 2017 23:05:25 -0500 Subject: [PATCH] Feature antd 3.0/spinning indicator (#7977) * Added indicator props to Spin component * Added indicator props to Spin component * update snapshots * fix defautl props * revert some snapshot files --- .../__tests__/__snapshots__/demo.test.js.snap | 20 +++++++ components/spin/__tests__/index.test.js | 8 +++ components/spin/demo/custom-indicator.md | 56 +++++++++++++++++++ components/spin/index.en-US.md | 1 + components/spin/index.tsx | 20 ++++--- components/spin/index.zh-CN.md | 1 + 6 files changed, 99 insertions(+), 7 deletions(-) create mode 100644 components/spin/demo/custom-indicator.md diff --git a/components/spin/__tests__/__snapshots__/demo.test.js.snap b/components/spin/__tests__/__snapshots__/demo.test.js.snap index 8ccf2bd12a..5f6e94843a 100644 --- a/components/spin/__tests__/__snapshots__/demo.test.js.snap +++ b/components/spin/__tests__/__snapshots__/demo.test.js.snap @@ -15,6 +15,26 @@ exports[`renders ./components/spin/demo/basic.md correctly 1`] = ` `; +exports[`renders ./components/spin/demo/custom-indicator.md correctly 1`] = ` +
+
+ +
+
+
+
+
+`; + exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
{ expect(wrapper.find('.ant-spin-nested-loading').at(0).prop('style')).toBe(null); expect(wrapper.find('.ant-spin').at(0).prop('style').background).toBe('red'); }); + + it('should render custom indicator when it\'s set', () => { + const customIndicator =
; + const wrapper = shallow( + + ); + expect(wrapper.contains(customIndicator)).toEqual(true); + }); }); diff --git a/components/spin/demo/custom-indicator.md b/components/spin/demo/custom-indicator.md new file mode 100644 index 0000000000..e4b9618900 --- /dev/null +++ b/components/spin/demo/custom-indicator.md @@ -0,0 +1,56 @@ +--- +order: 0 +title: + zh-CN: 自定义指示符 + en-US: Custom spinning indicator +--- + +## zh-CN + +使用自定义指示符。 + +## en-US + +Use custom loading indicator. + +````jsx +import { Spin, Icon } from 'antd'; + +const antIcon = ; +const squareLoader =
; + +ReactDOM.render( +
+ + +
, mountNode); +```` + +```css +.square-loader { + width: 24px; + height: 24px; + background-color: #108ee9; + -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; + animation: sk-rotateplane 1.2s infinite ease-in-out; +} + +@-webkit-keyframes sk-rotateplane { + 0% { -webkit-transform: perspective(120px) } + 50% { -webkit-transform: perspective(120px) rotateY(180deg) } + 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } +} + +@keyframes sk-rotateplane { + 0% { + transform: perspective(120px) rotateX(0deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) + } 50% { + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) + } 100% { + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + } +} +``` diff --git a/components/spin/index.en-US.md b/components/spin/index.en-US.md index c1432650ee..236c9b62f7 100644 --- a/components/spin/index.en-US.md +++ b/components/spin/index.en-US.md @@ -15,6 +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 | - | | 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 58ae225333..a540fab6bb 100644 --- a/components/spin/index.tsx +++ b/components/spin/index.tsx @@ -13,6 +13,7 @@ export interface SpinProps { tip?: string; delay?: number; wrapperClassName?: string; + indicator?: React.ReactNode; } export default class Spin extends React.Component { @@ -29,6 +30,7 @@ export default class Spin extends React.Component { spinning: PropTypes.bool, size: PropTypes.oneOf(['small', 'default', 'large']), wrapperClassName: PropTypes.string, + indicator: PropTypes.node, }; debounceTimeout: number; @@ -89,7 +91,7 @@ export default class Spin extends React.Component { } } render() { - const { className, size, prefixCls, tip, wrapperClassName, ...restProps } = this.props; + const { className, size, prefixCls, tip, wrapperClassName, indicator, ...restProps } = this.props; const { spinning, notCssAnimationSupported } = this.state; const spinClassName = classNames(prefixCls, { @@ -105,14 +107,18 @@ export default class Spin extends React.Component { 'delay', ]); + const spinIndicator = indicator ? indicator : ( + + + + + + + ); + const spinElement = (
- - - - - - + {spinIndicator} {tip ?
{tip}
: null}
); diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md index 630c679497..19a784761a 100644 --- a/components/spin/index.zh-CN.md +++ b/components/spin/index.zh-CN.md @@ -16,6 +16,7 @@ subtitle: 加载中 | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - | +| indicator | 加载指示符 | ReactNode | - | | size | 组件大小，可选值为 `small` `default` `large` | string | 'default' | | spinning | 是否旋转 | boolean | true | | tip | 当作为包裹元素时，可以自定义描述文案 | string | - |