context.js

import React from 'react';
import * as PropTypes from "prop-types";

import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import Snackbar from 'material-ui/Snackbar';
import TextField from 'material-ui/TextField';


export default class Context extends React.Component {
    constructor() {
        super();
        this.state = {
            mobile: false,
            dialog: {inputText: null, type: undefined, actions: null, message: null, content: null, open: false},
            snackBar: {message: '', open: false}
        };
        this.dialog.bind(this);
    };

    componentDidMount() {
        window.addEventListener("resize", ()=> {
            this.updateDimensions();
        });
        this.updateDimensions();
    }

    updateDimensions() {
        let w = window,
            d = document,
            documentElement = d.documentElement,
            body = d.getElementsByTagName('body')[0];

        let width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
            height = w.innerHeight || documentElement.clientHeight || body.clientHeight,
            mobile = width < 740;

        this.setState({mobile: mobile});
        // console.log(width + ' x ' + height + ' - mobile:', mobile);
    }

    componentWillMount() {
        this.updateDimensions();
    }

    componentWillUnmount() {
        window.removeEventListener("resize", this.updateDimensions);
    }


    getChildContext() {
        return {
            dialog: this.dialog.bind(this),
            snackBar: this.snackbar.bind(this),
        }
    }

    render() {
        let paddingTop = null;
        if (window.location.hash.indexOf("login") == -1 && window.location.hash.indexOf("redefinicao") == -1)
            paddingTop = {paddingTop: 64};

        return (
            <div style={paddingTop}>
                {
                    React.cloneElement(this.props.children, {
                        mobile: this.state.mobile
                    })
                }
                <Dialog
                    actions={this.state.dialog.actions}
                    modal={true}
                    open={this.state.dialog.open}
                    contentStyle={(this.state.mobile==false? {paddingLeft:256} : null)}
                >
                    <div>{this.state.dialog.content == null ? this.state.dialog.message : this.state.dialog.content}</div>
                </Dialog>
                <Snackbar
                    open={this.state.snackBar.open}
                    message={this.state.snackBar.message}
                    autoHideDuration={4000}
                />
            </div>
        );

        //{this.props.children}

        if (this.props.user === undefined) {
            return (<div>Esperando obter user no state do context</div>);
        } else {
            return (
                <div style={paddingTop}>
                    {this.props.children}
                </div>
            );
        }
    }

    dialog(message, dialogType = 'error', cbOk = null, cbCancel = null) {
        // console.log('dialog', message);
        let actions;
        if (dialogType == 'error')
            actions = [
                <FlatButton
                    label="Ok"
                    primary={true}
                    onTouchTap={()=>{this.setState({dialog:{open:false}})}}
                />
            ];
        if (dialogType == 'info')
            actions = [
                <FlatButton
                    label="Entendi"
                    primary={true}
                    onTouchTap={()=>{
                        this.setState({dialog:{open:false}});
                        if (cbOk)
                            cbOk();
                    }}
                />
            ];
        if (dialogType == 'prompt' || dialogType == 'promptText')
            actions = [
                <FlatButton
                    label="Cancelar"
                    primary={false}
                    onTouchTap={()=>{
                        this.setState({dialog:{open:false}});
                           if (cbCancel!=undefined && cbCancel!=null)
                               cbCancel();
                        }
                    }
                />,
                <FlatButton
                    label="Ok"
                    primary={true}
                    onTouchTap={()=>{
                            this.setState({dialog:{open:false}});
                            if (cbOk!=undefined && cbOk!=null){
                                if (dialogType == 'promptText')
                                    cbOk(this.state.dialog.inputText);
                                else
                                    cbOk();
                            }
                        }
                    }
                />
            ];

        let content = null;
        if (dialogType == 'promptText') {
            content = <div>
                <TextField
                    floatingLabelText={message}
                    id="inputText"
                    fullWidth={true}
                    onChange={this.handleChange.bind(this)}
                    value={this.state.dialog.inputText}
                />
            </div>;
        }

        this.setState(
            {
                dialog: {
                    inputText: null,
                    type: dialogType,
                    actions: actions,
                    message: message,
                    content: content,
                    open: true
                }
            }
        );
    }


    handleChange(event) {
        // console.log('event',event);
        if (event == null || event == undefined || event.target == null || event.target == undefined)
            return;
        var key = event.target.id;
        var dialog = this.state.dialog;
        dialog.inputText = event.target.value;
        this.setState({dialog: dialog});
    }

    snackbar(message) {
        // console.log('snackBar', message);
        this.setState({snackBar: {message: message, open: true}});
        setTimeout(function () {
            this.setState({snackBar: {message: '', open: false}});
        }.bind(this), 4100);
    }
}
Context.contextTypes = {
    router: PropTypes.object.isRequired
};

Context.childContextTypes = {
    dialog: PropTypes.func.isRequired,
    snackBar: PropTypes.func.isRequired
};