mirror of
https://github.com/opensupports/opensupports.git
synced 2025-07-31 01:35:15 +02:00
[Max Red] - Modify dropdown focus behaviour
This commit is contained in:
parent
ce19284159
commit
808cdb81b6
@ -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); }} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
@ -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() {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user