|
Line 0
Link Here
|
| 0 |
- |
1 |
var React = require('react'); |
|
|
2 |
var ReactDOM = require('react-dom'); |
| 3 |
|
| 4 |
var ItemMessages = React.createClass({ |
| 5 |
propTypes: { |
| 6 |
messages: React.PropTypes.array.isRequired |
| 7 |
}, |
| 8 |
getInitialState: function() { |
| 9 |
return { messages: this.props.messages }; |
| 10 |
}, |
| 11 |
addMessage: function(message) { |
| 12 |
this.setState(function(state) { |
| 13 |
var newData = state.messages.slice(); |
| 14 |
newData.push( message ); |
| 15 |
return {messages: newData}; |
| 16 |
}); |
| 17 |
}, |
| 18 |
removeMessage: function(index) { |
| 19 |
this.setState(function(state) { |
| 20 |
var newData = state.messages.slice(); |
| 21 |
newData.splice(index, 1); |
| 22 |
return {messages: newData}; |
| 23 |
}); |
| 24 |
}, |
| 25 |
render: function () { |
| 26 |
var item_messages = this; |
| 27 |
return <div className="listgroup"> |
| 28 |
<h4>Messages</h4> |
| 29 |
<ol className="bibliodetails"> |
| 30 |
{this.state.messages.map(function(message, index) { |
| 31 |
return <ItemMessage key={message.id} message={message} index={index} onRemove={item_messages.removeMessage} /> |
| 32 |
})} |
| 33 |
<ItemMessageCreator onAdd={item_messages.addMessage}/> |
| 34 |
</ol> |
| 35 |
</div>; |
| 36 |
} |
| 37 |
}); |
| 38 |
|
| 39 |
var ItemMessage = React.createClass({ |
| 40 |
propTypes: { |
| 41 |
message: React.PropTypes.object.isRequired, |
| 42 |
index: React.PropTypes.number.isRequired, |
| 43 |
onRemove: React.PropTypes.func.isRequired, |
| 44 |
}, |
| 45 |
removeMessage: function() { |
| 46 |
if ( confirm("Delete message the following message? : " + this.props.message.content ) ) { |
| 47 |
this.props.onRemove(this.props.index); |
| 48 |
} |
| 49 |
}, |
| 50 |
render: function () { |
| 51 |
return <li> |
| 52 |
<span className="label"> |
| 53 |
<i className="fa fa-minus-circle" onClick={this.removeMessage}></i> |
| 54 |
{this.props.message.type} |
| 55 |
</span> |
| 56 |
{this.props.message.content} |
| 57 |
</li> |
| 58 |
} |
| 59 |
}); |
| 60 |
|
| 61 |
var ItemMessageCreator = React.createClass({ |
| 62 |
propTypes: { |
| 63 |
onAdd: React.PropTypes.func.isRequired, |
| 64 |
}, |
| 65 |
getInitialState: function () { |
| 66 |
return { |
| 67 |
content: "", |
| 68 |
type: "", |
| 69 |
}; |
| 70 |
}, |
| 71 |
addMessage: function() { |
| 72 |
this.props.onAdd( |
| 73 |
{ |
| 74 |
id: Math.random() * 100, |
| 75 |
type: this.state.type, |
| 76 |
content: this.state.content, |
| 77 |
} |
| 78 |
); |
| 79 |
}, |
| 80 |
cancelMessage: function() { |
| 81 |
this.setState( this.getInitialState ); |
| 82 |
return false; |
| 83 |
}, |
| 84 |
handleTypeChange: function(e) { |
| 85 |
this.setState({ type: e.target.value }); |
| 86 |
}, |
| 87 |
handleContentChange: function(e) { |
| 88 |
this.setState({ content: e.target.value }); |
| 89 |
}, |
| 90 |
render: function () { |
| 91 |
return <li> |
| 92 |
<span className="label"> |
| 93 |
<select value={this.state.type} onChange={this.handleTypeChange}> |
| 94 |
<option value="test1">Test 1</option> |
| 95 |
<option value="test2">Test 2</option> |
| 96 |
<option value="test3">Test 3</option> |
| 97 |
</select> |
| 98 |
</span> |
| 99 |
<input className="input-xlarge" type="text" value={this.state.content} onChange={this.handleContentChange} /> |
| 100 |
<button className="submit" onClick={this.addMessage}> |
| 101 |
<i className="fa fa-plus-circle"></i> |
| 102 |
Add message |
| 103 |
</button> |
| 104 |
<a href="javascript:void(0);" onClick={this.cancelMessage}>Cancel</a> |
| 105 |
</li> |
| 106 |
} |
| 107 |
}); |
| 108 |
|
| 109 |
$( document ).ready(function() { |
| 110 |
var messages = [ |
| 111 |
{ id: 1, type: "Test 1", content: "Message 1" }, |
| 112 |
{ id: 2, type: "Test 2", content: "Message 2" }, |
| 113 |
{ id: 3, type: "Test 3", content: "Message 3" }, |
| 114 |
{ id: 4, type: "Test 4", content: "Message 4" }, |
| 115 |
{ id: 5, type: "Test 5", content: "Message 5" }, |
| 116 |
]; |
| 117 |
|
| 118 |
$('.item-messages').each(function() { |
| 119 |
ReactDOM.render( |
| 120 |
<ItemMessages messages={messages}/>, |
| 121 |
this |
| 122 |
); |
| 123 |
}); |
| 124 |
}); |