[Ivan Diaz] - Update dropdown component

This commit is contained in:
Ivan Diaz 2015-10-17 20:25:23 -03:00
parent 6fa28619bd
commit b054381bb1
2 changed files with 23 additions and 22 deletions

View File

@ -48,7 +48,7 @@ var DropDown = React.createClass({
var animation = this.getAnimationStyles();
return (
<div className="drop-down">
<div className={this.getClass()}>
<div className="drop-down--current" onClick={this.getClickCallback(this.getSelectedIndex())}>
{this.props.items[this.getSelectedIndex()]}
</div>
@ -72,17 +72,21 @@ var DropDown = React.createClass({
},
renderItem(item, index) {
var render = null;
return (
<li className="drop-down--list-item" onClick={this.getClickCallback(index)}>
{item}
</li>
);
},
if (index !== this.state.selectedIndex) {
render = (
<li className="drop-down--list-item" onClick={this.getClickCallback(index)}>
{item}
</li>
);
}
getClass() {
var classes = {
'drop-down': true,
return render;
[this.props.className]: (this.props.className)
};
return classNames(classes);
},
getClickCallback(index) {
@ -90,16 +94,10 @@ var DropDown = React.createClass({
},
handleClick(index) {
if (this.getSelectedIndex() === index) {
this.setState({
opened: !this.state.opened
});
}
else {
this.setState({
selectedIndex: index
});
}
this.setState({
opened: !this.state.opened,
selectedIndex: index
});
},
getSelectedIndex() {

View File

@ -8,13 +8,16 @@
cursor: pointer;
&--current {
color: $primary-black;
background-color: $light-grey;
padding: 8px;
border-radius: 4px 4px 0 0;
color: $primary-black;
padding: 6px;
}
&--list-container {
background-color: white;
position: absolute;
width: 150px;
}
&--list {