65 lines
2.1 KiB
JavaScript
65 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
|
|
import DropDownBase from './DropDownBase.js';
|
|
|
|
export default class DropDownMenu extends DropDownBase
|
|
{
|
|
state = { items: this.props.items }
|
|
|
|
render()
|
|
{
|
|
let sel = this.state.selectedItem;
|
|
return <div ref="dd" className={'dropdown'+(this.state.visible ? ' visible' : '')} id={'dropdown-'+this.props.id}
|
|
tabIndex="1" style={{ top: this.state.top, left: this.state.left }} onClick={this.myOnClick} onKeyDown={this.onKeyDown}
|
|
onMouseOver={this.onMouseOver}>
|
|
{this.state.items.map((i, index) => (i.split
|
|
? <div key={index} className="split"><i></i></div>
|
|
: <div key={index} data-index={index} className={'item'+(i.i16 ? ' i16' : '')+(i.disabled ? ' disabled' : (sel == index ? ' over' : ''))}>
|
|
{i.hotkey ? <div className="hotkey">{i.hotkey}</div> : null}
|
|
{i.icon ? <img src={'icons/'+i.icon+'.png'} /> : null}
|
|
<span>{i.text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
}
|
|
|
|
onMouseOver = (ev) =>
|
|
{
|
|
let t = ev.target;
|
|
while ((t && t != this.refs.dd) && (!t.className || t.className.substr(0, 4) != 'item'))
|
|
t = t.parentNode;
|
|
if (t && t != this.refs.dd)
|
|
this.setState({ selectedItem: parseInt(t.getAttribute('data-index')) });
|
|
}
|
|
|
|
onKeyDown = (ev) =>
|
|
{
|
|
if (ev.keyCode == 40 || ev.keyCode == 38)
|
|
{
|
|
let a = ev.keyCode == 40 ? 1 : this.state.items.length-1;
|
|
let sel = this.state.selectedItem;
|
|
do
|
|
{
|
|
sel = ((sel+a) % this.state.items.length);
|
|
}
|
|
while (this.state.items[sel].split && sel != this.state.selectedItem);
|
|
this.setState({ selectedItem: sel });
|
|
}
|
|
else if (ev.keyCode == 10 || ev.keyCode == 13)
|
|
this.clickItem();
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
}
|
|
|
|
clickItem = (ev) =>
|
|
{
|
|
}
|
|
|
|
myOnClick = (ev) =>
|
|
{
|
|
if (ev.target.getAttribute('data-index'))
|
|
this.clickItem();
|
|
this.onClick(ev);
|
|
}
|
|
}
|