diff --git a/PickerMenu.js b/PickerMenu.js index 33ea508..5ed4bf0 100644 --- a/PickerMenu.js +++ b/PickerMenu.js @@ -1,5 +1,5 @@ // Menu-like Picker variant with keyboard control -// Version 2021-08-20 +// Version 2021-08-30 // 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 "disabled" key - default none + disabledKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // change theme (CSS module) for this input theme: PropTypes.object, } @@ -34,11 +36,24 @@ export default class PickerMenu extends Picker if ((ev.which == 40 || ev.which == 38) && this.props.items.length) { // up / down - this.setState({ - active: this.state.active == null ? 0 : ( - (this.state.active + (event.which === 40 ? 1 : this.props.items.length-1)) % this.props.items.length - ), - }); + const dir = (event.which === 40 ? 1 : -1); + let prev = this.state.active, active; + if (prev == null) + 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) + { + while (this.props.items[active][this.props.disabledKey] && active != prev) + { + active = (active + this.props.items.length - dir) % this.props.items.length; + } + if (this.props.items[active][this.props.disabledKey]) + { + active = null; + } + } + this.setState({ active }); if (!this.state.focused) { this.focus(); @@ -87,13 +102,14 @@ export default class PickerMenu extends Picker onMouseOver = (ev) => { let e = ev.target; - while (e && e != ev.currentTarget && !e.id) + while (e && e != ev.currentTarget && !e.getAttribute('data-idx')) { e = e.parentNode; } - if (e && e.id) + if (e && e.getAttribute('data-idx') && + (!this.props.disabledKey || !this.props.items[e.getAttribute('data-idx')][this.props.disabledKey])) { - this.setState({ active: e.id }); + this.setState({ active: e.getAttribute('data-idx') }); } } @@ -140,8 +156,10 @@ export default class PickerMenu extends Picker onKeyDown={this.onKeyDown} onMouseOver={this.onMouseOver}> {this.props.beforeItems} - {this.props.items.map((e, i) => (