From 611eaaa05d2dd0e9787f70eed92f48bb0d1e9428 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Tue, 8 Nov 2022 08:40:30 +0000
Subject: [PATCH] feat: new keyboards
---
examples/web/react/components/button/button.tsx | 5 ++---
.../components/keyboard-chip8/keyboard-chip8.tsx | 9 ++++++++-
.../react/components/keyboard-gb/keyboard-gb.tsx | 15 +++++++++++++++
3 files changed, 25 insertions(+), 4 deletions(-)
diff --git a/examples/web/react/components/button/button.tsx b/examples/web/react/components/button/button.tsx
index 21adf106..4778c405 100644
--- a/examples/web/react/components/button/button.tsx
+++ b/examples/web/react/components/button/button.tsx
@@ -44,9 +44,8 @@ export const Button: FC<ButtonProps> = ({
event.target.value = "";
};
const onKeyPress = (event: React.KeyboardEvent) => {
- if (event.key == "Enter") {
- onClick && onClick();
- }
+ if (event.key !== "Enter") return;
+ onClick && onClick();
};
const renderSimple = () => (
<span
diff --git a/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx b/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx
index 897cc353..dd5bafd7 100644
--- a/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx
+++ b/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx
@@ -17,7 +17,14 @@ export const KeyboardChip8: FC<KeyboardChip8Props> = ({
<span
className="key"
key={key}
- onKeyDown={() => onKeyDown && onKeyDown(key)}
+ tabIndex={0}
+ onKeyDown={(event) => {
+ if (event.key !== "Enter") return;
+ onKeyDown && onKeyDown(key);
+ event.stopPropagation();
+ event.preventDefault();
+ }}
+ onClick={() => onKeyDown && onKeyDown(key)}
>
{key}
</span>
diff --git a/examples/web/react/components/keyboard-gb/keyboard-gb.tsx b/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
index f1e4816b..1696c937 100644
--- a/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
+++ b/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
@@ -28,6 +28,21 @@ export const KeyboardGB: FC<KeyboardGBProps> = ({
" "
)}
key={keyName || key}
+ tabIndex={0}
+ onKeyDown={(event) => {
+ if (event.key !== "Enter") return;
+ setPressed(true);
+ onKeyDown && onKeyDown(keyName || key);
+ event.stopPropagation();
+ event.preventDefault();
+ }}
+ onKeyUp={(event) => {
+ if (event.key !== "Enter") return;
+ setPressed(false);
+ onKeyUp && onKeyUp(keyName || key);
+ event.stopPropagation();
+ event.preventDefault();
+ }}
onMouseDown={(event) => {
setPressed(true);
onKeyDown && onKeyDown(keyName || key);
--
GitLab