packages/website/ts/components/ui/flash_message.tsx


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

import * as _ from 'lodash';
import Snackbar from 'material-ui/Snackbar';
import * as React from 'react';
import { Dispatcher } from 'ts/redux/dispatcher';

const SHOW_DURATION_MS = 4000;

interface FlashMessageProps {
    dispatcher: Dispatcher;
    flashMessage?: string | React.ReactNode;
    showDurationMs?: number;
    bodyStyle?: React.CSSProperties;
}

interface FlashMessageState {}

export class FlashMessage extends React.Component<FlashMessageProps, FlashMessageState> {
    public static defaultProps: Partial<FlashMessageProps> = {
        showDurationMs: SHOW_DURATION_MS,
        bodyStyle: {},
    };
    public render(): React.ReactNode {
        if (!_.isUndefined(this.props.flashMessage)) {
            return (
                <Snackbar
                    open={true}
                    message={this.props.flashMessage}
                    autoHideDuration={this.props.showDurationMs}
                    onRequestClose={this._onClose.bind(this)}
                    bodyStyle={this.props.bodyStyle}
                />
            );
        } else {
            return null;
        }
    }
    private _onClose(): void {
        this.props.dispatcher.hideFlashMessage();
    }
}