pitaya-launcher/js/components/edit/item-form.jsx

78 lines
1.7 KiB
React
Raw Normal View History

2015-09-11 16:25:45 +02:00
var React = require('react');
var ItemForm = React.createClass({
2015-09-16 17:26:56 +02:00
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
});
}
},
2015-09-11 16:25:45 +02:00
render: function() {
2015-09-16 17:26:56 +02:00
var state = this.state;
2015-09-11 16:25:45 +02:00
return (
<div className="item-form">
2015-09-16 17:26:56 +02:00
<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>
2015-09-11 16:25:45 +02:00
</div>
);
2015-09-16 17:26:56 +02:00
},
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);
}
2015-09-11 16:25:45 +02:00
}
});
module.exports = ItemForm;