/
index.js
50 lines (42 loc) · 1.02 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/**
* External dependencies
*/
import { map } from 'lodash';
/**
* WordPress dependencies
*/
import { useRef, Children } from '@wordpress/element';
import { useKeyboardShortcut } from '@wordpress/compose';
function KeyboardShortcut( { target, callback, shortcut, bindGlobal, eventName } ) {
useKeyboardShortcut( shortcut, callback, {
bindGlobal,
target,
eventName,
} );
return null;
}
function KeyboardShortcuts( { children, shortcuts, bindGlobal, eventName } ) {
const target = useRef();
const element = map( shortcuts, ( callback, shortcut ) => (
<KeyboardShortcut
key={ shortcut }
shortcut={ shortcut }
callback={ callback }
bindGlobal={ bindGlobal }
eventName={ eventName }
target={ target }
/>
) );
// Render as non-visual if there are no children pressed. Keyboard
// events will be bound to the document instead.
if ( ! Children.count( children ) ) {
return element;
}
return (
<div ref={ target }>
{ element }
{ children }
</div>
);
}
export default KeyboardShortcuts;