diff --git a/README.md b/README.md index 6d35878..ec68799 100644 --- a/README.md +++ b/README.md @@ -137,20 +137,20 @@ function Demo(){ ```jsx import { FingerProxy, FingerProxyContainer } from "react-finger"; +const FingeredDiv = Finger("div"); + function Demo(){ return ( - - { - event.when(['control','shift','a'], ()=>{ - // Something... - }); - event.when(['control','shift','b'], ()=>{ - // Something... - }); - }} - /> - + { + event.when(['control','shift','a'], ()=>{ + // Something... + }); + event.when(['control','shift','b'], ()=>{ + // Something... + }); + }} + /> ); } ``` \ No newline at end of file diff --git a/examples/develop.tsx b/examples/develop.tsx index 3b3fe87..beac183 100644 --- a/examples/develop.tsx +++ b/examples/develop.tsx @@ -20,9 +20,12 @@ const boxStyle: CSSProperties = { const onShortcut = (event: FingerShortcutEvent) => { event.when(["f", "a"], () => { console.log('FingerProxy onShortcut', event); - }); + }); + event.when(["f1", "f2"], () => { + console.log('FingerProxy onShortcut', event.key); + }); }; - + export function App() { return ( diff --git a/package-lock.json b/package-lock.json index 2fcea3f..02ef4a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "mota-gesture", - "version": "2.0.1", + "version": "2.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "mota-gesture", - "version": "2.0.1", + "version": "2.0.2", "license": "MIT", "dependencies": { "ntils": "^5.2.1" diff --git a/package.json b/package.json index 94501be..a0a3704 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-finger", - "version": "2.0.1", + "version": "2.0.2", "description": "React Finger is a library of gesture events for React that allows developers to use a single set of events for both desktop and mobile devices.", "keywords": [ "Gesture", diff --git a/src/core/FingerEventWrapper.ts b/src/core/FingerEventWrapper.ts index cf51a25..8be1b2d 100644 --- a/src/core/FingerEventWrapper.ts +++ b/src/core/FingerEventWrapper.ts @@ -49,6 +49,11 @@ const POINTER_EVENT_KEYS = [ "composedPath", "preventDefault", "eventPhase", + "isDefaultPrevented", + "isPropagationStopped", + "isTrusted", + "defaultPrevented", + "getModifierState", "location", "path", "view", diff --git a/src/core/FingerKeyboardEvents.ts b/src/core/FingerKeyboardEvents.ts index e495cbc..b62a058 100644 --- a/src/core/FingerKeyboardEvents.ts +++ b/src/core/FingerKeyboardEvents.ts @@ -21,6 +21,7 @@ export type FingerShortcutEvent = FingerKeyboardEvent< T, { + keys: string[]; when: (keys: string[], handler: () => void) => void; } >; diff --git a/src/events/FingerShortcutProvider.ts b/src/events/FingerShortcutProvider.ts index 5e4adb0..43cf7db 100644 --- a/src/events/FingerShortcutProvider.ts +++ b/src/events/FingerShortcutProvider.ts @@ -11,6 +11,7 @@ import { import { FingerProvider } from "../core/FingerProviders"; const KEY_SET = Symbol(); +const LAST_ACTION = Symbol(); export const FingerShortcutProvider: FingerProvider = { name: "Shortcut", @@ -18,6 +19,8 @@ export const FingerShortcutProvider: FingerProvider = { handleKeyDown: ({ events, context, event }) => { const { flags } = context; + if (!event.repeat) flags.set(LAST_ACTION, "down"); + if (flags.get(LAST_ACTION) === "up") return; const set = flags.has(KEY_SET) ? (flags.get(KEY_SET) as Set) : new Set(); @@ -28,13 +31,16 @@ export const FingerShortcutProvider: FingerProvider = { handler(); } }; - const shortcutEvent = FingerKeyboardEvent("onShortcut", event, { when }); + const keys = Array.from(set); + const detail = { when, keys }; + const shortcutEvent = FingerKeyboardEvent("onShortcut", event, detail); events.onShortcut?.(shortcutEvent); }, handleKeyUp: ({ context, event }) => { const { flags } = context; if (!flags.has(KEY_SET)) return; + flags.set(LAST_ACTION, "up"); (flags.get(KEY_SET) as Set).delete(event.key.toLowerCase()); }, };