-
Notifications
You must be signed in to change notification settings - Fork 516
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(bem): Add BEM to the index-selector widget
This one does not have any default styles (so no `css` file with it). I still allow the styling of individual `option`, even if I'm unsure this is even useful. BREAKING CHANGE: We now use `cssClasses.select` and `cssClasses.option` instead of `cssClass` for the index-selector widget.
- Loading branch information
1 parent
6b42e34
commit 564da51
Showing
4 changed files
with
47 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,37 +1,43 @@ | ||
var React = require('react'); | ||
|
||
var bem = require('../lib/utils').bemHelper('ais-index-selector'); | ||
var cx = require('classnames'); | ||
|
||
class IndexSelector extends React.Component { | ||
handleChange(event) { | ||
this.props.setIndex(event.target.value).search(); | ||
this.props.setIndex(event.target.value); | ||
} | ||
|
||
render() { | ||
var currentIndex = this.props.currentIndex; | ||
var indices = this.props.indices; | ||
var cssClass = this.props.cssClass; | ||
var selectId = this.props.containerId + '-select'; | ||
var {currentIndex, indices} = this.props; | ||
|
||
var selectClass = cx(bem('select'), this.props.cssClasses.select); | ||
var optionClass = cx(bem('option'), this.props.cssClasses.option); | ||
|
||
var handleChange = this.handleChange.bind(this); | ||
|
||
return ( | ||
<select | ||
id={selectId} | ||
className={cssClass} | ||
onChange={this.handleChange.bind(this)} | ||
className={selectClass} | ||
onChange={handleChange} | ||
value={currentIndex} | ||
> | ||
{indices.map(function(index) { | ||
return <option key={index.name} value={index.name}>{index.label}</option>; | ||
return <option className={optionClass} key={index.name} value={index.name}>{index.label}</option>; | ||
})} | ||
</select> | ||
); | ||
} | ||
} | ||
|
||
IndexSelector.propTypes = { | ||
containerId: React.PropTypes.string, | ||
cssClass: React.PropTypes.string, | ||
cssClasses: React.PropTypes.shape({ | ||
select: React.PropTypes.string, | ||
option: React.PropTypes.string | ||
}), | ||
currentIndex: React.PropTypes.string, | ||
indices: React.PropTypes.array, | ||
setIndex: React.PropTypes.func | ||
setIndex: React.PropTypes.func.isRequired | ||
}; | ||
|
||
module.exports = IndexSelector; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters