creevey/dist/client/web/KeyboardEventsContext.js

Cross-browser screenshot testing tool for Storybook with fancy UI Runner

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.KeyboardEvents = exports.KeyboardEventsContext = void 0;
const react_1 = __importStar(require("react"));
const types_js_1 = require("../../types.js");
const helpers_js_1 = require("../shared/helpers.js");
const CreeveyContext_js_1 = require("./CreeveyContext.js");
exports.KeyboardEventsContext = react_1.default.createContext({
    sidebarFocusedItem: [],
    setSidebarFocusedItem: types_js_1.noop,
});
const KeyboardEvents = ({ children, rootSuite, filter, }) => {
    const [sidebarFocusedItem, setSidebarFocusedItem] = (0, react_1.useState)([]);
    const { onSuiteOpen, onSuiteToggle } = (0, react_1.useContext)(CreeveyContext_js_1.CreeveyContext);
    const suiteList = (0, helpers_js_1.flattenSuite)((0, helpers_js_1.filterTests)(rootSuite, filter));
    const getFocusedItemIndex = (0, react_1.useCallback)((item) => {
        return suiteList.findIndex((x) => {
            const path = (0, types_js_1.isTest)(x.suite) ? (0, helpers_js_1.getTestPath)(x.suite) : x.suite.path;
            return item.length === path.length && item.every((focusedPath) => path.includes(focusedPath));
        });
    }, [suiteList]);
    const handleKeyDown = (0, react_1.useCallback)((e) => {
        if (sidebarFocusedItem === null)
            return;
        if (e.code === 'Enter') {
            if (sidebarFocusedItem.length === 0)
                return;
            const focusedSuite = (0, helpers_js_1.getSuiteByPath)(rootSuite, sidebarFocusedItem);
            if (!focusedSuite)
                return;
            if (!(0, types_js_1.isTest)(focusedSuite)) {
                e.preventDefault();
                onSuiteOpen(focusedSuite.path, !focusedSuite.opened);
            }
            if ((0, types_js_1.isTest)(focusedSuite) && focusedSuite.results?.length == 0) {
                e.preventDefault();
            }
            return;
        }
        if (e.code === 'Space') {
            e.preventDefault();
            const focusedSuite = (0, helpers_js_1.getSuiteByPath)(rootSuite, sidebarFocusedItem);
            if (!focusedSuite)
                return;
            const path = (0, types_js_1.isTest)(focusedSuite) ? (0, helpers_js_1.getTestPath)(focusedSuite) : focusedSuite.path;
            onSuiteToggle(path, !focusedSuite.checked);
        }
        if (e.code === 'ArrowDown') {
            const currentIndex = sidebarFocusedItem.length === 0 ? -1 : getFocusedItemIndex(sidebarFocusedItem);
            if (currentIndex === suiteList.length - 1)
                return;
            const nextSuite = suiteList[currentIndex + 1];
            const nextPath = (0, types_js_1.isTest)(nextSuite.suite) ? (0, helpers_js_1.getTestPath)(nextSuite.suite) : nextSuite.suite.path;
            setSidebarFocusedItem(nextPath);
        }
        if (e.code === 'ArrowUp') {
            const currentIndex = sidebarFocusedItem.length === 0 ? 0 : getFocusedItemIndex(sidebarFocusedItem);
            const nextSuite = currentIndex > 0 ? suiteList[currentIndex - 1].suite : rootSuite;
            const nextPath = (0, types_js_1.isTest)(nextSuite) ? (0, helpers_js_1.getTestPath)(nextSuite) : nextSuite.path;
            setSidebarFocusedItem(nextPath);
        }
        if (e.code === 'ArrowRight') {
            if (sidebarFocusedItem.length === 0)
                return;
            const focusedSuite = (0, helpers_js_1.getSuiteByPath)(rootSuite, sidebarFocusedItem);
            if (!focusedSuite || (0, types_js_1.isTest)(focusedSuite))
                return;
            onSuiteOpen(focusedSuite.path, true);
        }
        if (e.code === 'ArrowLeft') {
            if (sidebarFocusedItem.length === 0)
                return;
            const focusedSuite = (0, helpers_js_1.getSuiteByPath)(rootSuite, sidebarFocusedItem);
            if (!focusedSuite)
                return;
            if (!(0, types_js_1.isTest)(focusedSuite) && focusedSuite.opened) {
                onSuiteOpen(focusedSuite.path, false);
                return;
            }
            const path = (0, types_js_1.isTest)(focusedSuite) ? (0, helpers_js_1.getTestPath)(focusedSuite) : focusedSuite.path;
            setSidebarFocusedItem(path.slice(0, -1));
        }
    }, [onSuiteOpen, onSuiteToggle, rootSuite, suiteList, getFocusedItemIndex, sidebarFocusedItem]);
    (0, react_1.useEffect)(() => {
        document.addEventListener('keydown', handleKeyDown, false);
        return () => {
            document.removeEventListener('keydown', handleKeyDown, false);
        };
    }, [handleKeyDown]);
    return (react_1.default.createElement(exports.KeyboardEventsContext.Provider, { value: { sidebarFocusedItem, setSidebarFocusedItem } }, children));
};
exports.KeyboardEvents = KeyboardEvents;
//# sourceMappingURL=KeyboardEventsContext.js.map