-
Notifications
You must be signed in to change notification settings - Fork 516
Commit
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,26 +1,36 @@ | ||
var React = require('react'); | ||
|
||
var Template = require('./Template'); | ||
var debounce = require('lodash/function/debounce'); | ||
|
||
class Toggle extends React.Component { | ||
render() { | ||
var toggleFilter = this.props.toggleFilter; | ||
var label = this.props.label; | ||
var isRefined = this.props.isRefined; | ||
var template = this.props.template; | ||
// When a checkbox is wrapped inside a label, click events fire twice, so we | ||
// debounce it to only keep the first one | ||
var toggleFilter = debounce(this.props.toggleFilter, 0, { | ||
leading: true, | ||
trailing: false | ||
}); | ||
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong.
vvo
Contributor
|
||
var data = { | ||
label: this.props.label, | ||
isRefined: this.props.isRefined | ||
}; | ||
|
||
return ( | ||
<label> | ||
<input | ||
checked={isRefined} | ||
onChange={toggleFilter} | ||
type="checkbox" | ||
/> | ||
{label} | ||
</label> | ||
<span onClick={toggleFilter}> | ||
<Template data={data} template={template} /> | ||
</span> | ||
); | ||
} | ||
} | ||
|
||
Toggle.propTypes = { | ||
toggleFilter: React.PropTypes.func, | ||
template: React.PropTypes.oneOfType([ | ||
React.PropTypes.string, | ||
React.PropTypes.func | ||
]).isRequired, | ||
toggleFilter: React.PropTypes.func.isRequired, | ||
label: React.PropTypes.string, | ||
isRefined: React.PropTypes.bool | ||
}; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<div class="checkbox"> | ||
<label> | ||
<input type="checkbox" {{#isRefined}}checked{{/isRefined}} /> | ||
<span class="badge pull-right">{{label}}</span> | ||
</label> | ||
</div> | ||
|
||
|
||
|
Interesting trick! Have you tested on multiple browsers?