xy-select
Version:
基于React的下拉列表组件
72 lines • 2.48 kB
JavaScript
import { useRef, useState, useCallback } from "react";
import { CreateNnavigateHandle, locateElement } from "utils-dom";
/**
* 管理Select选择器的键盘导航
*/
export default function useNnavigate(options, value, selectValue, setVisible, searchMode, multiple) {
var _a = useState(multiple ? null : value instanceof Array && value.length > 0 ? value[0] : value), focusValue = _a[0], setFocusValue = _a[1];
var scrollwrapRef = useRef(null);
var handleKeyDown = useCallback(CreateNnavigateHandle({
onEnter: function (e) {
if (focusValue !== undefined || focusValue !== null) {
selectValue(focusValue);
}
var selectBox = e.currentTarget;
if (selectBox && multiple) {
if (searchMode) {
selectBox.querySelector("input").focus();
}
else {
selectBox.focus();
}
}
},
onShow: function () {
setVisible(true);
},
onHide: function (e) {
setVisible(false);
var selectBox = e.currentTarget;
if (selectBox) {
selectBox.focus();
}
},
onNext: function () {
setNextFocus(false);
},
onPrev: function () {
setNextFocus();
}
}), [focusValue, value]);
function setNextFocus(isnext) {
if (isnext === void 0) { isnext = true; }
var opts = options.current.filter(function (x) { return !x.disabled && !x.filtered; });
var next = focusValue;
var i = opts.findIndex(function (cfg) { return cfg.value === focusValue; });
if (i === -1 && opts.length > 0) {
next = opts[0].value;
}
else if (isnext ? i - 1 >= 0 : i + 1 < opts.length) {
next = isnext ? opts[i - 1].value : opts[i + 1].value;
}
if (next === focusValue) {
return;
}
setFocusOption(next);
}
/**
* 设置焦点Option
* @param value
*/
function setFocusOption(value) {
setFocusValue(value);
var wrap = scrollwrapRef.current;
if (!wrap) {
return;
}
var option = wrap.querySelector("[data-value=\"" + value + "\"]");
locateElement(wrap, option);
}
return [focusValue, handleKeyDown, scrollwrapRef];
}
//# sourceMappingURL=useNnavigate.js.map