fix: modify file name

Author: ProfBramble

src/components/keyEventListener/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test KeyCombiner suite snapshot match 1`] = `
+<span
+  data-testid="test_keyCombiner"
+>
+  <div>
+    command+shift+f
+  </div>
+</span>
+`;

src/components/keyEventListener/__tests__/index.test.tsx

@@ -0,0 +1,35 @@
+
+import React from 'react';
+import KeyEventListener from '../index';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+const { KeyCombiner } = KeyEventListener
+describe('test KeyCombiner suite', () => {
+    const text = 'command+shift+f';
+    let dom, element;
+    beforeEach(() => {
+        dom = render(<KeyCombiner
+            onTrigger={() => { console.log('keyAction') }}
+            keyMap={{
+                70: true,
+                91: true,
+                16: true
+            }}>
+            <div>{text}</div>
+        </KeyCombiner>)
+        element = dom.getByTestId('test_keyCombiner');
+    })
+    afterEach(() => {
+        cleanup()
+    })
+    test('snapshot match', () => {
+        expect(element).toMatchSnapshot();
+    })
+    test('test key code', () => {
+        fireEvent.keyPress(element, { key: 'Enter', code: 'Enter' })
+    })
+    test('should render the correct text', () => {
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveTextContent(`${text}`)
+    })
+})

src/components/keyEventListener/index.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import KeyCombiner from './listener'
+export default class KeyEventListener extends React.Component<any, any> {
+    static KeyCombiner=KeyCombiner
+    componentDidMount () {
+        addEventListener('keydown', this.bindEvent, false)
+        addEventListener('keyup', this.bindEvent, false)
+    }
+
+    componentWillUnmount () {
+        removeEventListener('keydown', this.bindEvent, false)
+        removeEventListener('keyup', this.bindEvent, false)
+    }
+
+    bindEvent = (target: any) => {
+        const { onKeyDown, onKeyUp } = this.props;
+        const isKeyDown = target.type === 'keydown';
+
+        if (isKeyDown && onKeyDown) {
+            onKeyDown(target)
+        } else if (!isKeyDown && onKeyUp) {
+            onKeyUp(target)
+        }
+    }
+
+    render () {
+        return this.props.children;
+    }
+}

src/components/keyEventListener/listener.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+export default class KeyCombiner extends React.Component<any, any> {
+    constructor (props: any) {
+        super(props);
+        this.state = {
+            currentKeys: {}
+        };
+    }
+
+    componentDidMount () {
+        addEventListener('keydown', this.bindEvent, false)
+        addEventListener('keyup', this.bindEvent, false)
+    }
+
+    componentWillUnmount () {
+        removeEventListener('keydown', this.bindEvent, false)
+        removeEventListener('keyup', this.bindEvent, false)
+        this.setState({ currentKeys: {} })
+    }
+
+    bindEvent = (target: any) => {
+        const { onTrigger, keyMap } = this.props;
+
+        const keyCode = target.keyCode;
+        const isKeyDown = target.type === 'keydown';
+
+        if (!isKeyDown) {
+            this.setState({
+                currentKeys: {}
+            })
+            return;
+        };
+
+        if (keyMap[keyCode] === true) {
+            const currentKeys = Object.assign(this.state.currentKeys, {
+                [keyCode]: isKeyDown
+            });
+
+            this.setState({
+                currentKeys
+            })
+
+            let keyAllRight = true;
+            for (let key in keyMap) {
+                if (!currentKeys[key]) {
+                    keyAllRight = false;
+                    break;
+                }
+            }
+            if (keyAllRight) {
+                onTrigger(target);
+            }
+        }
+    }
+
+    render () {
+        return <span data-testid='test_keyCombiner'>
+            {this.props.children}
+        </span>
+    }
+}