Skip to content

Commit 7d8889d

Browse files
shiqiWang0beier
shiqiWang0
and
beier
authored
refactor: keyEventListener component refactor (#326)
* refactor: keyEventListner component refactor * fix: update fullScreen snapshots with keyCombiner * fix: removeListener to support --------- Co-authored-by: beier <[email protected]>
1 parent 6fc5c55 commit 7d8889d

File tree

8 files changed

+193
-143
lines changed

8 files changed

+193
-143
lines changed

‎src/fullscreen/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`test Fullscreen should default render correctly 1`] = `
4-
<span
5-
data-testid="test_keyCombiner"
6-
>
4+
<span>
75
<button
86
class="ant-btn ant-btn-default"
97
type="button"

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`test KeyCombiner suite snapshot match 1`] = `
4-
<span
5-
data-testid="test_keyCombiner"
6-
>
7-
<div>
8-
command+shift+f
9-
</div>
10-
</span>
4+
<DocumentFragment>
5+
<span>
6+
<div>
7+
command+shift+f
8+
</div>
9+
</span>
10+
</DocumentFragment>
11+
`;
12+
13+
exports[`test KeyEventListener suite snapshot match 1`] = `
14+
<DocumentFragment>
15+
任意键盘监听
16+
</DocumentFragment>
1117
`;

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

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import '@testing-library/jest-dom/extend-expect';
55
const { KeyCombiner } = KeyEventListener;
66
describe('test KeyCombiner suite', () => {
77
const text = 'command+shift+f';
8-
let dom: any, element: any;
8+
let dom: any, element: any, asFragment: any;
99
beforeEach(() => {
1010
dom = render(
1111
<KeyCombiner
@@ -21,13 +21,45 @@ describe('test KeyCombiner suite', () => {
2121
<div>{text}</div>
2222
</KeyCombiner>
2323
);
24-
element = dom.getByTestId('test_keyCombiner');
24+
element = dom.container;
25+
asFragment = dom.asFragment;
2526
});
2627
afterEach(() => {
2728
cleanup();
2829
});
2930
test('snapshot match', () => {
30-
expect(element).toMatchSnapshot();
31+
expect(asFragment()).toMatchSnapshot();
32+
});
33+
test('test key code', () => {
34+
fireEvent.keyPress(element, { key: 'Enter', code: 'Enter' });
35+
});
36+
test('should render the correct text', () => {
37+
expect(element).toBeInTheDocument();
38+
expect(element).toHaveTextContent(`${text}`);
39+
});
40+
});
41+
describe('test KeyEventListener suite', () => {
42+
const text = '任意键盘监听';
43+
let dom: any, element: any, asFragment: any;
44+
const callBack = jest.fn();
45+
beforeEach(() => {
46+
dom = render(
47+
<KeyEventListener
48+
onKeyDown={() => {
49+
callBack();
50+
}}
51+
>
52+
{text}
53+
</KeyEventListener>
54+
);
55+
element = dom.container;
56+
asFragment = dom.asFragment;
57+
});
58+
afterEach(() => {
59+
cleanup();
60+
});
61+
test('snapshot match', () => {
62+
expect(asFragment()).toMatchSnapshot();
3163
});
3264
test('test key code', () => {
3365
fireEvent.keyPress(element, { key: 'Enter', code: 'Enter' });

‎src/keyEventListener/demos/basic.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import { KeyEventListener } from 'dt-react-component';
3+
4+
export default () => {
5+
return (
6+
<KeyEventListener
7+
onKeyDown={(evt) => {
8+
console.log('onkeyDown', evt);
9+
}}
10+
>
11+
{<div>尝试按下任意键盘，看看控制台打印结果</div>}
12+
</KeyEventListener>
13+
);
14+
};

‎src/keyEventListener/demos/customKey.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import { KeyEventListener } from 'dt-react-component';
3+
4+
const { KeyCombiner } = KeyEventListener;
5+
6+
export default () => {
7+
return (
8+
<KeyCombiner
9+
onTrigger={(evt) => {
10+
evt.preventDefault();
11+
console.log('command+shift+f action');
12+
}}
13+
keyMap={{
14+
70: true,
15+
91: true,
16+
16: true,
17+
}}
18+
>
19+
<div>尝试按下 command+shift+f 看看控制台是否监听了键盘事件</div>
20+
</KeyCombiner>
21+
);
22+
};

‎src/keyEventListener/index.md‎

Lines changed: 16 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -12,53 +12,25 @@ demo:
1212

1313
监听键盘事件
1414

15-
## 示例
15+
## 代码演示
1616

17-
```jsx
18-
import React from 'react';
19-
import { KeyEventListener } from 'dt-react-component';
17+
<code src="./demos/basic.tsx" title="监听任意按键"></code>
18+
<code src="./demos/customKey.tsx" title="监听指定按键"></code>
2019

