diff --git a/CHANGELOG.md b/CHANGELOG.md index 0fd37ba9369e9a1610dd69695beab75c565ccb6d..3ac24da5b592fcda7cd63816b58e1de51636e1b6 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 8ab6fd4b59128b01e3a5a33e62be28ad00bcf4dc..41589ab619947ca7ade90cf81efe9e020fc04a5c 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 96ed59c40db5a05919f1a5b103f4fc5a6b39adcb..c700ba6f2291c3a8f20bbd0b2430c13551d7e8d8 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 c5ce8fe250b7b3ba2bc339ae4b90f812200bbb0f..afe6f3de4ac1884d48a28e30aa8939f342f557a2 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 b6a0df50e36c9890bc33e642f6bcd2923adf9fab..4958a17bc32c5741e58e99d8b68f8591e32d1ba5 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>}