Add classKey, prevent action on key down event

master
Vitaliy Filippov 2021-09-13 22:45:29 +03:00
parent de88cea9d8
commit 4b9f309c3b
1 changed files with 9 additions and 4 deletions

View File

@ -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>))}