aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui/lifecycle_raised_button.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/ui/lifecycle_raised_button.tsx')
-rw-r--r--packages/website/ts/components/ui/lifecycle_raised_button.tsx166
1 files changed, 83 insertions, 83 deletions
diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index 8ff856a75..fd23912f1 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -7,97 +7,97 @@ import { utils } from 'ts/utils/utils';
const COMPLETE_STATE_SHOW_LENGTH_MS = 2000;
enum ButtonState {
- READY,
- LOADING,
- COMPLETE,
+ 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;
+ 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;
+ 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 />;
- }
+ 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,
- });
- }
- }
+ 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,
+ });
+ }
+ }
}