21-
const { KeyCombiner } = KeyEventListener;
22-
23-
export default () => {
24-
return (
25-
<KeyCombiner
26-
onTrigger={(evt) => {
27-
evt.preventDefault();
28-
console.log('command+shift+f action');
29-
}}
30-
keyMap={{
31-
70: true,
32-
91: true,
33-
16: true,
34-
}}
35-
>
36-
<div>尝试按下 command+shift+f 看看控制台是否监听了键盘事件</div>
37-
</KeyCombiner>
38-
);
39-
};
40-
```
20+
## API
4121

42-
```jsx
43-
import React from 'react';
44-
import { KeyEventListener } from 'dt-react-component';
22+
### KeyEventListener
4523

46-
export default () => {
47-
return (
48-
<KeyEventListener
49-
onKeyDown={(evt) => {
50-
console.log('onkeyDown');
51-
}}
52-
>
53-
{<div>尝试按下任意键盘，看看控制台打印结果</div>}
54-
</KeyEventListener>
55-
);
56-
};
57-
```
24+
| 参数 | 说明 | 类型 | 默认值 |
25+
| --------- | ------------ | ----------------- | ------ |
26+
| onKeyDown | 键盘按下执行 | `function` | - |
27+
| onKeyUp | 键盘抬起执行 | `function` | - |
28+
| children | 子组件 | `React.ReactNode` | - |
5829

59-
## API
30+
### KeyEventListener.KeyCombiner
6031

61-
| 参数 | 说明 | 类型 | 默认值 |
62-
| --------- | ------------------------------------------------------------------------------------------ | ---------- | ------ |
63-
| keyMap | 监听的一组 key map，eg: { 70: true, 91: true, 16: true } 则表示监听 command+shift+f 组合键 | `object` | - |
64-
| onTrigger | 触发事件 | `function` | - |
32+
| 参数 | 说明 | 类型 | 默认值 |
33+
| --------- | ------------------------------------------------------------------------------------------ | ----------------- | ------ |
34+
| keyMap | 监听的一组 key map，eg: { 70: true, 91: true, 16: true } 则表示监听 command+shift+f 组合键 | `object` | - |
35+
| onTrigger | 触发事件 | `function` | - |
36+
| children | 子组件 | `React.ReactNode` | - |

‎src/keyEventListener/index.tsx‎

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,49 @@
1-
import React from 'react';
1+
import React, { useCallback, useEffect } from 'react';
22
import KeyCombiner from './listener';
33

4-
export interface KeyEventListenerProps {
5-
onKeyDown?: (e: MouseEvent) => void;
6-
onKeyUp?: (e: MouseEvent) => void;
4+
export interface IKeyEventListenerProps {
5+
onKeyDown?: (e: KeyboardEvent) => void;
6+
onKeyUp?: (e: KeyboardEvent) => void;
77
children?: React.ReactNode;
88
}
9+
interface CompoundedComponent extends React.ForwardRefExoticComponent<IKeyEventListenerProps> {
10+
KeyCombiner: typeof KeyCombiner;
11+
}
12+
13+
const InternalKeyEventListener = ({ onKeyDown, onKeyUp, children }: IKeyEventListenerProps) => {
14+
useEffect(() => {
15+
handleAddEventListener();
16+
return () => {
17+
handleRemoveEventListener();
18+
};
19+
}, []);
920

10-
export default class KeyEventListener extends React.Component<KeyEventListenerProps, any> {
11-
static KeyCombiner = KeyCombiner;
12-
componentDidMount() {
13-
addEventListener('keydown', this.bindEvent as any, false);
14-
addEventListener('keyup', this.bindEvent as any, false);
15-
}
16-
17-
componentWillUnmount() {
18-
removeEventListener('keydown', this.bindEvent as any, false);
19-
removeEventListener('keyup', this.bindEvent as any, false);
20-
}
21-
22-
bindEvent = (target: MouseEvent) => {
23-
const { onKeyDown, onKeyUp } = this.props;
24-
const isKeyDown = target.type === 'keydown';
25-
26-
if (isKeyDown && onKeyDown) {
27-
onKeyDown(target);
28-
} else if (!isKeyDown && onKeyUp) {
29-
onKeyUp(target);
30-
}
21+
const handleAddEventListener = () => {
22+
addEventListener('keydown', bindEvent, false);
23+
addEventListener('keyup', bindEvent, false);
24+
};
25+
const handleRemoveEventListener = () => {
26+
removeEventListener('keydown', bindEvent, false);
27+
removeEventListener('keyup', bindEvent, false);
3128
};
3229

33-
render() {
34-
return this.props.children;
35-
}
36-
}
30+
const bindEvent = useCallback(
31+
(target: KeyboardEvent) => {
32+
const isKeyDown = target.type === 'keydown';
33+
if (isKeyDown) {
34+
onKeyDown?.(target);
35+
} else {
36+
onKeyUp?.(target);
37+
}
38+
},
39+
[onKeyDown, onKeyUp]
40+
);
41+
42+
return children;
43+
};
44+
45+
const KeyEventListener = InternalKeyEventListener as CompoundedComponent;
46+
47+
KeyEventListener.KeyCombiner = KeyCombiner;
48+
49+
export default KeyEventListener;

0 commit comments

Comments
 (0)