From 941a19c7ea3a4c1e3881b7ed9f43800823f86574 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Sat, 12 Nov 2022 02:24:02 +0000
Subject: [PATCH] fix: phisical keyboard issue
---
CHANGELOG.md | 2 +-
examples/web/react/app.tsx | 16 +++++++---------
.../react/components/keyboard-gb/keyboard-gb.tsx | 3 +++
.../web/react/components/section/section.css | 8 ++++++++
.../web/react/components/section/section.tsx | 5 ++++-
5 files changed, 23 insertions(+), 11 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0fd37ba9..3ac24da5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,7 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
-*
+* Critical error that prevented physical keyboard from working
## [0.4.4] - 2022-11-12
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 8ab6fd4b..41589ab6 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -556,15 +556,13 @@ export const App: FC<AppProps> = ({
</div>
}
>
- {keyboardVisible && (
- <Section separatorBottom={true}>
- <KeyboardGB
- fullscreen={fullscreenState}
- onKeyDown={onKeyDown}
- onKeyUp={onKeyUp}
- />
- </Section>
- )}
+ <Section visible={keyboardVisible} separatorBottom={true}>
+ <KeyboardGB
+ fullscreen={fullscreenState}
+ onKeyDown={onKeyDown}
+ onKeyUp={onKeyUp}
+ />
+ </Section>
<Title
text={emulator.name}
version={emulator.version}
diff --git a/examples/web/react/components/keyboard-gb/keyboard-gb.tsx b/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
index 96ed59c4..c700ba6f 100644
--- a/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
+++ b/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
@@ -26,6 +26,7 @@ declare const require: any;
type KeyboardGBProps = {
focusable?: boolean;
fullscreen?: boolean;
+ physical?: boolean;
selectedKeys?: string[];
style?: string[];
onKeyDown?: (key: string) => void;
@@ -35,6 +36,7 @@ type KeyboardGBProps = {
export const KeyboardGB: FC<KeyboardGBProps> = ({
focusable = true,
fullscreen = false,
+ physical = true,
selectedKeys = [],
style = [],
onKeyDown,
@@ -52,6 +54,7 @@ export const KeyboardGB: FC<KeyboardGBProps> = ({
...style
].join(" ");
useEffect(() => {
+ if (!physical) return;
const _onKeyDown = (event: KeyboardEvent) => {
const keyCode = KEYS[event.key];
const isPrevent = PREVENT_KEYS[event.key] ?? false;
diff --git a/examples/web/react/components/section/section.css b/examples/web/react/components/section/section.css
index c5ce8fe2..afe6f3de 100644
--- a/examples/web/react/components/section/section.css
+++ b/examples/web/react/components/section/section.css
@@ -1,3 +1,11 @@
+.section {
+ display: none;
+}
+
+.section.visible {
+ display: block;
+}
+
.section > .separator {
background: #ffffff;
height: 2px;
diff --git a/examples/web/react/components/section/section.tsx b/examples/web/react/components/section/section.tsx
index b6a0df50..4958a17b 100644
--- a/examples/web/react/components/section/section.tsx
+++ b/examples/web/react/components/section/section.tsx
@@ -4,6 +4,7 @@ import "./section.css";
type SectionProps = {
children: ReactNode;
+ visible?: boolean;
separator?: boolean;
separatorBottom?: boolean;
style?: string[];
@@ -11,11 +12,13 @@ type SectionProps = {
export const Section: FC<SectionProps> = ({
children,
+ visible = true,
separator = true,
separatorBottom = false,
style = []
}) => {
- const classes = () => ["section", ...style].join(" ");
+ const classes = () =>
+ ["section", visible ? "visible" : "", ...style].join(" ");
return (
<div className={classes()}>
{separator && <div className="separator"></div>}
--
GitLab