Fix fit addon not resizing with "more" on keyboard

This commit is contained in:
LukeGus
2025-09-06 17:03:50 -05:00
parent a39539b89c
commit b04f6b3b60
2 changed files with 15 additions and 3 deletions

View File

@@ -1,17 +1,25 @@
import React, {useState, useCallback} from "react"; import React, {useState, useCallback, useEffect} from "react";
import Keyboard from "react-simple-keyboard"; import Keyboard from "react-simple-keyboard";
import "react-simple-keyboard/build/css/index.css"; import "react-simple-keyboard/build/css/index.css";
import "./kb-dark-theme.css"; import "./kb-dark-theme.css";
interface TerminalKeyboardProps { interface TerminalKeyboardProps {
onSendInput: (input: string) => void; onSendInput: (input: string) => void;
onLayoutChange: () => void;
} }
export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) { export function TerminalKeyboard({onSendInput, onLayoutChange}: TerminalKeyboardProps) {
const [layoutName, setLayoutName] = useState("default"); const [layoutName, setLayoutName] = useState("default");
const [isCtrl, setIsCtrl] = useState(false); const [isCtrl, setIsCtrl] = useState(false);
const [isAlt, setIsAlt] = useState(false); const [isAlt, setIsAlt] = useState(false);
useEffect(() => {
if (onLayoutChange) {
const timeoutId = setTimeout(() => onLayoutChange(), 100);
return () => clearTimeout(timeoutId);
}
}, [layoutName, onLayoutChange]);
const onKeyPress = useCallback((button: string) => { const onKeyPress = useCallback((button: string) => {
if (button === "{shift}") { if (button === "{shift}") {
setLayoutName("shift"); setLayoutName("shift");

View File

@@ -95,6 +95,10 @@ const AppContent: FC = () => {
const closeSidebar = () => setIsSidebarOpen(false); const closeSidebar = () => setIsSidebarOpen(false);
const handleKeyboardLayoutChange = () => {
fitCurrentTerminal();
}
function handleKeyboardInput(input: string) { function handleKeyboardInput(input: string) {
const currentTerminalTab = getTab(currentTab as number); const currentTerminalTab = getTab(currentTab as number);
if (currentTerminalTab && currentTerminalTab.terminalRef?.current?.sendInput) { if (currentTerminalTab && currentTerminalTab.terminalRef?.current?.sendInput) {
@@ -162,7 +166,7 @@ const AppContent: FC = () => {
</div> </div>
{currentTab && {currentTab &&
<div className="mb-1 z-10"> <div className="mb-1 z-10">
<TerminalKeyboard onSendInput={handleKeyboardInput}/> <TerminalKeyboard onSendInput={handleKeyboardInput} onLayoutChange={handleKeyboardLayoutChange}/>
</div> </div>
} }
<BottomNavbar <BottomNavbar