aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui/lifecycle_raised_button.tsx
blob: b06978f16bb5ef93fbb4b6de936b5224fbb01c5c (plain) (blame)
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(): void {
        clearTimeout(this._buttonTimeoutId);
        this._didUnmount = true;
    }
    public render(): React.ReactNode {
        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(): Promise<void> {
        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,
            });
        }
    }
}