Add classKey, prevent action on key down event
parent
de88cea9d8
commit
4b9f309c3b
|
@ -1,5 +1,5 @@
|
|||
// Menu-like Picker variant with keyboard control
|
||||
// Version 2021-08-30
|
||||
// Version 2021-09-13
|
||||
// License: LGPLv3.0+
|
||||
// (c) Vitaliy Filippov 2020+
|
||||
|
||||
|
@ -25,6 +25,8 @@ export default class PickerMenu extends Picker
|
|||
keepOnClick: PropTypes.bool,
|
||||
// menuitem name key - default empty (render the item itself)
|
||||
labelKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
// menuitem CSS class key - default none
|
||||
classKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
// menuitem "disabled" key - default none
|
||||
disabledKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
// change theme (CSS module) for this input
|
||||
|
@ -42,7 +44,7 @@ export default class PickerMenu extends Picker
|
|||
active = dir == 1 ? 0 : this.props.items.length-1;
|
||||
else
|
||||
active = (prev + this.props.items.length - dir) % this.props.items.length;
|
||||
if (this.props.disabledKey)
|
||||
if (this.props.disabledKey != null)
|
||||
{
|
||||
while (this.props.items[active][this.props.disabledKey] && active != prev)
|
||||
{
|
||||
|
@ -58,6 +60,7 @@ export default class PickerMenu extends Picker
|
|||
{
|
||||
this.focus();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
else if (ev.which == 10 || ev.which == 13)
|
||||
{
|
||||
|
@ -70,6 +73,7 @@ export default class PickerMenu extends Picker
|
|||
{
|
||||
this.onMouseDown();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -107,7 +111,7 @@ export default class PickerMenu extends Picker
|
|||
e = e.parentNode;
|
||||
}
|
||||
if (e && e.getAttribute('data-idx') &&
|
||||
(!this.props.disabledKey || !this.props.items[e.getAttribute('data-idx')][this.props.disabledKey]))
|
||||
(this.props.disabledKey == null || !this.props.items[e.getAttribute('data-idx')][this.props.disabledKey]))
|
||||
{
|
||||
this.setState({ active: e.getAttribute('data-idx') });
|
||||
}
|
||||
|
@ -158,7 +162,8 @@ export default class PickerMenu extends Picker
|
|||
{this.props.beforeItems}
|
||||
{this.props.items.map((e, i) => (<div key={i} data-idx={i} onMouseDown={this.onMouseDown}
|
||||
className={theme.suggestion+
|
||||
(this.props.disabledKey && e[this.props.disabledKey] ? ' '+theme.disabled : '')+
|
||||
(this.props.disabledKey != null && e[this.props.disabledKey] ? ' '+theme.disabled : '')+
|
||||
(this.props.classKey != null && e[this.props.classKey] ? ' '+e[this.props.classKey] : '')+
|
||||
(this.state.active == i ? ' '+theme.active : '')}>
|
||||
{!this.props.labelKey ? e : e[this.props.labelKey]}
|
||||
</div>))}
|
||||
|
|
Loading…
Reference in New Issue