1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
import { utils } from 'ts/utils/utils';
const COMPLETE_STATE_SHOW_LENGTH_MS = 2000;
enum ButtonState {
READY,
LOADING,
COMPLETE,
}
interface LifeCycleRaisedButtonProps {
isHidden?: boolean;
isDisabled?: boolean;
isPrimary?: boolean;
labelReady: React.ReactNode | string;
labelLoading: React.ReactNode | string;
labelComplete: React.ReactNode | string;
onClickAsyncFn: () => Promise<boolean>;
backgroundColor?: string;
labelColor?: string;
}
interface LifeCycleRaisedButtonState {
buttonState: ButtonState;
}
export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> {
public static defaultProps: Partial<LifeCycleRaisedButtonProps> = {
isDisabled: false,
backgroundColor: colors.white,
labelColor: colors.darkGrey,
};
private _buttonTimeoutId: number;
private _didUnmount: boolean;
constructor(props: LifeCycleRaisedButtonProps) {
super(props);
this.state = {
buttonState: ButtonState.READY,
};
}
public componentWillUnmount() {
clearTimeout(this._buttonTimeoutId);
this._didUnmount = true;
}
public render() {
if (this.props.isHidden) {
return <span />;
}
let label;
switch (this.state.buttonState) {
case ButtonState.READY:
label = this.props.labelReady;
break;
case ButtonState.LOADING:
label = this.props.labelLoading;
break;
case ButtonState.COMPLETE:
label = this.props.labelComplete;
break;
default:
throw utils.spawnSwitchErr('ButtonState', this.state.buttonState);
}
return (
<RaisedButton
primary={this.props.isPrimary}
label={label}
style={{ width: '100%' }}
backgroundColor={this.props.backgroundColor}
labelColor={this.props.labelColor}
onTouchTap={this.onClickAsync.bind(this)}
disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.READY}
/>
);
}
public async onClickAsync() {
this.setState({
buttonState: ButtonState.LOADING,
});
const didSucceed = await this.props.onClickAsyncFn();
if (this._didUnmount) {
return; // noop since unmount called before async callback returned.
}
if (didSucceed) {
this.setState({
buttonState: ButtonState.COMPLETE,
});
this._buttonTimeoutId = window.setTimeout(() => {
this.setState({
buttonState: ButtonState.READY,
});
}, COMPLETE_STATE_SHOW_LENGTH_MS);
} else {
this.setState({
buttonState: ButtonState.READY,
});
}
}
}
|
