@wordpress/keyboard-shortcuts 3.0.2 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -1
- package/build/components/shortcut-provider.js +54 -0
- package/build/components/shortcut-provider.js.map +1 -0
- package/build/context.js +15 -0
- package/build/context.js.map +1 -0
- package/build/hooks/use-shortcut.js +33 -15
- package/build/hooks/use-shortcut.js.map +1 -1
- package/build/index.js +8 -0
- package/build/index.js.map +1 -1
- package/build-module/components/shortcut-provider.js +44 -0
- package/build-module/components/shortcut-provider.js.map +1 -0
- package/build-module/context.js +6 -0
- package/build-module/context.js.map +1 -0
- package/build-module/hooks/use-shortcut.js +30 -13
- package/build-module/hooks/use-shortcut.js.map +1 -1
- package/build-module/index.js +1 -0
- package/build-module/index.js.map +1 -1
- package/package.json +6 -6
- package/src/components/shortcut-provider.js +38 -0
- package/src/context.js +6 -0
- package/src/hooks/use-shortcut.js +28 -18
- package/src/index.js +1 -0
package/README.md
CHANGED
@@ -10,12 +10,24 @@ Install the module
|
|
10
10
|
npm install @wordpress/keyboard-shortcuts --save
|
11
11
|
```
|
12
12
|
|
13
|
-
_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for
|
13
|
+
_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
|
14
14
|
|
15
15
|
## API
|
16
16
|
|
17
17
|
<!-- START TOKEN(Autogenerated API docs) -->
|
18
18
|
|
19
|
+
### ShortcutProvider
|
20
|
+
|
21
|
+
Handles callbacks added to context by `useShortcut`.
|
22
|
+
|
23
|
+
_Parameters_
|
24
|
+
|
25
|
+
- _props_ `Object`: Props to pass to `div`.
|
26
|
+
|
27
|
+
_Returns_
|
28
|
+
|
29
|
+
- `import('@wordpress/element').WPElement`: Component.
|
30
|
+
|
19
31
|
### store
|
20
32
|
|
21
33
|
Store definition for the keyboard shortcuts namespace.
|
@@ -37,6 +49,7 @@ _Parameters_
|
|
37
49
|
- _name_ `string`: Shortcut name.
|
38
50
|
- _callback_ `Function`: Shortcut callback.
|
39
51
|
- _options_ `Object`: Shortcut options.
|
52
|
+
- _options.isDisabled_ `boolean`: Whether to disable to shortut.
|
40
53
|
|
41
54
|
<!-- END TOKEN(Autogenerated API docs) -->
|
42
55
|
|
@@ -0,0 +1,54 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.ShortcutProvider = ShortcutProvider;
|
9
|
+
|
10
|
+
var _element = require("@wordpress/element");
|
11
|
+
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
|
+
|
14
|
+
var _context = require("../context");
|
15
|
+
|
16
|
+
/**
|
17
|
+
* WordPress dependencies
|
18
|
+
*/
|
19
|
+
|
20
|
+
/**
|
21
|
+
* Internal dependencies
|
22
|
+
*/
|
23
|
+
const {
|
24
|
+
Provider
|
25
|
+
} = _context.context;
|
26
|
+
/**
|
27
|
+
* Handles callbacks added to context by `useShortcut`.
|
28
|
+
*
|
29
|
+
* @param {Object} props Props to pass to `div`.
|
30
|
+
*
|
31
|
+
* @return {import('@wordpress/element').WPElement} Component.
|
32
|
+
*/
|
33
|
+
|
34
|
+
function ShortcutProvider(props) {
|
35
|
+
const keyboardShortcuts = (0, _element.useRef)(new Set());
|
36
|
+
|
37
|
+
function onKeyDown(event) {
|
38
|
+
if (props.onKeyDown) props.onKeyDown(event);
|
39
|
+
|
40
|
+
for (const keyboardShortcut of keyboardShortcuts.current) {
|
41
|
+
keyboardShortcut(event);
|
42
|
+
}
|
43
|
+
}
|
44
|
+
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
45
|
+
|
46
|
+
|
47
|
+
return (0, _element.createElement)(Provider, {
|
48
|
+
value: keyboardShortcuts
|
49
|
+
}, (0, _element.createElement)("div", (0, _extends2.default)({}, props, {
|
50
|
+
onKeyDown: onKeyDown
|
51
|
+
})));
|
52
|
+
/* eslint-enable jsx-a11y/no-static-element-interactions */
|
53
|
+
}
|
54
|
+
//# sourceMappingURL=shortcut-provider.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/components/shortcut-provider.js"],"names":["Provider","context","ShortcutProvider","props","keyboardShortcuts","Set","onKeyDown","event","keyboardShortcut","current"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAM;AAAEA,EAAAA;AAAF,IAAeC,gBAArB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,gBAAT,CAA2BC,KAA3B,EAAmC;AACzC,QAAMC,iBAAiB,GAAG,qBAAQ,IAAIC,GAAJ,EAAR,CAA1B;;AAEA,WAASC,SAAT,CAAoBC,KAApB,EAA4B;AAC3B,QAAKJ,KAAK,CAACG,SAAX,EAAuBH,KAAK,CAACG,SAAN,CAAiBC,KAAjB;;AAEvB,SAAM,MAAMC,gBAAZ,IAAgCJ,iBAAiB,CAACK,OAAlD,EAA4D;AAC3DD,MAAAA,gBAAgB,CAAED,KAAF,CAAhB;AACA;AACD;AAED;;;AACA,SACC,4BAAC,QAAD;AAAU,IAAA,KAAK,EAAGH;AAAlB,KACC,8DAAUD,KAAV;AAAkB,IAAA,SAAS,EAAGG;AAA9B,KADD,CADD;AAKA;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { context } from '../context';\n\nconst { Provider } = context;\n\n/**\n * Handles callbacks added to context by `useShortcut`.\n *\n * @param {Object} props Props to pass to `div`.\n *\n * @return {import('@wordpress/element').WPElement} Component.\n */\nexport function ShortcutProvider( props ) {\n\tconst keyboardShortcuts = useRef( new Set() );\n\n\tfunction onKeyDown( event ) {\n\t\tif ( props.onKeyDown ) props.onKeyDown( event );\n\n\t\tfor ( const keyboardShortcut of keyboardShortcuts.current ) {\n\t\t\tkeyboardShortcut( event );\n\t\t}\n\t}\n\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<Provider value={ keyboardShortcuts }>\n\t\t\t<div { ...props } onKeyDown={ onKeyDown } />\n\t\t</Provider>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n"]}
|
package/build/context.js
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.context = void 0;
|
7
|
+
|
8
|
+
var _element = require("@wordpress/element");
|
9
|
+
|
10
|
+
/**
|
11
|
+
* WordPress dependencies
|
12
|
+
*/
|
13
|
+
const context = (0, _element.createContext)();
|
14
|
+
exports.context = context;
|
15
|
+
//# sourceMappingURL=context.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/context.js"],"names":["context"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,OAAO,GAAG,6BAAhB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nexport const context = createContext();\n"]}
|
@@ -1,15 +1,17 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
4
6
|
value: true
|
5
7
|
});
|
6
|
-
exports.default =
|
8
|
+
exports.default = useShortcut;
|
7
9
|
|
8
|
-
var
|
10
|
+
var _element = require("@wordpress/element");
|
9
11
|
|
10
|
-
var
|
12
|
+
var _useShortcutEventMatch = _interopRequireDefault(require("./use-shortcut-event-match"));
|
11
13
|
|
12
|
-
var
|
14
|
+
var _context = require("../context");
|
13
15
|
|
14
16
|
/**
|
15
17
|
* WordPress dependencies
|
@@ -22,17 +24,33 @@ var _store = require("../store");
|
|
22
24
|
/**
|
23
25
|
* Attach a keyboard shortcut handler.
|
24
26
|
*
|
25
|
-
* @param {string} name
|
26
|
-
* @param {Function} callback
|
27
|
-
* @param {Object} options
|
27
|
+
* @param {string} name Shortcut name.
|
28
|
+
* @param {Function} callback Shortcut callback.
|
29
|
+
* @param {Object} options Shortcut options.
|
30
|
+
* @param {boolean} options.isDisabled Whether to disable to shortut.
|
28
31
|
*/
|
29
|
-
function useShortcut(name, callback,
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
(0,
|
32
|
+
function useShortcut(name, callback, {
|
33
|
+
isDisabled
|
34
|
+
} = {}) {
|
35
|
+
const shortcuts = (0, _element.useContext)(_context.context);
|
36
|
+
const isMatch = (0, _useShortcutEventMatch.default)();
|
37
|
+
const callbackRef = (0, _element.useRef)();
|
38
|
+
callbackRef.current = callback;
|
39
|
+
(0, _element.useEffect)(() => {
|
40
|
+
if (isDisabled) {
|
41
|
+
return;
|
42
|
+
}
|
43
|
+
|
44
|
+
function _callback(event) {
|
45
|
+
if (isMatch(name, event)) {
|
46
|
+
callbackRef.current(event);
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
shortcuts.current.add(_callback);
|
51
|
+
return () => {
|
52
|
+
shortcuts.current.delete(_callback);
|
53
|
+
};
|
54
|
+
}, [name, isDisabled]);
|
34
55
|
}
|
35
|
-
|
36
|
-
var _default = useShortcut;
|
37
|
-
exports.default = _default;
|
38
56
|
//# sourceMappingURL=use-shortcut.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/hooks/use-shortcut.js"],"names":["useShortcut","name","callback","
|
1
|
+
{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/hooks/use-shortcut.js"],"names":["useShortcut","name","callback","isDisabled","shortcuts","context","isMatch","callbackRef","current","_callback","event","add","delete"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,WAAT,CAAsBC,IAAtB,EAA4BC,QAA5B,EAAsC;AAAEC,EAAAA;AAAF,IAAiB,EAAvD,EAA4D;AAC1E,QAAMC,SAAS,GAAG,yBAAYC,gBAAZ,CAAlB;AACA,QAAMC,OAAO,GAAG,qCAAhB;AACA,QAAMC,WAAW,GAAG,sBAApB;AACAA,EAAAA,WAAW,CAACC,OAAZ,GAAsBN,QAAtB;AAEA,0BAAW,MAAM;AAChB,QAAKC,UAAL,EAAkB;AACjB;AACA;;AAED,aAASM,SAAT,CAAoBC,KAApB,EAA4B;AAC3B,UAAKJ,OAAO,CAAEL,IAAF,EAAQS,KAAR,CAAZ,EAA8B;AAC7BH,QAAAA,WAAW,CAACC,OAAZ,CAAqBE,KAArB;AACA;AACD;;AAEDN,IAAAA,SAAS,CAACI,OAAV,CAAkBG,GAAlB,CAAuBF,SAAvB;AACA,WAAO,MAAM;AACZL,MAAAA,SAAS,CAACI,OAAV,CAAkBI,MAAlB,CAA0BH,SAA1B;AACA,KAFD;AAGA,GAfD,EAeG,CAAER,IAAF,EAAQE,UAAR,CAfH;AAgBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useShortcutEventMatch from './use-shortcut-event-match';\nimport { context } from '../context';\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @param {string} name Shortcut name.\n * @param {Function} callback Shortcut callback.\n * @param {Object} options Shortcut options.\n * @param {boolean} options.isDisabled Whether to disable to shortut.\n */\nexport default function useShortcut( name, callback, { isDisabled } = {} ) {\n\tconst shortcuts = useContext( context );\n\tconst isMatch = useShortcutEventMatch();\n\tconst callbackRef = useRef();\n\tcallbackRef.current = callback;\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction _callback( event ) {\n\t\t\tif ( isMatch( name, event ) ) {\n\t\t\t\tcallbackRef.current( event );\n\t\t\t}\n\t\t}\n\n\t\tshortcuts.current.add( _callback );\n\t\treturn () => {\n\t\t\tshortcuts.current.delete( _callback );\n\t\t};\n\t}, [ name, isDisabled ] );\n}\n"]}
|
package/build/index.js
CHANGED
@@ -17,6 +17,12 @@ Object.defineProperty(exports, "useShortcut", {
|
|
17
17
|
return _useShortcut.default;
|
18
18
|
}
|
19
19
|
});
|
20
|
+
Object.defineProperty(exports, "ShortcutProvider", {
|
21
|
+
enumerable: true,
|
22
|
+
get: function () {
|
23
|
+
return _shortcutProvider.ShortcutProvider;
|
24
|
+
}
|
25
|
+
});
|
20
26
|
Object.defineProperty(exports, "__unstableUseShortcutEventMatch", {
|
21
27
|
enumerable: true,
|
22
28
|
get: function () {
|
@@ -28,5 +34,7 @@ var _store = require("./store");
|
|
28
34
|
|
29
35
|
var _useShortcut = _interopRequireDefault(require("./hooks/use-shortcut"));
|
30
36
|
|
37
|
+
var _shortcutProvider = require("./components/shortcut-provider");
|
38
|
+
|
31
39
|
var _useShortcutEventMatch = _interopRequireDefault(require("./hooks/use-shortcut-event-match"));
|
32
40
|
//# sourceMappingURL=index.js.map
|
package/build/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/index.js"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["export { store } from './store';\nexport { default as useShortcut } from './hooks/use-shortcut';\nexport { ShortcutProvider } from './components/shortcut-provider';\nexport { default as __unstableUseShortcutEventMatch } from './hooks/use-shortcut-event-match';\n"]}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
2
|
+
import { createElement } from "@wordpress/element";
|
3
|
+
|
4
|
+
/**
|
5
|
+
* WordPress dependencies
|
6
|
+
*/
|
7
|
+
import { useRef } from '@wordpress/element';
|
8
|
+
/**
|
9
|
+
* Internal dependencies
|
10
|
+
*/
|
11
|
+
|
12
|
+
import { context } from '../context';
|
13
|
+
const {
|
14
|
+
Provider
|
15
|
+
} = context;
|
16
|
+
/**
|
17
|
+
* Handles callbacks added to context by `useShortcut`.
|
18
|
+
*
|
19
|
+
* @param {Object} props Props to pass to `div`.
|
20
|
+
*
|
21
|
+
* @return {import('@wordpress/element').WPElement} Component.
|
22
|
+
*/
|
23
|
+
|
24
|
+
export function ShortcutProvider(props) {
|
25
|
+
const keyboardShortcuts = useRef(new Set());
|
26
|
+
|
27
|
+
function onKeyDown(event) {
|
28
|
+
if (props.onKeyDown) props.onKeyDown(event);
|
29
|
+
|
30
|
+
for (const keyboardShortcut of keyboardShortcuts.current) {
|
31
|
+
keyboardShortcut(event);
|
32
|
+
}
|
33
|
+
}
|
34
|
+
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
35
|
+
|
36
|
+
|
37
|
+
return createElement(Provider, {
|
38
|
+
value: keyboardShortcuts
|
39
|
+
}, createElement("div", _extends({}, props, {
|
40
|
+
onKeyDown: onKeyDown
|
41
|
+
})));
|
42
|
+
/* eslint-enable jsx-a11y/no-static-element-interactions */
|
43
|
+
}
|
44
|
+
//# sourceMappingURL=shortcut-provider.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/components/shortcut-provider.js"],"names":["useRef","context","Provider","ShortcutProvider","props","keyboardShortcuts","Set","onKeyDown","event","keyboardShortcut","current"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,oBAAvB;AAEA;AACA;AACA;;AACA,SAASC,OAAT,QAAwB,YAAxB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAeD,OAArB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASE,gBAAT,CAA2BC,KAA3B,EAAmC;AACzC,QAAMC,iBAAiB,GAAGL,MAAM,CAAE,IAAIM,GAAJ,EAAF,CAAhC;;AAEA,WAASC,SAAT,CAAoBC,KAApB,EAA4B;AAC3B,QAAKJ,KAAK,CAACG,SAAX,EAAuBH,KAAK,CAACG,SAAN,CAAiBC,KAAjB;;AAEvB,SAAM,MAAMC,gBAAZ,IAAgCJ,iBAAiB,CAACK,OAAlD,EAA4D;AAC3DD,MAAAA,gBAAgB,CAAED,KAAF,CAAhB;AACA;AACD;AAED;;;AACA,SACC,cAAC,QAAD;AAAU,IAAA,KAAK,EAAGH;AAAlB,KACC,kCAAUD,KAAV;AAAkB,IAAA,SAAS,EAAGG;AAA9B,KADD,CADD;AAKA;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { context } from '../context';\n\nconst { Provider } = context;\n\n/**\n * Handles callbacks added to context by `useShortcut`.\n *\n * @param {Object} props Props to pass to `div`.\n *\n * @return {import('@wordpress/element').WPElement} Component.\n */\nexport function ShortcutProvider( props ) {\n\tconst keyboardShortcuts = useRef( new Set() );\n\n\tfunction onKeyDown( event ) {\n\t\tif ( props.onKeyDown ) props.onKeyDown( event );\n\n\t\tfor ( const keyboardShortcut of keyboardShortcuts.current ) {\n\t\t\tkeyboardShortcut( event );\n\t\t}\n\t}\n\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<Provider value={ keyboardShortcuts }>\n\t\t\t<div { ...props } onKeyDown={ onKeyDown } />\n\t\t</Provider>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/context.js"],"names":["createContext","context"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,oBAA9B;AAEA,OAAO,MAAMC,OAAO,GAAGD,aAAa,EAA7B","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nexport const context = createContext();\n"]}
|
@@ -1,27 +1,44 @@
|
|
1
1
|
/**
|
2
2
|
* WordPress dependencies
|
3
3
|
*/
|
4
|
-
import {
|
5
|
-
import { useKeyboardShortcut } from '@wordpress/compose';
|
4
|
+
import { useContext, useEffect, useRef } from '@wordpress/element';
|
6
5
|
/**
|
7
6
|
* Internal dependencies
|
8
7
|
*/
|
9
8
|
|
10
|
-
import
|
9
|
+
import useShortcutEventMatch from './use-shortcut-event-match';
|
10
|
+
import { context } from '../context';
|
11
11
|
/**
|
12
12
|
* Attach a keyboard shortcut handler.
|
13
13
|
*
|
14
|
-
* @param {string} name
|
15
|
-
* @param {Function} callback
|
16
|
-
* @param {Object} options
|
14
|
+
* @param {string} name Shortcut name.
|
15
|
+
* @param {Function} callback Shortcut callback.
|
16
|
+
* @param {Object} options Shortcut options.
|
17
|
+
* @param {boolean} options.isDisabled Whether to disable to shortut.
|
17
18
|
*/
|
18
19
|
|
19
|
-
function useShortcut(name, callback,
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
20
|
+
export default function useShortcut(name, callback, {
|
21
|
+
isDisabled
|
22
|
+
} = {}) {
|
23
|
+
const shortcuts = useContext(context);
|
24
|
+
const isMatch = useShortcutEventMatch();
|
25
|
+
const callbackRef = useRef();
|
26
|
+
callbackRef.current = callback;
|
27
|
+
useEffect(() => {
|
28
|
+
if (isDisabled) {
|
29
|
+
return;
|
30
|
+
}
|
31
|
+
|
32
|
+
function _callback(event) {
|
33
|
+
if (isMatch(name, event)) {
|
34
|
+
callbackRef.current(event);
|
35
|
+
}
|
36
|
+
}
|
25
37
|
|
26
|
-
|
38
|
+
shortcuts.current.add(_callback);
|
39
|
+
return () => {
|
40
|
+
shortcuts.current.delete(_callback);
|
41
|
+
};
|
42
|
+
}, [name, isDisabled]);
|
43
|
+
}
|
27
44
|
//# sourceMappingURL=use-shortcut.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/hooks/use-shortcut.js"],"names":["
|
1
|
+
{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/hooks/use-shortcut.js"],"names":["useContext","useEffect","useRef","useShortcutEventMatch","context","useShortcut","name","callback","isDisabled","shortcuts","isMatch","callbackRef","current","_callback","event","add","delete"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,SAArB,EAAgCC,MAAhC,QAA8C,oBAA9C;AAEA;AACA;AACA;;AACA,OAAOC,qBAAP,MAAkC,4BAAlC;AACA,SAASC,OAAT,QAAwB,YAAxB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,WAAT,CAAsBC,IAAtB,EAA4BC,QAA5B,EAAsC;AAAEC,EAAAA;AAAF,IAAiB,EAAvD,EAA4D;AAC1E,QAAMC,SAAS,GAAGT,UAAU,CAAEI,OAAF,CAA5B;AACA,QAAMM,OAAO,GAAGP,qBAAqB,EAArC;AACA,QAAMQ,WAAW,GAAGT,MAAM,EAA1B;AACAS,EAAAA,WAAW,CAACC,OAAZ,GAAsBL,QAAtB;AAEAN,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKO,UAAL,EAAkB;AACjB;AACA;;AAED,aAASK,SAAT,CAAoBC,KAApB,EAA4B;AAC3B,UAAKJ,OAAO,CAAEJ,IAAF,EAAQQ,KAAR,CAAZ,EAA8B;AAC7BH,QAAAA,WAAW,CAACC,OAAZ,CAAqBE,KAArB;AACA;AACD;;AAEDL,IAAAA,SAAS,CAACG,OAAV,CAAkBG,GAAlB,CAAuBF,SAAvB;AACA,WAAO,MAAM;AACZJ,MAAAA,SAAS,CAACG,OAAV,CAAkBI,MAAlB,CAA0BH,SAA1B;AACA,KAFD;AAGA,GAfQ,EAeN,CAAEP,IAAF,EAAQE,UAAR,CAfM,CAAT;AAgBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useShortcutEventMatch from './use-shortcut-event-match';\nimport { context } from '../context';\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @param {string} name Shortcut name.\n * @param {Function} callback Shortcut callback.\n * @param {Object} options Shortcut options.\n * @param {boolean} options.isDisabled Whether to disable to shortut.\n */\nexport default function useShortcut( name, callback, { isDisabled } = {} ) {\n\tconst shortcuts = useContext( context );\n\tconst isMatch = useShortcutEventMatch();\n\tconst callbackRef = useRef();\n\tcallbackRef.current = callback;\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction _callback( event ) {\n\t\t\tif ( isMatch( name, event ) ) {\n\t\t\t\tcallbackRef.current( event );\n\t\t\t}\n\t\t}\n\n\t\tshortcuts.current.add( _callback );\n\t\treturn () => {\n\t\t\tshortcuts.current.delete( _callback );\n\t\t};\n\t}, [ name, isDisabled ] );\n}\n"]}
|
package/build-module/index.js
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
export { store } from './store';
|
2
2
|
export { default as useShortcut } from './hooks/use-shortcut';
|
3
|
+
export { ShortcutProvider } from './components/shortcut-provider';
|
3
4
|
export { default as __unstableUseShortcutEventMatch } from './hooks/use-shortcut-event-match';
|
4
5
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/index.js"],"names":["store","default","useShortcut","__unstableUseShortcutEventMatch"],"mappings":"AAAA,SAASA,KAAT,QAAsB,SAAtB;AACA,SAASC,OAAO,IAAIC,WAApB,QAAuC,sBAAvC;AACA,
|
1
|
+
{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/index.js"],"names":["store","default","useShortcut","ShortcutProvider","__unstableUseShortcutEventMatch"],"mappings":"AAAA,SAASA,KAAT,QAAsB,SAAtB;AACA,SAASC,OAAO,IAAIC,WAApB,QAAuC,sBAAvC;AACA,SAASC,gBAAT,QAAiC,gCAAjC;AACA,SAASF,OAAO,IAAIG,+BAApB,QAA2D,kCAA3D","sourcesContent":["export { store } from './store';\nexport { default as useShortcut } from './hooks/use-shortcut';\nexport { ShortcutProvider } from './components/shortcut-provider';\nexport { default as __unstableUseShortcutEventMatch } from './hooks/use-shortcut-event-match';\n"]}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@wordpress/keyboard-shortcuts",
|
3
|
-
"version": "3.0.
|
3
|
+
"version": "3.0.3",
|
4
4
|
"description": "Handling keyboard shortcuts.",
|
5
5
|
"author": "The WordPress Contributors",
|
6
6
|
"license": "GPL-2.0-or-later",
|
@@ -26,15 +26,15 @@
|
|
26
26
|
"react-native": "src/index",
|
27
27
|
"dependencies": {
|
28
28
|
"@babel/runtime": "^7.13.10",
|
29
|
-
"@wordpress/compose": "^5.0.
|
30
|
-
"@wordpress/data": "^6.1.
|
31
|
-
"@wordpress/element": "^4.0.
|
32
|
-
"@wordpress/keycodes": "^3.2.
|
29
|
+
"@wordpress/compose": "^5.0.3",
|
30
|
+
"@wordpress/data": "^6.1.1",
|
31
|
+
"@wordpress/element": "^4.0.2",
|
32
|
+
"@wordpress/keycodes": "^3.2.3",
|
33
33
|
"lodash": "^4.17.21",
|
34
34
|
"rememo": "^3.0.0"
|
35
35
|
},
|
36
36
|
"publishConfig": {
|
37
37
|
"access": "public"
|
38
38
|
},
|
39
|
-
"gitHead": "
|
39
|
+
"gitHead": "8f7f052bc04e3f4eb50f479ced14be1489b9fa79"
|
40
40
|
}
|
@@ -0,0 +1,38 @@
|
|
1
|
+
/**
|
2
|
+
* WordPress dependencies
|
3
|
+
*/
|
4
|
+
import { useRef } from '@wordpress/element';
|
5
|
+
|
6
|
+
/**
|
7
|
+
* Internal dependencies
|
8
|
+
*/
|
9
|
+
import { context } from '../context';
|
10
|
+
|
11
|
+
const { Provider } = context;
|
12
|
+
|
13
|
+
/**
|
14
|
+
* Handles callbacks added to context by `useShortcut`.
|
15
|
+
*
|
16
|
+
* @param {Object} props Props to pass to `div`.
|
17
|
+
*
|
18
|
+
* @return {import('@wordpress/element').WPElement} Component.
|
19
|
+
*/
|
20
|
+
export function ShortcutProvider( props ) {
|
21
|
+
const keyboardShortcuts = useRef( new Set() );
|
22
|
+
|
23
|
+
function onKeyDown( event ) {
|
24
|
+
if ( props.onKeyDown ) props.onKeyDown( event );
|
25
|
+
|
26
|
+
for ( const keyboardShortcut of keyboardShortcuts.current ) {
|
27
|
+
keyboardShortcut( event );
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
32
|
+
return (
|
33
|
+
<Provider value={ keyboardShortcuts }>
|
34
|
+
<div { ...props } onKeyDown={ onKeyDown } />
|
35
|
+
</Provider>
|
36
|
+
);
|
37
|
+
/* eslint-enable jsx-a11y/no-static-element-interactions */
|
38
|
+
}
|
package/src/context.js
ADDED
@@ -1,32 +1,42 @@
|
|
1
1
|
/**
|
2
2
|
* WordPress dependencies
|
3
3
|
*/
|
4
|
-
import {
|
5
|
-
import { useKeyboardShortcut } from '@wordpress/compose';
|
4
|
+
import { useContext, useEffect, useRef } from '@wordpress/element';
|
6
5
|
|
7
6
|
/**
|
8
7
|
* Internal dependencies
|
9
8
|
*/
|
10
|
-
import
|
9
|
+
import useShortcutEventMatch from './use-shortcut-event-match';
|
10
|
+
import { context } from '../context';
|
11
11
|
|
12
12
|
/**
|
13
13
|
* Attach a keyboard shortcut handler.
|
14
14
|
*
|
15
|
-
* @param {string} name
|
16
|
-
* @param {Function} callback
|
17
|
-
* @param {Object} options
|
15
|
+
* @param {string} name Shortcut name.
|
16
|
+
* @param {Function} callback Shortcut callback.
|
17
|
+
* @param {Object} options Shortcut options.
|
18
|
+
* @param {boolean} options.isDisabled Whether to disable to shortut.
|
18
19
|
*/
|
19
|
-
function useShortcut( name, callback,
|
20
|
-
const shortcuts =
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
).getAllShortcutRawKeyCombinations( name );
|
25
|
-
},
|
26
|
-
[ name ]
|
27
|
-
);
|
20
|
+
export default function useShortcut( name, callback, { isDisabled } = {} ) {
|
21
|
+
const shortcuts = useContext( context );
|
22
|
+
const isMatch = useShortcutEventMatch();
|
23
|
+
const callbackRef = useRef();
|
24
|
+
callbackRef.current = callback;
|
28
25
|
|
29
|
-
|
30
|
-
|
26
|
+
useEffect( () => {
|
27
|
+
if ( isDisabled ) {
|
28
|
+
return;
|
29
|
+
}
|
30
|
+
|
31
|
+
function _callback( event ) {
|
32
|
+
if ( isMatch( name, event ) ) {
|
33
|
+
callbackRef.current( event );
|
34
|
+
}
|
35
|
+
}
|
31
36
|
|
32
|
-
|
37
|
+
shortcuts.current.add( _callback );
|
38
|
+
return () => {
|
39
|
+
shortcuts.current.delete( _callback );
|
40
|
+
};
|
41
|
+
}, [ name, isDisabled ] );
|
42
|
+
}
|
package/src/index.js
CHANGED