ReactJS Modal

app.js

'use strict';

import { createClass } from 'react/addons';

let App = createClass({
    render: function() {
        return  <div>
            <Button label="Open!" target="modalTest" classNames=".buttonStyle" />
            <Modal name="modalTest">
                <div class='modal'>
                    Xuplau!
                </div>
            </Modal>
        </div>;
    }
});

button.js

'use strict';

import { createClass } from 'react/addons';

let Button = createClass({
    onClick: function() {
        var event = new CustomEvent('re4kt.modal.click', {
            'detail': {
                'target': this.props.target,
                'action': this.props.action
            }
        });

        window.dispatchEvent(event);
    },
    getClassNames: function() {
        if(this.props.classNames) {
            return this.props.classNames;
        }
        
        return "";
    },
    getLabel: function() {
        if(this.props.label) {
            return this.props.label;
        }
        
        return "open";
    },
    render: function() {
        return <button className={this.getClassNames()} onClick={this.onClick}>{this.getLabel()}</button>
    }
});

export default Button;

example.html

<div id="main"></div>
<script type="text/jsx">
React.render(
	<App />,
	document.getElementById('main')
);
</script>

modal.js

'use strict';

import { createClass } from 'react/addons';

let Modal = createClass({
    getInitialState: function() {
        return {
            visible: false
        };
    },
    componentDidMount: function() {
        window.addEventListener('re4kt.modal.click', this.listener.bind(this), false);
    },
    componentWillUnmount: function() {
        window.removeEventListener('re4kt.modal.click', this.listener.bind(this), false);
    },
    onOpen: function() {
        this.setState({visible:true});
    },
    onClose: function() {
        this.setState({visible:false});
    },
    listener: function(event) {
        if (event.detail.target !== this.props.name) {
            console.log('target:', event.detail.target);
            return;
        }

        var action = event.detail.action.charAt(0).toUpperCase() + event.detail.action.slice(1);

        this['on' + action]();
    },
    render: function() {
        if (!this.state.visible) {
            var style = {
                'display': none;
            };

            return <div style={style}></div>;
        }

        return  <div>{this.props.children}</div>
    }
});

export default Modal;

Modal IE Compliant

'use strict';

import { createClass } from 'react/addons';

let Modal = createClass({
    getInitialState: function() {
        return {
            visible: false
        };
    },
    componentDidMount: function() {
        var eventName  = 'modal.click.%NAME%.%ACTION%',
            openEvent  = eventName.replace("%NAME%", this.props.name).replace("%ACTION%", "open"),
            closeEvent = eventName.replace("%NAME%", this.props.name).replace("%ACTION%", "close");

        window.addEventListener(openEvent, this.onOpen.bind(this), false);

        window.addEventListener(closeEvent, this.onClose.bind(this), false);
    },
    onOpen: function() {
        this.setState({visible:true});
    },
    onClose: function() {
        this.setState({visible:false});
    },
    render: function() {
        if (!this.state.visible) {
            var style = {
                'display': none;
            };

            return <div style={style}></div>;
        }

        return  <div>{this.props.children}</div>
    }
});

export default Modal;

Button IE Compliant

'use strict';

import { createClass } from 'react/addons';

let Button = createClass({
    eventName: 'modal.click.%TARGET%.%ACTION%',
    onClick: function() {
        var eventName = this.eventName
            .replace("%TARGET%", this.props.target)
            .replace("%ACTION%", this.props.action);

        var event = new Event(eventName);

        window.dispatchEvent(event);
    },
    render: function() {
        return <button className={this.getClassNames()} onClick={this.onClick}>{this.getLabel()}</button>
    }
});

export default Button;