vitalif-js
/
selectbox
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
PickerMenu.js
View File

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