Add js event tester

Author: k.golikov

src/constants/router/menuItems.ts

@@ -74,6 +74,9 @@ const menuItems: MenuItem[] = [
             {
                 route: routes.counter
             },
+            {
+                route: routes.jsEventTester
+            },
             {
                 route: routes.jsonToYaml,
                 title: 'JSON to YAML converter',

src/constants/router/routes.tsx

@@ -33,6 +33,7 @@ import JsonToYamlPage from '../../pages/jsonToYamlPage/JsonToYamlPage';
 import CounterPage from '../../pages/counterPage/CounterPage';
 import RooksDemoPage from '../../pages/rooksDemoPage/RooksDemoPage';
 import MarkdownCheatSheetPage from '../../pages/markdownCheatSheetPage/MarkdownCheatSheetPage';
+import JsEventTesterPage from '../../pages/jsEventTesterPage/JsEventTesterPage';
 
 export interface AppRoute extends Omit<RouteProps, 'element'> {
     path: string;
@@ -69,6 +70,7 @@ type AppRoutesMap = Readonly<{
     dataUrlView: AppRoute;
     counter: AppRoute;
     rooksDemo: AppRoute;
+    jsEventTester: AppRoute;
     markdownCheatSheet: AppRoute;
     settings: AppRoute;
     about: AppRoute;
@@ -206,6 +208,11 @@ export const routes: AppRoutesMap = {
         component: CounterPage,
         title: 'Counter'
     },
+    jsEventTester: {
+        path: '/tools/js-event-tester',
+        component: JsEventTesterPage,
+        title: 'JS Event Tester'
+    },
     rooksDemo: {
         path: '/other/rooks-demo',
         component: RooksDemoPage,

src/layouts/appLayout/components/appHeader/components/appHeaderSearch/AppHeaderSearch.tsx

@@ -94,7 +94,7 @@ const AppHeaderSearch: FunctionComponent<Props> = ({ className, inputClassName,
         [selectOption, query]
     );
 
-    useKey(['/'], (event) => {
+    useKey(['Slash'], (event) => {
         const activeTag = document.activeElement?.tagName;
         if (activeTag && ['input', 'textarea'].includes(activeTag)) {
             return;

src/layouts/pages/pageContainer/PageContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, ReactNode, useMemo } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import styles from './PageContainer.module.scss';
 import { Space, SpaceProps, Tag } from 'antd';
 import Paragraph from 'antd/lib/typography/Paragraph';
@@ -35,7 +35,7 @@ const getTagNodes = (key: number | string): Readonly<Record<PageTag, ReactNode>>
 
 const renderTag = (tag: PageTag, index: number) => getTagNodes(index)[tag];
 
-const PageContainer: FunctionComponent<PageContainerProps> = (props) => {
+const PageContainer = React.forwardRef<HTMLDivElement, PageContainerProps>((props, ref) => {
     const {
         title,
         description,
@@ -53,6 +53,7 @@ const PageContainer: FunctionComponent<PageContainerProps> = (props) => {
 
     return (
         <div
+            ref={ref}
             className={classNames(
                 styles.container,
                 {
@@ -75,6 +76,6 @@ const PageContainer: FunctionComponent<PageContainerProps> = (props) => {
             <div className={classNames(styles.contentContainer, contentClassName)}>{children}</div>
         </div>
     );
-};
+});
 
 export default PageContainer;

src/pages/jsEventTesterPage/JsEventTesterPage.module.scss

@@ -0,0 +1,112 @@
+import React, { FunctionComponent, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import PageContainer from '../../layouts/pages/pageContainer/PageContainer';
+import Flex from '../../components/flex/Flex';
+import { Tabs } from 'antd';
+import Text from 'antd/lib/typography/Text';
+import joinObjects from '../../utils/joinObjects';
+
+const JsEventTesterPage: FunctionComponent = () => {
+    const [lastKeyDownEvent, setLastKeyDownEvent] = useState<KeyboardEvent>();
+
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const pressedModifiers = useMemo<ReactNode[]>(() => {
+        if (!lastKeyDownEvent) {
+            return [];
+        }
+
+        return [
+            lastKeyDownEvent.ctrlKey && (
+                <Text keyboard key="modifier-ctrl">
+                    Ctrl
+                </Text>
+            ),
+            lastKeyDownEvent.altKey && (
+                <Text keyboard key="modifier-alt">
+                    Alt
+                </Text>
+            ),
+            lastKeyDownEvent.shiftKey && (
+                <Text keyboard key="modifier-shift">
+                    Shift
+                </Text>
+            ),
+            lastKeyDownEvent.metaKey && (
+                <Text keyboard key="modifier-meta">
+                    Win
+                </Text>
+            )
+        ].filter(Boolean);
+    }, [lastKeyDownEvent]);
+
+    const pressedShortcut = useMemo<ReactNode[]>(() => {
+        if (!lastKeyDownEvent) {
+            return [];
+        }
+
+        return [
+            ...pressedModifiers,
+            lastKeyDownEvent.location !== 1 && lastKeyDownEvent.location !== 2 && (
+                <Text keyboard key="pressed-key">
+                    {lastKeyDownEvent.key.toUpperCase()}
+                </Text>
+            )
+        ].filter(Boolean);
+    }, [pressedModifiers, lastKeyDownEvent]);
+
+    const handleKeyDown = useCallback((event: KeyboardEvent) => {
+        event.stopImmediatePropagation();
+
+        console.log('keydown', event);
+        setLastKeyDownEvent(event);
+    }, []);
+
+    useEffect(() => {
+        window.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [handleKeyDown]);
+
+    return (
+        <PageContainer ref={containerRef} title="JavaScript Event Tester" tabIndex={-1}>
+            <Flex column maxWidth="800px">
+                <Tabs>
+                    <Tabs.TabPane tab="keydown">
+                        <Flex column>
+                            {lastKeyDownEvent ? (
+                                <Text className="fs-6">
+                                    <Flex column gap={5}>
+                                        <Text strong className="fs-5">
+                                            {joinObjects(pressedShortcut, <>+</>)}
+                                        </Text>
+                                        <div>
+                                            <Text code>event.key</Text>: <Text keyboard>{lastKeyDownEvent.key}</Text>
+                                        </div>
+                                        <div>
+                                            <Text code>event.code</Text>: <Text keyboard>{lastKeyDownEvent.code}</Text>
+                                        </div>
+                                        <div>
+                                            <Text code>event.which</Text>:{' '}
+                                            <Text keyboard>{lastKeyDownEvent.which}</Text>
+                                        </div>
+                                        <div>
+                                            <Text code>modifiers</Text>: {pressedModifiers}
+                                        </div>
+                                    </Flex>
+                                </Text>
+                            ) : (
+                                <Flex column gap={8}>
+                                    <Text strong>Press any key</Text>
+                                </Flex>
+                            )}
+                        </Flex>
+                    </Tabs.TabPane>
+                </Tabs>
+            </Flex>
+        </PageContainer>
+    );
+};
+
+export default JsEventTesterPage;

src/pages/jsEventTesterPage/JsEventTesterPage.tsx

@@ -0,0 +1,12 @@
+const joinObjects = <T, S>(items: T[], separator: S): Array<T | S> => {
+    return items.reduce<Array<T | S>>((result, value, index) => {
+        if (index !== 0) {
+            result.push(separator);
+        }
+
+        result.push(value);
+        return result;
+    }, []);
+};
+
+export default joinObjects;