[Max Red] - Modify dropdown focus behaviour

This commit is contained in:
Ivan Diaz 2016-01-23 11:17:50 -03:00
parent ce19284159
commit 808cdb81b6
2 changed files with 23 additions and 7 deletions

View File

@ -56,7 +56,7 @@ var DemoPage = React.createClass({
{ {
title: 'DropDown', title: 'DropDown',
render: ( render: (
<DropDown items={dropDownItems} /> <DropDown items={dropDownItems} onChange={function (index) { console.log('changed to ' + index); }} />
) )
} }
], ],

View File

@ -51,7 +51,7 @@ var DropDown = React.createClass({
return ( return (
<div className={this.getClass()}> <div className={this.getClass()}>
<div className="drop-down--current" onClick={this.getClickCallback(this.getSelectedIndex())}> <div className="drop-down--current" onBlur={this.handleBlur} onClick={this.handleClick} tabIndex="0" ref="current">
{this.props.items[this.getSelectedIndex()]} {this.props.items[this.getSelectedIndex()]}
</div> </div>
<Motion defaultStyle={animation.defaultStyle} style={animation.style}> <Motion defaultStyle={animation.defaultStyle} style={animation.style}>
@ -75,7 +75,7 @@ var DropDown = React.createClass({
renderItem(item, index) { renderItem(item, index) {
return ( return (
<li className="drop-down--list-item" onClick={this.getClickCallback(index)}> <li className="drop-down--list-item" onClick={this.handleItemClick.bind(this, index)} onMouseDown={this.handleItemMouseDown}>
{item.content} {item.content}
</li> </li>
); );
@ -91,15 +91,31 @@ var DropDown = React.createClass({
return classNames(classes); return classNames(classes);
}, },
getClickCallback(index) { handleBlur() {
return callback(this.handleClick.bind(this, index), this.props.onChange, {index: index}) this.setState({
opened: false
});
}, },
handleClick(index) { handleClick() {
this.setState({ this.setState({
opened: !this.state.opened, opened: !this.state.opened
});
},
handleItemClick(index) {
this.setState({
opened: false,
selectedIndex: index selectedIndex: index
}); });
if (this.props.onChange) {
this.props.onChange(index);
}
},
handleItemMouseDown(event) {
event.preventDefault();
}, },
getSelectedIndex() { getSelectedIndex() {