=0||(r[n]=e[n]);return r}(e,["components"]);return Object(a.b)(p,i({},l,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"target-listener"},"Target Listener"),Object(a.b)("p",null,"Listen only for the key-press event for a particular target."),Object(a.b)("p",null,"It is provided by ",Object(a.b)("inlineCode",{parentName:"p"},"getTargetProps")," props getter. If ",Object(a.b)("inlineCode",{parentName:"p"},"getTargetProps")," props getter is not provided, then it will listen for key-press event globally."),Object(a.b)("pre",null,Object(a.b)("code",i({parentName:"pre"},{className:"language-jsx"}),"\n
\n Type QWERTY in the input element below. If the focus is outside the\n target, we won't see any change.\n
\n
\n
\n {displayKeys.map(key => {\n return
{key}
;\n })}\n
\n
\n Press below mentioned keys to see the hook in action\n
\n \n {displayKeys.map(key => {\n return
{key}
;\n })}\n
Shift + A
\n
4 | use-key-capture ⌨️
5 |
6 |
7 |
8 |
9 |
10 | A custom hook to ease the key-press listeners of a target/global.
11 |
12 | > Check the
13 | > [demo](https://use-key-capture.netlify.app/)
14 | > here
15 |
16 | Ctrl + Shift + A or the entered letter is a caps or small varient or a number.
21 |
22 | ## The Solution
23 |
24 | use-key-capture is a custom hook which will lets you not to worry about the key-press event. Just plugin in use-key-capture hook to the **target** you want to listen for key press event or by default it can listen for key-press event **globally**.It gives simple API, which helps you listen for complex key combinations with ease.
25 |
26 | Example: Ctrl + Shift + A - `useKeyCapture` gives
27 |
28 | ```js
29 | {
30 | key: 'A',
31 | isCaps: true,
32 | isWithCtrl: true,
33 | isWithShift: true
34 | }
35 | ```
36 |
37 | ## installation
38 |
39 | **npm**
40 |
41 | ```bash
42 | npm i use-key-capture
43 | ```
44 |
45 | **yarn**
46 |
47 | ```bash
48 | yarn add use-key-capture
49 | ```
50 |
51 | ## Usage
52 |
53 | This same working demo is [here](https://use-key-capture.netlify.com/demo).
54 |
55 | ```jsx
56 | import React from 'react';
57 | import useKey from 'use-key-capture';
58 | import './styles.css';
59 |
60 | const displayKeys = ['Q', 'W', 'E', 'R', 'T', 'Y', 'Backspace'];
61 |
62 | const TargetEventComponent = () => {
63 | /*
64 | keyData - gives the data of pressed key, i.e) isCaps, isNumber, isWithShift.
65 | getTargetProps - a prop getter to be given if a target (input, textarea) have
66 | to be listened for key-press.
67 | */
68 | const { keyData, getTargetProps } = useKey();
69 |
70 | const getIsActive = key => (keyData.key === key ? 'active' : '');
71 |
72 | return (
73 |
74 |
75 | Type QWERTY in the input element below. If the focus is outside the
76 | target, we won't see any change.
77 |
78 |
79 |
80 | {displayKeys.map(key => {
81 | return (
82 |
83 | {key}
84 |
85 | );
86 | })}
87 |
88 |
51 |
53 | )
54 |
55 | class LocationHandler extends React.Component {
56 | render() {
57 | const { location } = this.props
58 |
59 | if (!loader.isPageNotFound(location.pathname)) {
60 | return (
61 |
62 | {locationAndPageResources => (
63 |
64 |
68 |
73 |
82 |
83 |
84 | )}
85 |
86 | )
87 | }
88 |
89 | const dev404PageResources = loader.loadPageSync(`/dev-404-page`)
90 | const real404PageResources = loader.loadPageSync(`/404.html`)
91 | let custom404
92 | if (real404PageResources) {
93 | custom404 = (
94 |
100 |
105 |
112 |
113 | )
114 | }
115 | }
116 |
117 | const Root = () => (
118 |
119 | {locationContext =>
121 | )
122 |
123 | // Let site, plugins wrap the site e.g. for Redux.
124 | const WrappedRoot = apiRunner(
125 | `wrapRootElement`,
126 | { element: {WrappedRoot}
134 |
--------------------------------------------------------------------------------
/.docz/.cache/__tests__/__snapshots__/static-entry.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`develop-static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"
"`;
4 |
5 | exports[`develop-static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"
div3
div2
div1
"`;
6 |
7 | exports[`develop-static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `" div3
div2
div1
"`;
8 |
9 | exports[`static-entry onPreRenderHTML can be used to replace headComponents 1`] = `" div3
div2
div1
"`;
12 |
13 | exports[`static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `" div3
div2
div1
"`;
14 |
--------------------------------------------------------------------------------
/.docz/.cache/commonjs/develop-static-entry.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4 |
5 | exports.__esModule = true;
6 | exports.default = void 0;
7 |
8 | var _react = _interopRequireDefault(require("react"));
9 |
10 | var _server = require("react-dom/server");
11 |
12 | var _lodash = require("lodash");
13 |
14 | var _apiRunnerSsr = _interopRequireDefault(require("./api-runner-ssr"));
15 |
16 | // import testRequireError from "./test-require-error"
17 | // For some extremely mysterious reason, webpack adds the above module *after*
18 | // this module so that when this code runs, testRequireError is undefined.
19 | // So in the meantime, we'll just inline it.
20 | const testRequireError = (moduleName, err) => {
21 | const regex = new RegExp(`Error: Cannot find module\\s.${moduleName}`);
22 | const firstLine = err.toString().split(`\n`)[0];
23 | return regex.test(firstLine);
24 | };
25 |
26 | let Html;
27 |
28 | try {
29 | Html = require(`../src/html`);
30 | } catch (err) {
31 | if (testRequireError(`../src/html`, err)) {
32 | Html = require(`./default-html`);
33 | } else {
34 | console.log(`There was an error requiring "src/html.js"\n\n`, err, `\n\n`);
35 | process.exit();
36 | }
37 | }
38 |
39 | Html = Html && Html.__esModule ? Html.default : Html;
40 |
41 | var _default = (pagePath, callback) => {
42 | let headComponents = [_react.default.createElement("meta", {
43 | key: "environment",
44 | name: "note",
45 | content: "environment=development"
46 | })];
47 | let htmlAttributes = {};
48 | let bodyAttributes = {};
49 | let preBodyComponents = [];
50 | let postBodyComponents = [];
51 | let bodyProps = {};
52 | let htmlStr;
53 |
54 | const setHeadComponents = components => {
55 | headComponents = headComponents.concat(components);
56 | };
57 |
58 | const setHtmlAttributes = attributes => {
59 | htmlAttributes = (0, _lodash.merge)(htmlAttributes, attributes);
60 | };
61 |
62 | const setBodyAttributes = attributes => {
63 | bodyAttributes = (0, _lodash.merge)(bodyAttributes, attributes);
64 | };
65 |
66 | const setPreBodyComponents = components => {
67 | preBodyComponents = preBodyComponents.concat(components);
68 | };
69 |
70 | const setPostBodyComponents = components => {
71 | postBodyComponents = postBodyComponents.concat(components);
72 | };
73 |
74 | const setBodyProps = props => {
75 | bodyProps = (0, _lodash.merge)({}, bodyProps, props);
76 | };
77 |
78 | const getHeadComponents = () => headComponents;
79 |
80 | const replaceHeadComponents = components => {
81 | headComponents = components;
82 | };
83 |
84 | const getPreBodyComponents = () => preBodyComponents;
85 |
86 | const replacePreBodyComponents = components => {
87 | preBodyComponents = components;
88 | };
89 |
90 | const getPostBodyComponents = () => postBodyComponents;
91 |
92 | const replacePostBodyComponents = components => {
93 | postBodyComponents = components;
94 | };
95 |
96 | (0, _apiRunnerSsr.default)(`onRenderBody`, {
97 | setHeadComponents,
98 | setHtmlAttributes,
99 | setBodyAttributes,
100 | setPreBodyComponents,
101 | setPostBodyComponents,
102 | setBodyProps,
103 | pathname: pagePath
104 | });
105 | (0, _apiRunnerSsr.default)(`onPreRenderHTML`, {
106 | getHeadComponents,
107 | replaceHeadComponents,
108 | getPreBodyComponents,
109 | replacePreBodyComponents,
110 | getPostBodyComponents,
111 | replacePostBodyComponents,
112 | pathname: pagePath
113 | });
114 |
115 | const htmlElement = _react.default.createElement(Html, Object.assign({}, bodyProps, {
116 | body: ``,
117 | headComponents: headComponents.concat([_react.default.createElement("script", {
118 | key: `io`,
119 | src: "/socket.io/socket.io.js"
120 | })]),
121 | htmlAttributes,
122 | bodyAttributes,
123 | preBodyComponents,
124 | postBodyComponents: postBodyComponents.concat([_react.default.createElement("script", {
125 | key: `commons`,
126 | src: "/commons.js"
127 | })])
128 | }));
129 |
130 | htmlStr = (0, _server.renderToStaticMarkup)(htmlElement);
131 | htmlStr = `${htmlStr}`;
132 | callback(null, htmlStr);
133 | };
134 |
135 | exports.default = _default;
--------------------------------------------------------------------------------
/.docz/.cache/commonjs/socketIo.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4 |
5 | exports.__esModule = true;
6 | exports.default = socketIo;
7 | exports.getPageData = getPageData;
8 | exports.registerPath = registerPath;
9 | exports.unregisterPath = unregisterPath;
10 | exports.getIsInitialized = exports.getPageQueryData = exports.getStaticQueryData = void 0;
11 |
12 | var _errorOverlayHandler = require("./error-overlay-handler");
13 |
14 | var _normalizePagePath = _interopRequireDefault(require("./normalize-page-path"));
15 |
16 | let socket = null;
17 | let staticQueryData = {};
18 | let pageQueryData = {};
19 | let isInitialized = false;
20 |
21 | const getStaticQueryData = () => staticQueryData;
22 |
23 | exports.getStaticQueryData = getStaticQueryData;
24 |
25 | const getPageQueryData = () => pageQueryData;
26 |
27 | exports.getPageQueryData = getPageQueryData;
28 |
29 | const getIsInitialized = () => isInitialized;
30 |
31 | exports.getIsInitialized = getIsInitialized;
32 |
33 | function socketIo() {
34 | if (process.env.NODE_ENV !== `production`) {
35 | if (!socket) {
36 | // Try to initialize web socket if we didn't do it already
37 | try {
38 | // eslint-disable-next-line no-undef
39 | socket = io();
40 |
41 | const didDataChange = (msg, queryData) => {
42 | const id = msg.type === `staticQueryResult` ? msg.payload.id : (0, _normalizePagePath.default)(msg.payload.id);
43 | return !(id in queryData) || JSON.stringify(msg.payload.result) !== JSON.stringify(queryData[id]);
44 | };
45 |
46 | socket.on(`message`, msg => {
47 | if (msg.type === `staticQueryResult`) {
48 | if (didDataChange(msg, staticQueryData)) {
49 | staticQueryData = Object.assign({}, staticQueryData, {
50 | [msg.payload.id]: msg.payload.result
51 | });
52 | }
53 | } else if (msg.type === `pageQueryResult`) {
54 | if (didDataChange(msg, pageQueryData)) {
55 | pageQueryData = Object.assign({}, pageQueryData, {
56 | [(0, _normalizePagePath.default)(msg.payload.id)]: msg.payload.result
57 | });
58 | }
59 | } else if (msg.type === `overlayError`) {
60 | if (msg.payload.message) {
61 | (0, _errorOverlayHandler.reportError)(msg.payload.id, msg.payload.message);
62 | } else {
63 | (0, _errorOverlayHandler.clearError)(msg.payload.id);
64 | }
65 | }
66 |
67 | if (msg.type && msg.payload) {
68 | ___emitter.emit(msg.type, msg.payload);
69 | }
70 | });
71 | } catch (err) {
72 | console.error(`Could not connect to socket.io on dev server.`);
73 | }
74 | }
75 |
76 | return socket;
77 | } else {
78 | return null;
79 | }
80 | }
81 |
82 | const inFlightGetPageDataPromiseCache = {};
83 |
84 | function getPageData(pathname) {
85 | pathname = (0, _normalizePagePath.default)(pathname);
86 |
87 | if (inFlightGetPageDataPromiseCache[pathname]) {
88 | return inFlightGetPageDataPromiseCache[pathname];
89 | } else {
90 | inFlightGetPageDataPromiseCache[pathname] = new Promise(resolve => {
91 | if (pageQueryData[pathname]) {
92 | delete inFlightGetPageDataPromiseCache[pathname];
93 | resolve(pageQueryData[pathname]);
94 | } else {
95 | const onPageDataCallback = msg => {
96 | if (msg.type === `pageQueryResult` && (0, _normalizePagePath.default)(msg.payload.id) === pathname) {
97 | socket.off(`message`, onPageDataCallback);
98 | delete inFlightGetPageDataPromiseCache[pathname];
99 | resolve(pageQueryData[pathname]);
100 | }
101 | };
102 |
103 | socket.on(`message`, onPageDataCallback);
104 | socket.emit(`getDataForPath`, pathname);
105 | }
106 | });
107 | }
108 |
109 | return inFlightGetPageDataPromiseCache[pathname];
110 | } // Tell websocket-manager.js the new path we're on.
111 | // This will help the backend prioritize queries for this
112 | // path.
113 |
114 |
115 | function registerPath(path) {
116 | socket.emit(`registerPath`, path);
117 | } // Unregister the former path
118 |
119 |
120 | function unregisterPath(path) {
121 | socket.emit(`unregisterPath`, path);
122 | }
--------------------------------------------------------------------------------
/.docz/public/component---docs-pages-demo-mdx-da562a47741883850a15.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///../docs/pages/demo.mdx"],"names":["_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","parentName","isMDXComponent"],"mappings":"whBASO,IAAMA,EAAe,Q,qMAE5B,IAKMC,EAAc,CAClBD,gBAEIE,EAAYC,IACH,SAASC,EAAT,GAGZ,IAFDC,EAEC,EAFDA,WACGC,E,oIACF,mBACD,OAAO,YAACJ,EAAD,KAAeD,EAAiBK,EAAhC,CAAuCD,WAAYA,EAAYE,QAAQ,cAI5E,iBAAQ,CACN,GAAM,mBADR,mBAGA,qFACA,0CAAyB,0BAAYC,WAAW,KAAvB,kBAAzB,qBAAyG,0BAAYA,WAAW,KAAvB,kBAAzG,oFACA,uBAAK,sBAAMA,WAAW,OAAU,CAC5B,UAAa,iBADZ,sCAIL,YAAC,IAAD,CAAsBD,QAAQ,yBAC9B,uBAAK,sBAAMC,WAAW,OAAU,CAC5B,UAAa,iBADZ,szBA+BL,iBAAQ,CACN,GAAM,mBADR,mBAGA,oFACA,YAAC,IAAD,CAAiBD,QAAQ,oBACzB,uBAAK,sBAAMC,WAAW,OAAU,CAC5B,UAAa,iBADZ,y0B,4LAqCTJ,EAAWK,gBAAiB","file":"component---docs-pages-demo-mdx-da562a47741883850a15.js","sourcesContent":["import React from 'react'\n /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\n\nimport DefaultLayout from \"/Users/pranesh.g/Documents/opensource/use-key-capture-2/node_modules/gatsby-theme-docz/src/base/Layout.js\";\nimport { Playground } from 'docz';\nimport GlobalComponent from '../Components/GlobalEventComponent.js';\nimport TargetEventComponent from '../Components/TargetEventComponent.js';\nexport const _frontmatter = {};\n\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return
;\n};\n\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n components,\n ...props\n}) {\n return \n\n\n\n {`Target Listener`} \n {`Listen only for the key-press event for a particular target.`}
\n {`It is provided by `}{`getTargetProps`} {` props getter. If `}{`getTargetProps`} {` props getter is not provided, then it will listen for key-press event globally.`}
\n {`{`import React from 'react';\nimport useKey from 'use-key-capture';\nimport './styles.css';\n\nconst displayKeys = ['Q', 'W', 'E', 'R', 'T', 'Y', 'Backspace'];\n\nconst TargetEventComponent = () => {\n const { keyData, getTargetProps } = useKey();\n\n const getIsActive = key => (keyData.key === key ? 'active' : '');\n\n return (\n \n
\n Type QWERTY in the input element below. If the focus is outside the\n target, we won't see any change.\n
\n
\n
\n {displayKeys.map(key => {\n return
{key}
;\n })}\n
\n
{`Global Listener`} \n {`If no target is specified, it will listen for global event.`}
\n {`import React from 'react';\nimport useKey from 'use-key-capture';\nimport './styles.css';\n\nconst displayKeys = ['Enter', 'Escape', 'Tab', 'ArrowUp'];\n\nconst GlobalComponent = () => {\n const { keyData } = useKey();\n\n const getIsActive = key => (keyData.key === key ? 'active' : '');\n\n const getCombinedActiveClass = () =>\n keyData.key === 'A' && keyData.isWithShift ? 'active' : '';\n\n return (\n <>\n \n Press below mentioned keys to see the hook in action\n
\n \n {displayKeys.map(key => {\n return
{key}
;\n })}\n
Shift + A
\n
;\n}\n;\nMDXContent.isMDXComponent = true;\n "],"sourceRoot":""}
--------------------------------------------------------------------------------
/.docz/.cache/commonjs/query-result-store.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4 |
5 | exports.__esModule = true;
6 | exports.StaticQueryStore = exports.PageQueryStore = void 0;
7 |
8 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9 |
10 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11 |
12 | var _react = _interopRequireDefault(require("react"));
13 |
14 | var _gatsby = require("gatsby");
15 |
16 | var _socketIo = require("./socketIo");
17 |
18 | var _pageRenderer = _interopRequireDefault(require("./page-renderer"));
19 |
20 | var _normalizePagePath = _interopRequireDefault(require("./normalize-page-path"));
21 |
22 | if (process.env.NODE_ENV === `production`) {
23 | throw new Error(`It appears like Gatsby is misconfigured. JSONStore is Gatsby internal ` + `development-only component and should never be used in production.\n\n` + `Unless your site has a complex or custom webpack/Gatsby ` + `configuration this is likely a bug in Gatsby. ` + `Please report this at https://github.com/gatsbyjs/gatsby/issues ` + `with steps to reproduce this error.`);
24 | }
25 |
26 | const getPathFromProps = props => props.pageResources && props.pageResources.page ? (0, _normalizePagePath.default)(props.pageResources.page.path) : undefined;
27 |
28 | class PageQueryStore extends _react.default.Component {
29 | constructor(props) {
30 | super(props);
31 | (0, _defineProperty2.default)(this, "handleMittEvent", () => {
32 | this.setState({
33 | pageQueryData: (0, _socketIo.getPageQueryData)()
34 | });
35 | });
36 | this.state = {
37 | pageQueryData: (0, _socketIo.getPageQueryData)(),
38 | path: null
39 | };
40 | }
41 |
42 | componentDidMount() {
43 | (0, _socketIo.registerPath)(getPathFromProps(this.props));
44 |
45 | ___emitter.on(`*`, this.handleMittEvent);
46 | }
47 |
48 | componentWillUnmount() {
49 | (0, _socketIo.unregisterPath)(this.state.path);
50 |
51 | ___emitter.off(`*`, this.handleMittEvent);
52 | }
53 |
54 | static getDerivedStateFromProps(props, state) {
55 | const newPath = getPathFromProps(props);
56 |
57 | if (newPath !== state.path) {
58 | (0, _socketIo.unregisterPath)(state.path);
59 | (0, _socketIo.registerPath)(newPath);
60 | return {
61 | path: newPath
62 | };
63 | }
64 |
65 | return null;
66 | }
67 |
68 | shouldComponentUpdate(nextProps, nextState) {
69 | // We want to update this component when:
70 | // - location changed
71 | // - page data for path changed
72 | return this.props.location !== nextProps.location || this.state.path !== nextState.path || this.state.pageQueryData[(0, _normalizePagePath.default)(nextState.path)] !== nextState.pageQueryData[(0, _normalizePagePath.default)(nextState.path)];
73 | }
74 |
75 | render() {
76 | const data = this.state.pageQueryData[getPathFromProps(this.props)]; // eslint-disable-next-line
77 |
78 | if (!data) {
79 | return _react.default.createElement("div", null);
80 | }
81 |
82 | return _react.default.createElement(_pageRenderer.default, (0, _extends2.default)({}, this.props, data));
83 | }
84 |
85 | }
86 |
87 | exports.PageQueryStore = PageQueryStore;
88 |
89 | class StaticQueryStore extends _react.default.Component {
90 | constructor(props) {
91 | super(props);
92 | (0, _defineProperty2.default)(this, "handleMittEvent", () => {
93 | this.setState({
94 | staticQueryData: (0, _socketIo.getStaticQueryData)()
95 | });
96 | });
97 | this.state = {
98 | staticQueryData: (0, _socketIo.getStaticQueryData)()
99 | };
100 | }
101 |
102 | componentDidMount() {
103 | ___emitter.on(`*`, this.handleMittEvent);
104 | }
105 |
106 | componentWillUnmount() {
107 | ___emitter.off(`*`, this.handleMittEvent);
108 | }
109 |
110 | shouldComponentUpdate(nextProps, nextState) {
111 | // We want to update this component when:
112 | // - static query results changed
113 | return this.state.staticQueryData !== nextState.staticQueryData;
114 | }
115 |
116 | render() {
117 | return _react.default.createElement(_gatsby.StaticQueryContext.Provider, {
118 | value: this.state.staticQueryData
119 | }, this.props.children);
120 | }
121 |
122 | }
123 |
124 | exports.StaticQueryStore = StaticQueryStore;
--------------------------------------------------------------------------------
/.docz/app/db.json:
--------------------------------------------------------------------------------
1 | {
2 | "config": {
3 | "title": "Use Key Capture",
4 | "description": "My awesome app using docz",
5 | "menu": [],
6 | "version": "1.0.0",
7 | "repository": null,
8 | "native": false,
9 | "themeConfig": {},
10 | "separator": "-",
11 | "ignore": [
12 | "README.md"
13 | ],
14 | "public": "./public",
15 | "htmlContext": {
16 | "favicon": "/public/public/images/favicon.png"
17 | }
18 | },
19 | "entries": [
20 | {
21 | "key": "docs/index.mdx",
22 | "value": {
23 | "name": "Docs",
24 | "route": "/",
25 | "order": 1,
26 | "id": "73498ad0e1e62a714b08085d318f9de1",
27 | "filepath": "docs/index.mdx",
28 | "fullpath": "/Users/pranesh.g/Documents/opensource/use-key-capture-2/docs/index.mdx",
29 | "link": "",
30 | "slug": "docs-index",
31 | "menu": "",
32 | "headings": [
33 | {
34 | "slug": "use-key-capture",
35 | "depth": 1,
36 | "value": "use-key-capture"
37 | },
38 | {
39 | "slug": "installation",
40 | "depth": 2,
41 | "value": "Installation"
42 | },
43 | {
44 | "slug": "how-it-is-used",
45 | "depth": 2,
46 | "value": "How it is used"
47 | },
48 | {
49 | "slug": "properties",
50 | "depth": 2,
51 | "value": "Properties"
52 | },
53 | {
54 | "slug": "target-prop-getter",
55 | "depth": 2,
56 | "value": "Target Prop getter"
57 | }
58 | ]
59 | }
60 | },
61 | {
62 | "key": "docs/pages/demo.mdx",
63 | "value": {
64 | "name": "Demo",
65 | "route": "/demo",
66 | "order": 2,
67 | "id": "87411c77fdcfbb7f6278f322040c1731",
68 | "filepath": "docs/pages/demo.mdx",
69 | "fullpath": "/Users/pranesh.g/Documents/opensource/use-key-capture-2/docs/pages/demo.mdx",
70 | "link": "",
71 | "slug": "docs-pages-demo",
72 | "menu": "",
73 | "headings": [
74 | {
75 | "slug": "target-listener",
76 | "depth": 2,
77 | "value": "Target Listener"
78 | },
79 | {
80 | "slug": "global-listener",
81 | "depth": 2,
82 | "value": "Global Listener"
83 | }
84 | ]
85 | }
86 | },
87 | {
88 | "key": "docs/pages/props.mdx",
89 | "value": {
90 | "name": "Props",
91 | "route": "/props",
92 | "order": 2,
93 | "id": "b5cb4d959720d31e411c9b125e451a6a",
94 | "filepath": "docs/pages/props.mdx",
95 | "fullpath": "/Users/pranesh.g/Documents/opensource/use-key-capture-2/docs/pages/props.mdx",
96 | "link": "",
97 | "slug": "docs-pages-props",
98 | "menu": "",
99 | "headings": [
100 | {
101 | "slug": "props",
102 | "depth": 2,
103 | "value": "Props"
104 | },
105 | {
106 | "slug": "keydata",
107 | "depth": 3,
108 | "value": "keyData"
109 | },
110 | {
111 | "slug": "gettargetprops",
112 | "depth": 3,
113 | "value": "getTargetProps"
114 | },
115 | {
116 | "slug": "resetkeydata",
117 | "depth": 3,
118 | "value": "resetKeyData"
119 | }
120 | ]
121 | }
122 | }
123 | ],
124 | "props": [
125 | {
126 | "key": "docs/Components/GlobalEventComponent.js",
127 | "value": [
128 | {
129 | "description": "",
130 | "displayName": "GlobalComponent",
131 | "methods": [],
132 | "actualName": "GlobalComponent"
133 | }
134 | ]
135 | },
136 | {
137 | "key": "docs/Components/TargetEventComponent.js",
138 | "value": [
139 | {
140 | "description": "",
141 | "displayName": "TargetEventComponent",
142 | "methods": [],
143 | "actualName": "TargetEventComponent"
144 | }
145 | ]
146 | },
147 | {
148 | "key": "src/__tests__/utils/TestComponent.js",
149 | "value": [
150 | {
151 | "description": "",
152 | "displayName": "TestComponent",
153 | "methods": [],
154 | "actualName": "TestComponent"
155 | }
156 | ]
157 | }
158 | ]
159 | }
160 |
--------------------------------------------------------------------------------
/.docz/.cache/commonjs/root.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4 |
5 | exports.__esModule = true;
6 | exports.default = void 0;
7 |
8 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9 |
10 | var _react = _interopRequireDefault(require("react"));
11 |
12 | var _router = require("@reach/router");
13 |
14 | var _gatsbyReactRouterScroll = require("gatsby-react-router-scroll");
15 |
16 | var _navigation = require("./navigation");
17 |
18 | var _apiRunnerBrowser = require("./api-runner-browser");
19 |
20 | var _loader = _interopRequireDefault(require("./loader"));
21 |
22 | var _queryResultStore = require("./query-result-store");
23 |
24 | var _ensureResources = _interopRequireDefault(require("./ensure-resources"));
25 |
26 | var _errorOverlayHandler = require("./error-overlay-handler");
27 |
28 | if (window.__webpack_hot_middleware_reporter__ !== undefined) {
29 | const overlayErrorID = `webpack`; // Report build errors
30 |
31 | window.__webpack_hot_middleware_reporter__.useCustomOverlay({
32 | showProblems(type, obj) {
33 | if (type !== `errors`) {
34 | (0, _errorOverlayHandler.clearError)(overlayErrorID);
35 | return;
36 | }
37 |
38 | (0, _errorOverlayHandler.reportError)(overlayErrorID, obj[0]);
39 | },
40 |
41 | clear() {
42 | (0, _errorOverlayHandler.clearError)(overlayErrorID);
43 | }
44 |
45 | });
46 | }
47 |
48 | (0, _navigation.init)(); // In gatsby v2 if Router is used in page using matchPaths
49 | // paths need to contain full path.
50 | // For example:
51 | // - page have `/app/*` matchPath
52 | // - inside template user needs to use `/app/xyz` as path
53 | // Resetting `basepath`/`baseuri` keeps current behaviour
54 | // to not introduce breaking change.
55 | // Remove this in v3
56 |
57 | const RouteHandler = props => _react.default.createElement(_router.BaseContext.Provider, {
58 | value: {
59 | baseuri: `/`,
60 | basepath: `/`
61 | }
62 | }, _react.default.createElement(_queryResultStore.PageQueryStore, props));
63 |
64 | class LocationHandler extends _react.default.Component {
65 | render() {
66 | const {
67 | location
68 | } = this.props;
69 |
70 | if (!_loader.default.isPageNotFound(location.pathname)) {
71 | return _react.default.createElement(_ensureResources.default, {
72 | location: location
73 | }, locationAndPageResources => _react.default.createElement(_navigation.RouteUpdates, {
74 | location: location
75 | }, _react.default.createElement(_gatsbyReactRouterScroll.ScrollContext, {
76 | location: location,
77 | shouldUpdateScroll: _navigation.shouldUpdateScroll
78 | }, _react.default.createElement(_router.Router, {
79 | basepath: __BASE_PATH__,
80 | location: location,
81 | id: "gatsby-focus-wrapper"
82 | }, _react.default.createElement(RouteHandler, (0, _extends2.default)({
83 | path: encodeURI(locationAndPageResources.pageResources.page.matchPath || locationAndPageResources.pageResources.page.path)
84 | }, this.props, locationAndPageResources))))));
85 | }
86 |
87 | const dev404PageResources = _loader.default.loadPageSync(`/dev-404-page`);
88 |
89 | const real404PageResources = _loader.default.loadPageSync(`/404.html`);
90 |
91 | let custom404;
92 |
93 | if (real404PageResources) {
94 | custom404 = _react.default.createElement(_queryResultStore.PageQueryStore, (0, _extends2.default)({}, this.props, {
95 | pageResources: real404PageResources
96 | }));
97 | }
98 |
99 | return _react.default.createElement(_navigation.RouteUpdates, {
100 | location: location
101 | }, _react.default.createElement(_router.Router, {
102 | basepath: __BASE_PATH__,
103 | location: location,
104 | id: "gatsby-focus-wrapper"
105 | }, _react.default.createElement(RouteHandler, {
106 | path: location.pathname,
107 | location: location,
108 | pageResources: dev404PageResources,
109 | custom404: custom404
110 | })));
111 | }
112 |
113 | }
114 |
115 | const Root = () => _react.default.createElement(_router.Location, null, locationContext => _react.default.createElement(LocationHandler, locationContext)); // Let site, plugins wrap the site e.g. for Redux.
116 |
117 |
118 | const WrappedRoot = (0, _apiRunnerBrowser.apiRunner)(`wrapRootElement`, {
119 | element: _react.default.createElement(Root, null)
120 | }, _react.default.createElement(Root, null), ({
121 | result,
122 | plugin
123 | }) => {
124 | return {
125 | element: result
126 | };
127 | }).pop();
128 |
129 | var _default = () => _react.default.createElement(_queryResultStore.StaticQueryStore, null, WrappedRoot);
130 |
131 | exports.default = _default;
--------------------------------------------------------------------------------
/src/useKeyCapture/useKeyCaptureUtils.js:
--------------------------------------------------------------------------------
1 | import { useCallback } from 'react';
2 |
3 | const initialState = {
4 | // Pressed key
5 | key: null,
6 |
7 | // Command Keys
8 | isEnter: false,
9 |
10 | isBackspace: false,
11 |
12 | isEscape: false,
13 | isCapsLock: false,
14 | isTab: false,
15 | isSpace: false,
16 |
17 | // Function keys
18 | isFunctionKey: false,
19 |
20 | // Arrow keys
21 | isArrow: false,
22 | isArrowRight: false,
23 | isArrowLeft: false,
24 | isArrowUp: false,
25 | isArrowDown: false,
26 |
27 | // Modifier keys
28 | isWithShift: false,
29 | isWithCtrl: false,
30 | isWithMeta: false,
31 | isWithAlt: false,
32 |
33 | // Character varients
34 | isCaps: false,
35 | isSmall: false,
36 | isNumber: false,
37 |
38 | // For special character
39 | isSpecialCharacter: false
40 | };
41 |
42 | const useKeyActionTypes = {
43 | ENTER_KEY: 'ENTER_KEY',
44 | ESCAPE_KEY: 'ESCAPE_KEY',
45 | RESET_CAPTURES: 'RESET_CAPTURES',
46 | CAPS_ALPHABET: 'CAPS',
47 | SMALL_ALPHABET: 'SMALL',
48 | NUMBER: 'NUMBER',
49 | SPACE: 'SPACE',
50 | ARROWS: 'ARROWS',
51 | SPECIAL: 'SPECIAL',
52 | TAB: 'TAB',
53 | CAPSLOCK: 'CAPSLOCK',
54 | SHIFT: 'SHIFT',
55 | BACKSPACE: 'BACKSPACE'
56 | };
57 |
58 | const modifierKeys = {
59 | ctrlKey: 'Ctrl',
60 | shiftKey: 'Shift',
61 | altKey: 'Alt',
62 | metaKey: 'Meta'
63 | };
64 |
65 | const keyCodeMapper = {
66 | Enter: useKeyActionTypes.ENTER_KEY,
67 | Escape: useKeyActionTypes.ESCAPE_KEY,
68 | Tab: useKeyActionTypes.TAB,
69 | CapsLock: useKeyActionTypes.CAPSLOCK,
70 | Shift: useKeyActionTypes.SHIFT,
71 | Backspace: useKeyActionTypes.BACKSPACE,
72 | // eslint-disable-next-line no-useless-computed-key
73 | [' ']: useKeyActionTypes.SPACE
74 | };
75 |
76 | const getArrowKeysPayload = key => {
77 | return {
78 | [`is${key}`]: true
79 | };
80 | };
81 |
82 | const isCapitalLetterPressed = key => /^[A-Z]$/.test(key);
83 | const isSmallLetterPressed = key => /^[a-z]$/.test(key);
84 | const isNumberPressed = key => /^[0-9]/.test(key);
85 | const isSpecialCharacter = key =>
86 | /^[!@#$%^&*()_+<>?:"{}[\]';.,|/\-\\=_+~`]/.test(key);
87 |
88 | const isSpecialCharacterPressed = key => {
89 | return (
90 | !isCapitalLetterPressed(key) &&
91 | !isSmallLetterPressed(key) &&
92 | !isNumberPressed(key) &&
93 | !keyCodeMapper[key] &&
94 | isSpecialCharacter(key)
95 | );
96 | };
97 |
98 | const getModifierPayload = eventDetails => {
99 | let modifierPayloadObj = {};
100 | const modifierObjKeys = Object.keys(modifierKeys);
101 |
102 | for (let key of modifierObjKeys) {
103 | if (eventDetails[key]) {
104 | modifierPayloadObj[`isWith${modifierKeys[key]}`] = true;
105 | }
106 | }
107 |
108 | return modifierPayloadObj;
109 | };
110 |
111 | /**
112 | * Returns the action type for the key pressed
113 | * @param {KeyboardEvent} eventDetails keyboard event object
114 | * @return {String} action type
115 | */
116 | const getAction = eventDetails => {
117 | if (!eventDetails) {
118 | throw new Error('Event called with no details');
119 | }
120 |
121 | const { key } = eventDetails;
122 |
123 | if (key.includes('Arrow')) {
124 | return {
125 | type: useKeyActionTypes.ARROWS,
126 | payload: {
127 | ...getArrowKeysPayload(key),
128 | ...getModifierPayload(eventDetails),
129 | key
130 | }
131 | };
132 | }
133 |
134 | let type;
135 |
136 | if (keyCodeMapper[key]) type = keyCodeMapper[key];
137 |
138 | if (isCapitalLetterPressed(key)) {
139 | type = useKeyActionTypes.CAPS_ALPHABET;
140 | }
141 |
142 | if (isSmallLetterPressed(key)) {
143 | type = useKeyActionTypes.SMALL_ALPHABET;
144 | }
145 |
146 | if (isNumberPressed(key)) {
147 | type = useKeyActionTypes.NUMBER;
148 | }
149 |
150 | if (!type && isSpecialCharacterPressed(key)) {
151 | type = useKeyActionTypes.SPECIAL;
152 | }
153 |
154 | if (!type) {
155 | type = 'SOME_OTHER_KEY';
156 | }
157 |
158 | return {
159 | type,
160 | payload: { ...getModifierPayload(eventDetails), key }
161 | };
162 | };
163 |
164 | const targetItemPropsDefaultValue = {
165 | type: 'text'
166 | };
167 |
168 | function handleRefAssignment(...refs) {
169 | return node => {
170 | refs.forEach(ref => {
171 | if (typeof ref === 'function') {
172 | ref(node);
173 | } else if (ref) {
174 | ref.current = node;
175 | }
176 | });
177 | };
178 | }
179 |
180 | const useEnhancedReducer = reducer =>
181 | useCallback(
182 | (state, action) => {
183 | return reducer(state, action);
184 | },
185 | [reducer]
186 | );
187 |
188 | export {
189 | getAction,
190 | initialState,
191 | targetItemPropsDefaultValue,
192 | useKeyActionTypes,
193 | useEnhancedReducer,
194 | handleRefAssignment
195 | };
196 |
--------------------------------------------------------------------------------
/.docz/public/component---docs-index-mdx-3927419ecd2651d24dd3.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///../docs/index.mdx"],"names":["_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","parentName","isMDXComponent"],"mappings":"kfAMO,IAAMA,EAAe,Q,gMAE5B,IAKMC,EAAc,CAClBD,gBAEIE,EAAYC,IACH,SAASC,EAAT,GAGZ,IAFDC,EAEC,EAFDA,WACGC,E,oIACF,mBACD,OAAO,YAACJ,EAAD,KAAeD,EAAiBK,EAAhC,CAAuCD,WAAYA,EAAYE,QAAQ,cAG5E,iBAAQ,CACN,GAAM,mBADR,mBAGA,8JAA6I,sBAAQC,WAAW,KAAnB,UAA7I,0FAAkR,sBAAQA,WAAW,KAAnB,YAAlR,KACA,iBAAQ,CACN,GAAM,gBADR,gBAGA,qBAAG,sBAAQA,WAAW,KAAnB,QACH,uBAAK,sBAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,4BAIL,qBAAG,sBAAQA,WAAW,KAAnB,SACH,uBAAK,sBAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,+BAIL,iBAAQ,CACN,GAAM,kBADR,kBAGA,uBAAK,sBAAMA,WAAW,OAAU,CAC5B,UAAa,iBADZ,8GAML,iBAAQ,CACN,GAAM,cADR,cAGA,yBACE,qBAAOA,WAAW,SAChB,kBAAIA,WAAW,SACb,oBAAIA,WAAW,MAAS,CACtB,MAAS,OADX,iBAGA,oBAAIA,WAAW,MAAS,CACtB,MAAS,OADX,iBAKJ,qBAAOA,WAAW,SAChB,kBAAIA,WAAW,SACb,oBAAIA,WAAW,MAAS,CACtB,MAAS,OADX,WAGA,oBAAIA,WAAW,MAAS,CACtB,MAAS,OADX,8BAIF,kBAAIA,WAAW,SACb,oBAAIA,WAAW,MAAS,CACtB,MAAS,OADX,gBAGA,oBAAIA,WAAW,MAAS,CACtB,MAAS,OADX,qCAMN,iBAAQ,CACN,GAAM,sBADR,sBAGA,yBACE,qBAAOA,WAAW,SAChB,kBAAIA,WAAW,SACb,oBAAIA,WAAW,MAAS,CACtB,MAAS,OADX,iBAGA,oBAAIA,WAAW,MAAS,CACtB,MAAS,OADX,iBAKJ,qBAAOA,WAAW,SAChB,kBAAIA,WAAW,SACb,oBAAIA,WAAW,MAAS,CACtB,MAAS,OADX,kBAGA,oBAAIA,WAAW,MAAS,CACtB,MAAS,OADX,kD,uLAUVJ,EAAWK,gBAAiB","file":"component---docs-index-mdx-3927419ecd2651d24dd3.js","sourcesContent":["import React from 'react'\n /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\n\nimport DefaultLayout from \"/Users/pranesh.g/Documents/opensource/use-key-capture-2/node_modules/gatsby-theme-docz/src/base/Layout.js\";\nexport const _frontmatter = {};\n\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return
;\n};\n\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n components,\n ...props\n}) {\n return \n\n\n {`use-key-capture`} \n {`use-key-capture is a custom hook which will let us not to worry about the key-press event. Just plugin in use-key-capture hook to the `}{`target`} {` we want to listen for key press event or by default it can listen for key-press event `}{`globally`} {`.`}
\n {`Installation`} \n {`npm`}
\n {`npm i use-key-capture\n`}{`yarn`}
\n {`yarn add use-key-capture\n`}{`How it is used`} \n {`import useKey from 'use-key-capture';\n...\nconst { keyData, resetKeyData, getTargetProps } = useKey();\n`}{`Properties`} \n \n \n \n {`Property name`} \n {`Description`} \n \n \n \n \n {`keyData`} \n {`gives pressed key details`} \n \n \n {`resetKeyData`} \n {`resets the pressed key details`} \n \n \n
\n {`Target Prop getter`} \n \n \n \n {`Property name`} \n {`Description`} \n \n \n \n \n {`getTargetProps`} \n {`gives the required props to target element`} \n \n \n
\n\n ;\n}\n;\nMDXContent.isMDXComponent = true;\n "],"sourceRoot":""}
--------------------------------------------------------------------------------
/.docz/public/component---docs-pages-props-mdx-592d10813f233ead71ef.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{"5cM7":function(t,e,a){"use strict";a.r(e),a.d(e,"_frontmatter",(function(){return l})),a.d(e,"default",(function(){return i}));a("5hJT"),a("W1QL"),a("K/PF"),a("t91x"),a("75LO"),a("PJhk"),a("mXGw");var n=a("/FXl"),r=a("TjRS");a("aD51");function b(){return(b=Object.assign||function(t){for(var e=1;e=0||(r[a]=t[a]);return r}(t,["components"]);return Object(n.b)(o,b({},p,a,{components:e,mdxType:"MDXLayout"}),Object(n.b)("h2",{id:"props"},"Props"),Object(n.b)("h3",{id:"keydata"},"keyData"),Object(n.b)("p",null,"It will be the most used props from ",Object(n.b)("inlineCode",{parentName:"p"},"useKeyCapture"),". It gives the key/key varient/key combinations pressed."),Object(n.b)("table",null,Object(n.b)("thead",{parentName:"table"},Object(n.b)("tr",{parentName:"thead"},Object(n.b)("th",b({parentName:"tr"},{align:null}),"Property"),Object(n.b)("th",b({parentName:"tr"},{align:null}),"Type"))),Object(n.b)("tbody",{parentName:"table"},Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"key"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"String")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isEnter"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isBackspace"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isEscape"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isCapsLock"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isTab"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isSpace"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isArrow"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isArrowRight"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isArrowLeft"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isArrowUp"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isArrowDown"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isWithShift"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isWithCtrl"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isWithMeta"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isWithAlt"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isCaps"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isSmall"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isNumber"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",b({parentName:"tr"},{align:null}),"isSpecialCharacter"),Object(n.b)("td",b({parentName:"tr"},{align:null}),"Boolean")))),Object(n.b)("h3",{id:"gettargetprops"},"getTargetProps"),Object(n.b)("p",null,Object(n.b)("inlineCode",{parentName:"p"},"type: function({})")),Object(n.b)("p",null,"A prop getter to be given if a target (input, textarea) have to be listened for key-press."),Object(n.b)("h3",{id:"resetkeydata"},"resetKeyData"),Object(n.b)("p",null,Object(n.b)("inlineCode",{parentName:"p"},"type: function({})")),Object(n.b)("p",null,"It will reset all the values in ",Object(n.b)("inlineCode",{parentName:"p"},"keyData")," props to the initial values."))}i&&i===Object(i)&&Object.isExtensible(i)&&!i.hasOwnProperty("__filemeta")&&Object.defineProperty(i,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"docs/pages/props.mdx"}}),i.isMDXComponent=!0}}]);
2 | //# sourceMappingURL=component---docs-pages-props-mdx-592d10813f233ead71ef.js.map
--------------------------------------------------------------------------------
/.docz/.cache/production-app.js:
--------------------------------------------------------------------------------
1 | import { apiRunner, apiRunnerAsync } from "./api-runner-browser"
2 | import React from "react"
3 | import ReactDOM from "react-dom"
4 | import { Router, navigate, Location, BaseContext } from "@reach/router"
5 | import { ScrollContext } from "gatsby-react-router-scroll"
6 | import domReady from "@mikaelkristiansson/domready"
7 | import {
8 | shouldUpdateScroll,
9 | init as navigationInit,
10 | RouteUpdates,
11 | } from "./navigation"
12 | import emitter from "./emitter"
13 | import PageRenderer from "./page-renderer"
14 | import asyncRequires from "./async-requires"
15 | import { setLoader, ProdLoader, publicLoader } from "./loader"
16 | import EnsureResources from "./ensure-resources"
17 | import stripPrefix from "./strip-prefix"
18 |
19 | // Generated during bootstrap
20 | import matchPaths from "./match-paths.json"
21 |
22 | const loader = new ProdLoader(asyncRequires, matchPaths)
23 | setLoader(loader)
24 | loader.setApiRunner(apiRunner)
25 |
26 | window.asyncRequires = asyncRequires
27 | window.___emitter = emitter
28 | window.___loader = publicLoader
29 |
30 | navigationInit()
31 |
32 | apiRunnerAsync(`onClientEntry`).then(() => {
33 | // Let plugins register a service worker. The plugin just needs
34 | // to return true.
35 | if (apiRunner(`registerServiceWorker`).length > 0) {
36 | require(`./register-service-worker`)
37 | }
38 |
39 | // In gatsby v2 if Router is used in page using matchPaths
40 | // paths need to contain full path.
41 | // For example:
42 | // - page have `/app/*` matchPath
43 | // - inside template user needs to use `/app/xyz` as path
44 | // Resetting `basepath`/`baseuri` keeps current behaviour
45 | // to not introduce breaking change.
46 | // Remove this in v3
47 | const RouteHandler = props => (
48 |
54 |
56 | )
57 |
58 | class LocationHandler extends React.Component {
59 | render() {
60 | const { location } = this.props
61 | return (
62 |
63 | {({ pageResources, location }) => (
64 |
65 |
69 |
74 |
89 |
90 |
91 | )}
92 |
93 | )
94 | }
95 | }
96 |
97 | const { pagePath, location: browserLoc } = window
98 |
99 | // Explicitly call navigate if the canonical path (window.pagePath)
100 | // is different to the browser path (window.location.pathname). But
101 | // only if NONE of the following conditions hold:
102 | //
103 | // - The url matches a client side route (page.matchPath)
104 | // - it's a 404 page
105 | // - it's the offline plugin shell (/offline-plugin-app-shell-fallback/)
106 | if (
107 | pagePath &&
108 | __BASE_PATH__ + pagePath !== browserLoc.pathname &&
109 | !(
110 | loader.findMatchPath(stripPrefix(browserLoc.pathname, __BASE_PATH__)) ||
111 | pagePath === `/404.html` ||
112 | pagePath.match(/^\/404\/?$/) ||
113 | pagePath.match(/^\/offline-plugin-app-shell-fallback\/?$/)
114 | )
115 | ) {
116 | navigate(__BASE_PATH__ + pagePath + browserLoc.search + browserLoc.hash, {
117 | replace: true,
118 | })
119 | }
120 |
121 | publicLoader.loadPage(browserLoc.pathname).then(page => {
122 | if (!page || page.status === `error`) {
123 | throw new Error(
124 | `page resources for ${browserLoc.pathname} not found. Not rendering React`
125 | )
126 | }
127 |
128 | window.___webpackCompilationHash = page.page.webpackCompilationHash
129 |
130 | const Root = () => (
131 |
132 | {locationContext =>
134 | )
135 |
136 | const WrappedRoot = apiRunner(
137 | `wrapRootElement`,
138 | { element:
206 | )
207 | }
208 | }
209 |
210 | // Fire on(Pre)RouteUpdate APIs
211 | class RouteUpdates extends React.Component {
212 | constructor(props) {
213 | super(props)
214 | onPreRouteUpdate(props.location, null)
215 | }
216 |
217 | componentDidMount() {
218 | onRouteUpdate(this.props.location, null)
219 | }
220 |
221 | componentDidUpdate(prevProps, prevState, shouldFireRouteUpdate) {
222 | if (shouldFireRouteUpdate) {
223 | onRouteUpdate(this.props.location, prevProps.location)
224 | }
225 | }
226 |
227 | getSnapshotBeforeUpdate(prevProps) {
228 | if (this.props.location.pathname !== prevProps.location.pathname) {
229 | onPreRouteUpdate(this.props.location, prevProps.location)
230 | return true
231 | }
232 |
233 | return false
234 | }
235 |
236 | render() {
237 | return (
238 |
239 | {this.props.children}
240 |
242 | )
243 | }
244 | }
245 |
246 | RouteUpdates.propTypes = {
247 | location: PropTypes.object.isRequired,
248 | }
249 |
250 | export { init, shouldUpdateScroll, RouteUpdates }
251 |
--------------------------------------------------------------------------------