78 lines
1.7 KiB
JavaScript
78 lines
1.7 KiB
JavaScript
var React = require('react');
|
|
|
|
var ItemForm = React.createClass({
|
|
|
|
getInitialState: function() {
|
|
return {
|
|
label: '',
|
|
icon: '',
|
|
exec: ''
|
|
};
|
|
},
|
|
|
|
componentWillReceiveProps: function(props) {
|
|
|
|
if(props.item) {
|
|
|
|
this.setState({
|
|
label: props.item.label,
|
|
icon: props.item.icon,
|
|
exec: props.item.exec
|
|
});
|
|
}
|
|
|
|
},
|
|
|
|
render: function() {
|
|
|
|
var state = this.state;
|
|
|
|
return (
|
|
<div className="item-form">
|
|
<form>
|
|
<div className="form-group">
|
|
<label>Label</label>
|
|
<input type="text" className="form-control"
|
|
placeholder="Label"
|
|
value={state.label}
|
|
onChange={this.handleChange.bind(this, 'label')} />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Icon</label>
|
|
<input type="text" className="form-control"
|
|
placeholder="Icon"
|
|
value={state.icon}
|
|
onChange={this.handleChange.bind(this, 'icon')} />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Exec</label>
|
|
<input type="text" className="form-control"
|
|
placeholder="Exec" value={state.exec}
|
|
onChange={this.handleChange.bind(this, 'exec')} />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
|
|
},
|
|
|
|
handleChange: function(key, evt) {
|
|
|
|
evt.preventDefault();
|
|
|
|
var newState = {};
|
|
var value = evt.currentTarget.value;
|
|
|
|
newState[key] = value;
|
|
this.setState(newState);
|
|
|
|
if(typeof this.props.onItemChange === 'function') {
|
|
this.props.onItemChange(this.props.item, key, value);
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
module.exports = ItemForm;
|