Skip to content

Instantly share code, notes, and snippets.

@benkeen
Created February 16, 2015 20:12
Show Gist options
  • Save benkeen/94d3acaefe7b16bd3c99 to your computer and use it in GitHub Desktop.
Save benkeen/94d3acaefe7b16bd3c99 to your computer and use it in GitHub Desktop.
var AddFilterForm = React.createClass({
getDefaultProps: function () {
return {
tooltip: ''
};
},
componentDidMount: function () {
this.focusFilterField();
},
componentDidUpdate: function () {
this.focusFilterField();
},
focusFilterField: function () {
this.refs.addItem.getDOMNode().focus();
},
onChangeFilter: function (e) {
Actions.filterChange(e.target.value);
},
render: function () {
return (
<form className="form-inline js-filter-form" onSubmit={this.props.onSubmit}>
<AddFilterFormContent onChange={this.props.onChangeFilter} filter={this.props.filter}
tooltip={this.props.tooltip} />
</form>
);
}
});
var AddFilterFormContent = React.createClass({
render: function () {
return (
<fieldset>
<input type="text" ref="addItem" className="js-changes-filter-field" placeholder="Type a filter"
onChange={this.props.onChangeFilter} value={this.props.filter} />
<button type="submit" className="btn btn-primary">Filter</button>
<div className="help-block">
<strong ref="helpText">e.g. _design or document ID</strong>
{' '}
<FilterTooltip tooltip={this.props.tooltip} />
</div>
</fieldset>
);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment