@redocly/theme/lib/core/hooks/use-input-key-commands.js

Shared UI components lib

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useInputKeyCommands = useInputKeyCommands;
const react_1 = require("react");
function useInputKeyCommands(actionHandlers) {
    // MacOS uses Command key instead of Ctrl
    const ctrlKey = (0, react_1.useMemo)(() => (navigator.userAgent.includes('Mac') ? 'metaKey' : 'ctrlKey'), []);
    const isSelectAll = (0, react_1.useCallback)((event) => {
        return event.key === 'a' && event[ctrlKey];
    }, [ctrlKey]);
    const isPaste = (0, react_1.useCallback)((event) => {
        return event.key === 'v' && event[ctrlKey];
    }, [ctrlKey]);
    const commands = (0, react_1.useMemo)(() => [
        {
            match: (event) => event.key === 'Enter',
            execute: (event) => { var _a; return (_a = actionHandlers === null || actionHandlers === void 0 ? void 0 : actionHandlers.onEnter) === null || _a === void 0 ? void 0 : _a.call(actionHandlers, event); },
        },
        {
            match: (event) => event.key === 'Escape',
            execute: (event) => {
                var _a, _b, _c;
                (_a = actionHandlers === null || actionHandlers === void 0 ? void 0 : actionHandlers.onEscape) === null || _a === void 0 ? void 0 : _a.call(actionHandlers, event);
                if (((_b = event.currentTarget) === null || _b === void 0 ? void 0 : _b.selectionStart) !== ((_c = event.currentTarget) === null || _c === void 0 ? void 0 : _c.selectionEnd)) {
                    event.stopPropagation();
                    removeSelection(event);
                }
            },
        },
        {
            match: isSelectAll,
            execute: (event) => { var _a; return (_a = actionHandlers === null || actionHandlers === void 0 ? void 0 : actionHandlers.onSelectAll) === null || _a === void 0 ? void 0 : _a.call(actionHandlers, event); },
        },
        {
            match: isPaste,
            execute: (event) => { var _a; return (_a = actionHandlers === null || actionHandlers === void 0 ? void 0 : actionHandlers.onPaste) === null || _a === void 0 ? void 0 : _a.call(actionHandlers, event); },
        },
        {
            match: (event) => {
                var _a, _b, _c, _d, _e, _f;
                if (!((_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.value))
                    return false;
                const selectionLength = ((_c = (_b = event.currentTarget) === null || _b === void 0 ? void 0 : _b.selectionEnd) !== null && _c !== void 0 ? _c : 0) - ((_e = (_d = event.currentTarget) === null || _d === void 0 ? void 0 : _d.selectionStart) !== null && _e !== void 0 ? _e : 0);
                const isFullValueSelected = ((_f = event.currentTarget) === null || _f === void 0 ? void 0 : _f.value.length) === selectionLength;
                const isModifyAction = isPrintableCharacter(event) || isPaste(event) || isDelete(event);
                return isFullValueSelected && isModifyAction;
            },
            execute: (event) => { var _a; return (_a = actionHandlers === null || actionHandlers === void 0 ? void 0 : actionHandlers.onClear) === null || _a === void 0 ? void 0 : _a.call(actionHandlers, event); },
        },
    ], [actionHandlers, isPaste, isSelectAll]);
    const onKeyDown = (0, react_1.useCallback)((event) => {
        for (const command of commands) {
            if (command.match(event)) {
                command.execute(event);
            }
        }
    }, [commands]);
    return { onKeyDown };
}
function removeSelection(event) {
    var _a;
    const selectionEnd = (_a = event.currentTarget.selectionEnd) !== null && _a !== void 0 ? _a : 0;
    event.currentTarget.setSelectionRange(selectionEnd, selectionEnd);
}
function isPrintableCharacter(event) {
    return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
}
function isDelete(event) {
    return event.key === 'Backspace' || event.key === 'Delete';
}
//# sourceMappingURL=use-input-key-commands.js.map