test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 19:19:26 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

#9792 Migrate Button to new lifecycle methods

Browse Source 
Signed-off-by: Maciej Czekaj <natanielcz@gmail.com>
This commit is contained in:
Maciej Czekaj 2018-10-24 22:43:21 +02:00 committed by 偏右
parent 0f9742b441
commit 465c8075dd
1 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/button/button.tsx
View File

@ -1,6 +1,7 @@
import * as React from 'react';
import * as PropTypes from 'prop-types';
import classNames from 'classnames';
import { polyfill } from 'react-lifecycles-compat';
import Wave from '../_util/wave';
import Icon from '../icon';
import Group from './button-group';
@ -74,7 +75,12 @@ export type NativeButtonProps = {
export type ButtonProps = AnchorButtonProps | NativeButtonProps;
export default class Button extends React.Component<ButtonProps, any> {
interface ButtonState {
loading?: boolean | {delay?: number};
hasTwoCNChar: boolean;
}
class Button extends React.Component<ButtonProps, ButtonState> {
static Group: typeof Group;
static __ANT_BUTTON = true;
@ -97,6 +103,14 @@ export default class Button extends React.Component<ButtonProps, any> {
block: PropTypes.bool,
};
static getDerivedStateFromProps(nextProps: ButtonProps, _prevState: ButtonState) {
if (nextProps.loading instanceof Boolean) {
return {loading: nextProps.loading}
}
return null;
}
private delayTimeout: number;
private buttonNode: HTMLElement | null;
@ -112,25 +126,23 @@ export default class Button extends React.Component<ButtonProps, any> {
this.fixTwoCNChar();
}
componentWillReceiveProps(nextProps: ButtonProps) {
const currentLoading = this.props.loading;
const loading = nextProps.loading;
componentDidUpdate(prevProps: ButtonProps, _prevState: ButtonState) {
this.fixTwoCNChar();
if (currentLoading) {
if (prevProps.loading && typeof prevProps.loading !== 'boolean') {
clearTimeout(this.delayTimeout);
}
if (typeof loading !== 'boolean' && loading && loading.delay) {
this.delayTimeout = window.setTimeout(() => this.setState({ loading }), loading.delay);
const { loading } = this.props;
if (loading && typeof loading !== 'boolean' && loading.delay) {
this.delayTimeout = window.setTimeout(() => this.setState({loading}), loading.delay);
} else if (prevProps.loading === this.props.loading) {
return;
} else {
this.setState({ loading });
this.setState({loading});
}
}
componentDidUpdate() {
this.fixTwoCNChar();
}
componentWillUnmount() {
if (this.delayTimeout) {
clearTimeout(this.delayTimeout);
@ -257,3 +269,7 @@ export default class Button extends React.Component<ButtonProps, any> {
);
}
}
polyfill(Button);
export default Button;