Fix Auto Hide
This commit is contained in:
parent
dcc1161012
commit
cd1f2048b0
@ -2,7 +2,95 @@ Index: EFB.js
|
||||
===================================================================
|
||||
--- EFB.js
|
||||
+++ EFB.js
|
||||
@@ -30209,9 +30209,9 @@
|
||||
@@ -29548,18 +29548,17 @@
|
||||
"{shift} Z X C V B N M /",
|
||||
"{space} {close}"
|
||||
]
|
||||
};
|
||||
- var Keyboard = (0, import_react4.forwardRef)(({ value, inputRef, onInput, onClose }, ref) => {
|
||||
+ var Keyboard = (0, import_react4.forwardRef)(({ value, blurRef, onInput, onClose }, ref) => {
|
||||
const [shift, setShift] = (0, import_react4.useState)(false);
|
||||
const layout = shift ? defaultLayout.shift : defaultLayout.default;
|
||||
const handleKeyPress = (key) => {
|
||||
- var _a;
|
||||
if (key === "{close}") {
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
- (_a = inputRef.current) == null ? void 0 : _a.focus();
|
||||
+ blurRef.current = true;
|
||||
if (key === "{shift}") {
|
||||
setShift(!shift);
|
||||
return;
|
||||
}
|
||||
@@ -29603,12 +29602,8 @@
|
||||
"button",
|
||||
{
|
||||
className: `flex justify-center rounded-md p-4 ${key === "{close}" ? "bg-zinc-700 px-12 focus:bg-zinc-600" : "flex-1 bg-zinc-600"}`,
|
||||
onMouseDown: () => handleKeyPress(key),
|
||||
- onMouseUp: () => {
|
||||
- var _a;
|
||||
- return (_a = inputRef.current) == null ? void 0 : _a.focus();
|
||||
- },
|
||||
children: keyIdent
|
||||
},
|
||||
`key-${rowIndex}-${keyIndex}`
|
||||
);
|
||||
@@ -29628,9 +29623,9 @@
|
||||
function Input(props) {
|
||||
const [guid] = (0, import_react5.useState)(v4_default());
|
||||
const ref = (0, import_react5.useRef)(null);
|
||||
const keyboardRef = (0, import_react5.useRef)(null);
|
||||
- const blurTimeoutRef = (0, import_react5.useRef)();
|
||||
+ const blurRef = (0, import_react5.useRef)(false);
|
||||
const [isFocused, setFocused] = (0, import_react5.useState)(false);
|
||||
const [showKeyboard, setShowKeyboard] = (0, import_react5.useState)(false);
|
||||
(0, import_react5.useEffect)(() => {
|
||||
if (simulator() === 0 /* MSFS */) {
|
||||
@@ -29660,25 +29655,23 @@
|
||||
placeholder: props.placeholder,
|
||||
disabled: props.disabled,
|
||||
onFocus: () => {
|
||||
var _a;
|
||||
- clearTimeout(blurTimeoutRef.current);
|
||||
if (!isFocused) {
|
||||
setFocused(true);
|
||||
setShowKeyboard(true);
|
||||
(_a = ref.current) == null ? void 0 : _a.select();
|
||||
}
|
||||
},
|
||||
onBlur: (e) => {
|
||||
var _a;
|
||||
- if ((_a = keyboardRef.current) == null ? void 0 : _a.contains(e.relatedTarget)) {
|
||||
- return;
|
||||
- }
|
||||
- blurTimeoutRef.current = setTimeout(() => {
|
||||
- if (props.onBlur) props.onBlur(e.target.value);
|
||||
- if (isFocused) setFocused(false);
|
||||
+ if (blurRef.current && isFocused) (_a = ref.current) == null ? void 0 : _a.focus();
|
||||
+ else {
|
||||
setShowKeyboard(false);
|
||||
- }, 100);
|
||||
+ setFocused(false);
|
||||
+ (_a = ref.current) == null ? void 0 : _a.blur();
|
||||
+ }
|
||||
+ blurRef.current = false;
|
||||
},
|
||||
onChange: (e) => {
|
||||
if (props.onChange) props.onChange(e.target.value);
|
||||
},
|
||||
@@ -29690,9 +29683,9 @@
|
||||
Keyboard_default,
|
||||
{
|
||||
ref: keyboardRef,
|
||||
value: String(props.value),
|
||||
- inputRef: ref,
|
||||
+ blurRef: blurRef,
|
||||
onInput: (value) => props.onChange && props.onChange(value),
|
||||
onClose: () => {
|
||||
var _a;
|
||||
setShowKeyboard(false);
|
||||
@@ -30209,9 +30202,9 @@
|
||||
{
|
||||
className: "middle none center rounded-lg bg-green-700 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none",
|
||||
"data-ripple-light": "true",
|
||||
@ -13,7 +101,7 @@ Index: EFB.js
|
||||
) }) })
|
||||
] }) }) });
|
||||
}
|
||||
@@ -40562,8 +40562,13 @@
|
||||
@@ -40562,8 +40555,13 @@
|
||||
] })
|
||||
] }) }) });
|
||||
}
|
||||
@ -27,7 +115,7 @@ Index: EFB.js
|
||||
init_common();
|
||||
var import_jsx_runtime15 = __toESM(require_jsx_runtime());
|
||||
var routes = {
|
||||
@@ -40578,9 +40583,9 @@
|
||||
@@ -40578,9 +40576,9 @@
|
||||
button: {
|
||||
title: "Payload",
|
||||
icon: Weight
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tfdidesign-md11-load-manager",
|
||||
"version": "0.1.153",
|
||||
"version": "0.1.164",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"type": "module",
|
||||
@ -59,6 +59,7 @@
|
||||
"typescript": "5.8.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.555.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"uuid": "^11.1.0"
|
||||
|
||||
12
PackageSources/js-bundle/pnpm-lock.yaml
generated
12
PackageSources/js-bundle/pnpm-lock.yaml
generated
@ -8,6 +8,9 @@ importers:
|
||||
|
||||
.:
|
||||
dependencies:
|
||||
lucide-react:
|
||||
specifier: ^0.555.0
|
||||
version: 0.555.0(react@19.1.0)
|
||||
react:
|
||||
specifier: ^19.1.0
|
||||
version: 19.1.0
|
||||
@ -1897,6 +1900,11 @@ packages:
|
||||
lru-cache@5.1.1:
|
||||
resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
|
||||
|
||||
lucide-react@0.555.0:
|
||||
resolution: {integrity: sha512-D8FvHUGbxWBRQM90NZeIyhAvkFfsh3u9ekrMvJ30Z6gnpBHS6HC6ldLg7tL45hwiIz/u66eKDtdA23gwwGsAHA==}
|
||||
peerDependencies:
|
||||
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
magic-string@0.30.17:
|
||||
resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
|
||||
|
||||
@ -4842,6 +4850,10 @@ snapshots:
|
||||
dependencies:
|
||||
yallist: 3.1.1
|
||||
|
||||
lucide-react@0.555.0(react@19.1.0):
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
|
||||
magic-string@0.30.17:
|
||||
dependencies:
|
||||
'@jridgewell/sourcemap-codec': 1.5.0
|
||||
|
||||
107
PackageSources/js-bundle/src/components/keyboard/Keyboard.tsx
Normal file
107
PackageSources/js-bundle/src/components/keyboard/Keyboard.tsx
Normal file
@ -0,0 +1,107 @@
|
||||
import { ArrowBigUp, Delete, Space, X } from 'lucide-react';
|
||||
import { forwardRef, RefObject, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
const defaultLayout = {
|
||||
default: [
|
||||
'1 2 3 4 5 6 7 8 9 0 {bksp}',
|
||||
'q w e r t y u i o p',
|
||||
'a s d f g h j k l',
|
||||
'{shift} z x c v b n m /',
|
||||
'{space} {close}',
|
||||
],
|
||||
shift: [
|
||||
'1 2 3 4 5 6 7 8 9 0 {bksp}',
|
||||
'Q W E R T Y U I O P',
|
||||
'A S D F G H J K L',
|
||||
'{shift} Z X C V B N M /',
|
||||
'{space} {close}',
|
||||
],
|
||||
};
|
||||
|
||||
const Keyboard = forwardRef<
|
||||
HTMLDivElement,
|
||||
{
|
||||
value: string;
|
||||
blurRef: RefObject<boolean>
|
||||
onInput: (value: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
>(({ value, blurRef, onInput, onClose }, ref) => {
|
||||
const [shift, setShift] = useState(false);
|
||||
|
||||
const layout = shift ? defaultLayout.shift : defaultLayout.default;
|
||||
|
||||
const handleKeyPress = (key: string) => {
|
||||
console.log('KEY PRESSED', key);
|
||||
|
||||
if (key === '{close}') {
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
|
||||
blurRef.current = true;
|
||||
|
||||
if (key === '{shift}') {
|
||||
setShift(!shift);
|
||||
return;
|
||||
}
|
||||
|
||||
let newValue = value;
|
||||
|
||||
if (key === '{bksp}') {
|
||||
newValue = value.slice(0, -1);
|
||||
} else if (key === '{space}') {
|
||||
newValue = value + ' ';
|
||||
} else if (key.length === 1) {
|
||||
newValue = value + key;
|
||||
}
|
||||
|
||||
onInput(newValue);
|
||||
};
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
ref={ref}
|
||||
className="absolute bottom-0 left-0 z-50 box-border w-full touch-manipulation select-none overflow-hidden bg-zinc-800 p-2 text-white"
|
||||
onClick={() => console.log('Parent click captured')}
|
||||
>
|
||||
{layout.map((row, rowIndex) => (
|
||||
<div key={`row-${rowIndex}`} className="mb-1 flex w-full justify-center gap-1">
|
||||
{row.split(' ').map((key, keyIndex) => {
|
||||
let keyIdent = <>{key}</>;
|
||||
switch (key) {
|
||||
case '{shift}':
|
||||
keyIdent = <ArrowBigUp />;
|
||||
break;
|
||||
case '{bksp}':
|
||||
keyIdent = <Delete />;
|
||||
break;
|
||||
case '{close}':
|
||||
keyIdent = <X />;
|
||||
break;
|
||||
case '{space}':
|
||||
keyIdent = <Space />;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={`key-${rowIndex}-${keyIndex}`}
|
||||
className={`flex justify-center rounded-md p-4 ${
|
||||
key === '{close}' ? 'bg-zinc-700 px-12 focus:bg-zinc-600' : 'flex-1 bg-zinc-600'
|
||||
}`}
|
||||
onMouseDown={() => handleKeyPress(key)}
|
||||
>
|
||||
{keyIdent}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
});
|
||||
|
||||
export default Keyboard;
|
||||
Loading…
x
Reference in New Issue
Block a user