From 6467bc7a73103a89eb1d800591736aa76fe01122 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Mon, 9 May 2016 10:49:14 +0800 Subject: [PATCH 1/3] Add `debounce` props to `Spin` close #1273 --- components/spin/index.jsx | 24 +++++++++++++++++++++--- components/spin/index.md | 1 + 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/components/spin/index.jsx b/components/spin/index.jsx index 2b5c6ac81e..845221f498 100644 --- a/components/spin/index.jsx +++ b/components/spin/index.jsx @@ -8,8 +8,15 @@ export default class Spin extends React.Component { static defaultProps = { prefixCls: 'ant-spin', spinning: true, + debounce: 0, } + constructor(props) { + super(props); + this.state = { + spinning: props.spinning || props.spining, + }; + } static propTypes = { className: React.PropTypes.string, size: React.PropTypes.oneOf(['small', 'default', 'large']), @@ -26,10 +33,21 @@ export default class Spin extends React.Component { findDOMNode(this).className += ` ${this.props.prefixCls}-show-text`; } } - - render() { - const { className, size, prefixCls, tip, spining = true } = this.props; + componentWillReceiveProps(nextProps) { + const { spining = true, debounce } = nextProps; const spinning = this.props.spinning && spining; // Backwards support + if (this.debounceTimeout) { + clearTimeout(this.debounceTimeout); + } + if (debounce && spinning) { + this.debounceTimeout = setTimeout(() => this.setState({ spinning }), debounce); + } else { + this.setState({ spinning }); + } + } + render() { + const { className, size, prefixCls, tip } = this.props; + const { spinning } = this.state; const spinClassName = classNames({ [prefixCls]: true, diff --git a/components/spin/index.md b/components/spin/index.md index 6220ab09ef..22d6ce112b 100644 --- a/components/spin/index.md +++ b/components/spin/index.md @@ -20,3 +20,4 @@ english: Spin | size | enum | default | spin组件中点的大小，可选值为 small default large | | spinning | boolean | true | 用于内嵌其他组件的模式，可以关闭 loading 效果 | | tip | string | 无 | 自定义描述文案 | +| debounce | number | 0 | 毫秒，用于设定去抖动的 debounce 值。| From 895c52b3b93f7651d3c52d589fbea4c10debfb65 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Mon, 9 May 2016 13:10:43 +0800 Subject: [PATCH 2/3] remove debounce from props --- components/spin/index.jsx | 13 +++++++------ components/spin/index.md | 1 - 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/spin/index.jsx b/components/spin/index.jsx index 845221f498..cc2468404b 100644 --- a/components/spin/index.jsx +++ b/components/spin/index.jsx @@ -8,13 +8,14 @@ export default class Spin extends React.Component { static defaultProps = { prefixCls: 'ant-spin', spinning: true, - debounce: 0, } constructor(props) { super(props); + const { spining } = props; + const spinning = props.spinning && spining; this.state = { - spinning: props.spinning || props.spining, + spinning, }; } static propTypes = { @@ -34,13 +35,13 @@ export default class Spin extends React.Component { } } componentWillReceiveProps(nextProps) { - const { spining = true, debounce } = nextProps; - const spinning = this.props.spinning && spining; // Backwards support + const { spining = true } = nextProps; + const spinning = nextProps.spinning && spining; // Backwards support if (this.debounceTimeout) { clearTimeout(this.debounceTimeout); } - if (debounce && spinning) { - this.debounceTimeout = setTimeout(() => this.setState({ spinning }), debounce); + if (spinning) { + this.debounceTimeout = setTimeout(() => this.setState({ spinning }), 500); } else { this.setState({ spinning }); } diff --git a/components/spin/index.md b/components/spin/index.md index 22d6ce112b..6220ab09ef 100644 --- a/components/spin/index.md +++ b/components/spin/index.md @@ -20,4 +20,3 @@ english: Spin | size | enum | default | spin组件中点的大小，可选值为 small default large | | spinning | boolean | true | 用于内嵌其他组件的模式，可以关闭 loading 效果 | | tip | string | 无 | 自定义描述文案 | -| debounce | number | 0 | 毫秒，用于设定去抖动的 debounce 值。| From 1547dc5e31e912dd483ee1f4d372461535a3e751 Mon Sep 17 00:00:00 2001 From: RaoHai Date: Mon, 9 May 2016 15:17:09 +0800 Subject: [PATCH 3/3] spining backward support --- components/spin/demo/nested.md | 2 +- components/spin/index.jsx | 15 +++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md index a799fa8e49..fbf9739442 100644 --- a/components/spin/demo/nested.md +++ b/components/spin/demo/nested.md @@ -27,7 +27,7 @@ const Card = React.createClass({ ); return (
- {container} + {container} 切换加载状态：
); diff --git a/components/spin/index.jsx b/components/spin/index.jsx index cc2468404b..846f513202 100644 --- a/components/spin/index.jsx +++ b/components/spin/index.jsx @@ -12,8 +12,7 @@ export default class Spin extends React.Component { constructor(props) { super(props); - const { spining } = props; - const spinning = props.spinning && spining; + const spinning = this.getSpinning(props); this.state = { spinning, }; @@ -34,9 +33,17 @@ export default class Spin extends React.Component { findDOMNode(this).className += ` ${this.props.prefixCls}-show-text`; } } + getSpinning(props) { + warning(!('spining' in this.props), '`spining` property of Popover is a spell mistake, use `spinning` instead.'); + const { spinning, spining } = props; + // Backwards support + if (spining !== undefined) { + return spining; + } + return spinning; + } componentWillReceiveProps(nextProps) { - const { spining = true } = nextProps; - const spinning = nextProps.spinning && spining; // Backwards support + const spinning = this.getSpinning(nextProps); if (this.debounceTimeout) { clearTimeout(this.debounceTimeout); }