The library for web and native user interfaces.
fix jquery-bootstrap example bugs
Old one had some bugs: - 'x' on modal wasn't showing. - trying to close modal in unmount, but modal had a closing animation.
Cheng Lou committed
Jul 23, 2013 at 11:42 UTC
7f8b2885d9f9feb396896f7d9d6086ac7731cf36
1 file changed
+41
-43
examples/jquery-bootstrap/js/app.js
+41
-43
@@ -7,7 +7,7 @@ var BootstrapButton = React.createClass({
7
// transferPropsTo() is smart enough to merge classes provided
8
// to this component.
9
return this.transferPropsTo(
10
- <a href="javascript:;" role="button" class="btn">
10
+ <a href="javascript:;" role="button" className="btn">
11
{this.props.children}
12
</a>
13
);
@@ -19,12 +19,18 @@ var BootstrapModal = React.createClass({
19
// integrate with Bootstrap or jQuery!
20
componentDidMount: function() {
21
// When the component is added, turn it into a modal
22
- $(this.getDOMNode()).modal({backdrop: 'static', keyboard: false});
22
+ $(this.getDOMNode())
23
+ .modal({backdrop: 'static', keyboard: false, show: false})
24
},
25
componentWillUnmount: function() {
25
- // And when it's destroyed, hide it.
26
+ $(this.getDOMNode()).off('hidden', this.handleHidden);
27
+ },
28
+ close: function() {
29
$(this.getDOMNode()).modal('hide');
30
},
31
+ open: function() {
32
+ $(this.getDOMNode()).modal('show');
33
+ },
34
render: function() {
35
var confirmButton = null;
36
var cancelButton = null;
@@ -32,92 +38,84 @@ var BootstrapModal = React.createClass({
38
if (this.props.confirm) {
39
confirmButton = (
40
<BootstrapButton
35
- onClick={this.onConfirm}
36
- class="btn-primary">
41
+ onClick={this.handleConfirm}
42
+ className="btn-primary">
43
{this.props.confirm}
44
</BootstrapButton>
45
);
46
}
47
if (this.props.cancel) {
48
cancelButton = (
43
- <BootstrapButton onClick={this.onCancel}>
49
+ <BootstrapButton onClick={this.handleCancel}>
50
{this.props.cancel}
51
</BootstrapButton>
52
);
53
}
54
55
return (
50
- <div class="modal hide fade">
51
- <div class="modal-header">
56
+ <div className="modal hide fade">
57
+ <div className="modal-header">
58
<button
59
type="button"
54
- class="close"
55
- onClick={this.onCancel}
56
- dangerouslyInsertInnerHtml={{__html: '×'}}
60
+ className="close"
61
+ onClick={this.handleCancel}
62
+ dangerouslySetInnerHTML={{__html: '×'}}
63
/>
64
<h3>{this.props.title}</h3>
65
</div>
60
- <div class="modal-body">
66
+ <div className="modal-body">
67
{this.props.children}
68
</div>
63
- <div class="modal-footer">
69
+ <div className="modal-footer">
70
{cancelButton}
71
{confirmButton}
72
</div>
73
</div>
74
);
75
},
70
- onCancel: function() {
76
+ handleCancel: function() {
77
if (this.props.onCancel) {
78
this.props.onCancel();
79
}
74
- this.close();
80
},
76
- onConfirm: function() {
81
+ handleConfirm: function() {
82
if (this.props.onConfirm) {
83
this.props.onConfirm();
84
}
80
- this.close();
81
- },
82
- close: function() {
83
- if (this.props.onClose) {
84
- this.props.onClose();
85
- }
85
}
86
});
87
88
var Example = React.createClass({
90
- getInitialState: function() {
91
- return {modalVisible: false};
92
- },
93
- toggleModal: function() {
94
- this.setState({modalVisible: !this.state.modalVisible});
95
- },
89
handleCancel: function() {
90
if (confirm('Are you sure you want to cancel?')) {
98
- this.toggleModal();
91
+ this.refs.modal.close();
92
}
93
},
94
render: function() {
95
var modal = null;
103
- if (this.state.modalVisible) {
104
- modal = (
105
- <BootstrapModal
106
- confirm="OK"
107
- cancel="Cancel"
108
- onCancel={this.handleCancel}
109
- onConfirm={this.toggleModal}
110
- title="Hello, Bootstrap!">
111
- This is a React component powered by jQuery and Bootstrap!
112
- </BootstrapModal>
113
- );
114
- }
96
+ modal = (
97
+ <BootstrapModal
98
+ ref="modal"
99
+ confirm="OK"
100
+ cancel="Cancel"
101
+ onCancel={this.handleCancel}
102
+ onConfirm={this.closeModal}
103
+ title="Hello, Bootstrap!">
104
+ This is a React component powered by jQuery and Bootstrap!
105
+ </BootstrapModal>
106
+ );
107
return (
116
- <div class="example">
108
+ <div className="example">
109
{modal}
118
- <BootstrapButton onClick={this.toggleModal}>Toggle modal</BootstrapButton>
110
+ <BootstrapButton onClick={this.openModal}>Open modal</BootstrapButton>
111
</div>
112
);
113
+ },
114
+ openModal: function() {
115
+ this.refs.modal.open();
116
+ },
117
+ closeModal: function() {
118
+ this.refs.modal.close();
119
}
120
});
121