naive-ui/lib/tree/src/keyboard.js

A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useKeyboard = useKeyboard;
const vue_1 = require("vue");
const interface_1 = require("../../tree-select/src/interface");
function useKeyboard({ props, fNodesRef, mergedExpandedKeysRef, mergedSelectedKeysRef, mergedCheckedKeysRef, handleCheck, handleSelect, handleSwitcherClick }) {
    const { value: mergedSelectedKeys } = mergedSelectedKeysRef;
    // If it's used in tree-select, make it take over pending state
    const treeSelectInjection = (0, vue_1.inject)(interface_1.treeSelectInjectionKey, null);
    const pendingNodeKeyRef = treeSelectInjection
        ? treeSelectInjection.pendingNodeKeyRef
        : (0, vue_1.ref)(mergedSelectedKeys.length
            ? mergedSelectedKeys[mergedSelectedKeys.length - 1]
            : null);
    function handleKeydown(e) {
        var _a;
        if (!props.keyboard)
            return { enterBehavior: null };
        const { value: pendingNodeKey } = pendingNodeKeyRef;
        let enterBehavior = null;
        if (pendingNodeKey === null) {
            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                e.preventDefault();
            }
            if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
                if (pendingNodeKey === null) {
                    const { value: fNodes } = fNodesRef;
                    let fIndex = 0;
                    while (fIndex < fNodes.length) {
                        if (!fNodes[fIndex].disabled) {
                            pendingNodeKeyRef.value = fNodes[fIndex].key;
                            break;
                        }
                        fIndex += 1;
                    }
                }
            }
        }
        else {
            const { value: fNodes } = fNodesRef;
            let fIndex = fNodes.findIndex(tmNode => tmNode.key === pendingNodeKey);
            if (!~fIndex)
                return { enterBehavior: null };
            if (e.key === 'Enter') {
                const tmNode = fNodes[fIndex];
                enterBehavior
                    = ((_a = props.overrideDefaultNodeClickBehavior) === null || _a === void 0 ? void 0 : _a.call(props, {
                        option: tmNode.rawNode
                    })) || null;
                switch (enterBehavior) {
                    case 'toggleCheck':
                        handleCheck(tmNode, !mergedCheckedKeysRef.value.includes(tmNode.key));
                        break;
                    case 'toggleSelect':
                        handleSelect(tmNode);
                        break;
                    case 'toggleExpand':
                        handleSwitcherClick(tmNode);
                        break;
                    case 'none':
                        break;
                    case 'default':
                    default:
                        enterBehavior = 'default';
                        handleSelect(tmNode);
                }
            }
            else if (e.key === 'ArrowDown') {
                e.preventDefault();
                fIndex += 1;
                while (fIndex < fNodes.length) {
                    if (!fNodes[fIndex].disabled) {
                        pendingNodeKeyRef.value = fNodes[fIndex].key;
                        break;
                    }
                    fIndex += 1;
                }
            }
            else if (e.key === 'ArrowUp') {
                e.preventDefault();
                fIndex -= 1;
                while (fIndex >= 0) {
                    if (!fNodes[fIndex].disabled) {
                        pendingNodeKeyRef.value = fNodes[fIndex].key;
                        break;
                    }
                    fIndex -= 1;
                }
            }
            else if (e.key === 'ArrowLeft') {
                const pendingNode = fNodes[fIndex];
                if (pendingNode.isLeaf
                    || !mergedExpandedKeysRef.value.includes(pendingNodeKey)) {
                    const parentTmNode = pendingNode.getParent();
                    if (parentTmNode) {
                        pendingNodeKeyRef.value = parentTmNode.key;
                    }
                }
                else {
                    handleSwitcherClick(pendingNode);
                }
            }
            else if (e.key === 'ArrowRight') {
                const pendingNode = fNodes[fIndex];
                if (pendingNode.isLeaf)
                    return { enterBehavior: null };
                if (!mergedExpandedKeysRef.value.includes(pendingNodeKey)) {
                    handleSwitcherClick(pendingNode);
                }
                else {
                    // Tha same as ArrowDown
                    fIndex += 1;
                    while (fIndex < fNodes.length) {
                        if (!fNodes[fIndex].disabled) {
                            pendingNodeKeyRef.value = fNodes[fIndex].key;
                            break;
                        }
                        fIndex += 1;
                    }
                }
            }
        }
        return {
            enterBehavior
        };
    }
    return {
        pendingNodeKeyRef,
        handleKeydown
    };
}