mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

Fix clicked effect when switch loading state

Browse Source
This commit is contained in:
afc163 2017-02-26 19:21:22 +08:00
parent 00fac07d9e
commit d99778b605
1 changed files with 6 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/button/button.tsx
View File

@ -3,9 +3,7 @@ import classNames from 'classnames';
import { findDOMNode } from 'react-dom';
import Icon from '../icon';
import omit from 'omit.js';
import getRequestAnimationFrame, { cancelRequestAnimationFrame } from '../_util/getRequestAnimationFrame';
const reqAnimFrame = getRequestAnimationFrame();
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
function isString(str) {
@ -54,6 +52,7 @@ export default class Button extends React.Component<ButtonProps, any> {
static defaultProps = {
prefixCls: 'ant-btn',
loading: false,
clicked: false,
ghost: false,
};
@ -68,8 +67,7 @@ export default class Button extends React.Component<ButtonProps, any> {
icon: React.PropTypes.string,
};
timeout: any;
clickedTimeout: any;
timeout: number;
delayTimeout: number;
constructor(props) {
@ -95,9 +93,6 @@ export default class Button extends React.Component<ButtonProps, any> {
}
componentWillUnmount() {
if (this.clickedTimeout) {
cancelRequestAnimationFrame(this.clickedTimeout);
}
if (this.timeout) {
clearTimeout(this.timeout);
}
@ -106,17 +101,11 @@ export default class Button extends React.Component<ButtonProps, any> {
}
}
clearButton = (button) => {
button.className = button.className.replace(` ${this.props.prefixCls}-clicked`, '');
}
handleClick = (e) => {
// Add click effect
const buttonNode = findDOMNode(this);
this.clearButton(buttonNode);
this.clickedTimeout = reqAnimFrame(() => buttonNode.className += ` ${this.props.prefixCls}-clicked`);
this.setState({ clicked: true });
clearTimeout(this.timeout);
this.timeout = setTimeout(() => this.clearButton(buttonNode), 500);
this.timeout = setTimeout(() => this.setState({ clicked: false }), 500);
const onClick = this.props.onClick;
if (onClick) {
@ -137,7 +126,7 @@ export default class Button extends React.Component<ButtonProps, any> {
type, shape, size = '', className, htmlType, children, icon, prefixCls, ghost, ...others,
} = this.props;
const { loading } = this.state;
const { loading, clicked } = this.state;
// large => lg
// small => sm
const sizeCls = ({
@ -151,6 +140,7 @@ export default class Button extends React.Component<ButtonProps, any> {
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-icon-only`]: !children && icon,
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-clicked`]: clicked,
[`${prefixCls}-background-ghost`]: ghost,
}, className);