Restaurant-Management-System/Modal.js at master · codefacts/Restaurant-Management-System · GitHub

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
var React = require('react');

module.exports = React.createClass({
    getDefaultProps: function () {
        var $this = this;
        return {
            id: Math.random(),
            title: "Title",
            body: "body",
            footer: "footer",
            isOpen: true,
            onClose: function () {
            },
            bodyStyle: {}
        };
    },
    getInitialState: function () {
        var $this = this;
        return {};
    },
    render: function () {
        var $this = this;
        var style = {};
        if ($this.props.isOpen) {
            style.display = "block";
        }

        var onClose = $this.props.onClose;

        return (

            <div>
                <div className="modal" id="myModal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel"
                     style={style}>
                    <div id={$this.props.id} className="modal-dialog" role="document">
                        <div className="modal-content">
                            <div className="modal-header">
                                <button type="button" className="close" aria-label="Close"
                                        onClick={onClose}>
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                {
                                    typeof $this.props.title == "string" ?
                                        <h4 className="modal-title" id="myModalLabel">
                                            {$this.props.title}
                                        </h4> : $this.props.title
                                }
                            </div>
                            <div className="modal-body" style={$this.props.bodyStyle}>
                                {$this.props.body}
                            </div>
                            <div className="modal-footer">
                                {$this.props.footer}
                            </div>
                        </div>
                    </div>
                </div>
                {!!$this.props.isOpen ? (<div className="modal-backdrop" style={{opacity: 0.5}}></div>) : ""}
            </div>

        );
    }
});