Restaurant-Management-System/Range.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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
var React = require('react');
var Modal = require('./Modal');

module.exports = React.createClass({

    getDefaultProps: function () {
        return {
            id: "",
            from: "",
            to: "",
            name: "",
            title: "",
            placeholder: "",
            modalId: "",
            modalTitle: "",
            onChange: function () {
            }
        };
    },

    getInitialState: function () {
        return {
            isModalVisible: false
        };
    },

    onFromChange: function (e) {
        this.props.onChange({
            from: e.target.value,
            to: this.props.to
        });
    },

    onToChange: function (e) {
        this.props.onChange({
            from: this.props.from,
            to: e.target.value,
        });
    },

    onClear: function (e) {
        this.props.onChange({from: "", to: ""});
    },

    onClick: function (e) {
        this.setState({isModalVisible: true});
    },

    onModalClose: function () {
        this.setState({isModalVisible: false});
    },

    onChange: function (e) {
        this.setState({value: e.target.value});
    },

    render: function () {
        var $this = this;
        var modalBody = (

            <div className="row">

                <div className="col-md-6">
                    <div className="form-group">
                        <label htmlFor="exampleInputEmail1">From</label>
                        <input type="number" className="form-control" id="exampleInputEmail1" placeholder="From"
                               value={this.props.from}
                               onChange={this.onFromChange}/>
                    </div>
                </div>

                <div className="col-md-6">
                    <div className="form-group">
                        <label htmlFor="exampleInputEmail1">To</label>
                        <input type="number" className="form-control" id="exampleInputEmail1" placeholder="To"
                               value={this.props.to}
                               onChange={this.onToChange}/>
                    </div>
                </div>

            </div>

        );

        var modalFooter = (<div>
            <span className="btn btn-danger" onClick={$this.onClear}>Clear</span>
            <span className="btn btn-primary" style={{width: '100px'}} onClick={$this.onModalClose}>Ok</span>
        </div>);

        var value = (((this.props.from != "") || (this.props.to != "")) ? (this.props.from + " - " + this.props.to) : "");

        return (
            <div>
                <input id={this.props.id} type="text" className="form-control range"
                       placeholder={this.props.placeholder}
                       title={this.props.title}
                       name={this.props.name}
                       value={value}
                       onChange={this.onChange}
                       onClick={this.onClick}/>

                {!!$this.state.isModalVisible ? (<Modal id={$this.props.modalId} title={$this.props.modalTitle}
                                                        onClose={$this.onModalClose}
                                                        isOpen={$this.state.isModalVisible}
                                                        body={modalBody}
                                                        footer={modalFooter}/>) : ""}
            </div>
        );
    }
})
;