Better loading of Button (#4964)

*  Better loading of Button

 + close #4925
 + add a default delay timer (200ms)

* update snapshot

* escape

components/button/__tests__/__snapshots__/demo.test.js.snap

@@ -351,6 +351,13 @@ exports[`test renders ./components/button/demo/loading.md correctly 1`] = `
       Click me!
     </span>
   </button>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button">
+    <span>
+      Won\'t show loading
+    </span>
+  </button>
   <br />
   <button
     class="ant-btn ant-btn-circle ant-btn-loading"

components/button/button.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { findDOMNode } from 'react-dom';
 import Icon from '../icon';
+import omit from 'omit.js';
 
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
@@ -67,6 +68,29 @@ export default class Button extends React.Component<ButtonProps, any> {
 
   timeout: any;
   clickedTimeout: any;
+  delayTimeout: number;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: props.loading,
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const currentLoading = this.props.loading;
+    const loading = nextProps.loading;
+
+    if (currentLoading) {
+      clearTimeout(this.delayTimeout);
+    }
+
+    if (loading) {
+      this.delayTimeout = setTimeout(() => this.setState({ loading }), 200);
+    } else {
+      this.setState({ loading });
+    }
+  }
 
   componentWillUnmount() {
     if (this.clickedTimeout) {
@@ -75,6 +99,9 @@ export default class Button extends React.Component<ButtonProps, any> {
     if (this.timeout) {
       clearTimeout(this.timeout);
     }
+    if (this.delayTimeout) {
+      clearTimeout(this.delayTimeout);
+    }
   }
 
   clearButton = (button) => {
@@ -105,9 +132,10 @@ export default class Button extends React.Component<ButtonProps, any> {
 
   render() {
     const {
-      type, shape, size = '', className, htmlType, children, icon, loading, prefixCls, ghost, ...others,
+      type, shape, size = '', className, htmlType, children, icon, prefixCls, ghost, ...others,
     } = this.props;
 
+    const { loading } = this.state;
     // large => lg
     // small => sm
     const sizeCls = ({
@@ -130,7 +158,7 @@ export default class Button extends React.Component<ButtonProps, any> {
 
     return (
       <button
-        {...others}
+        {...omit(others, ['loading'])}
         type={htmlType || 'button'}
         className={classes}
         onMouseUp={this.handleMouseUp}

components/button/demo/loading.md

@@ -20,6 +20,7 @@ class App extends React.Component {
   state = {
     loading: false,
     iconLoading: false,
+    delayLoading: false,
   }
 
   enterLoading = () => {
@@ -29,6 +30,15 @@ class App extends React.Component {
   enterIconLoading = () => {
     this.setState({ iconLoading: true });
   }
+  delayLoading = () => {
+    this.setState({
+      delayLoading: true,
+    });
+
+    setTimeout(() => this.setState({
+      delayLoading: false,
+    }), 150);
+  }
 
   render() {
     return (
@@ -46,6 +56,9 @@ class App extends React.Component {
         <Button type="primary" icon="poweroff" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
           Click me!
         </Button>
+        <Button type="primary" loading={this.state.delayLoading} onClick={this.delayLoading}>
+          Won&apos;t show loading
+        </Button>
         <br />
         <Button shape="circle" loading />
         <Button type="primary" shape="circle" loading />