foundation.reveal.react.js

foundation.reveal.react.js

window.PainDiagramModal = React.createClass({
    statics: {
        open: function(){
            this.$dialog = $('#diagramModal');

            if (!this.$dialog.length) {
                this.$dialog = $('<div id="diagramModal" class="reveal-modal" data-reveal role="dialog"></div>')
                    .appendTo('body');
            }

            this.$dialog.foundation('reveal', 'open');

            return React.render(
                <PainDiagramModal close={this.close.bind(this)}/>,
                this.$dialog[0]
            );
        },
        close: function(){
            if(!this.$dialog || !this.$dialog.length) {
                return;
            }

            React.unmountComponentAtNode(this.$dialog[0]);
            this.$dialog.foundation('reveal', 'close');
        }
    },
    render : function() {
        return (
            <div>
                <div className="columns kim-modal-top-header">
                    <h3><small>CREATE A DIAGRAM</small></h3>
                    <a className="close-reveal-modal font-size-25" aria-label="Close">&#215;</a>
                </div>

                <div className="row margin-top-70">
                    <div className="columns">
                        <PainDiagramSelector />
                    </div>

                    <div className="columns color_pattern">
                        <div className="row text-center">
                            <button type="button" className="consultation-finish button round kim-block-button">Create Diagram</button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});