diff --git a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx index 12f14e43..d93465ef 100644 --- a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx +++ b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx @@ -1,17 +1,25 @@ -import React, {useState, useCallback} from "react"; +import React, {useState, useCallback, useEffect} from "react"; import Keyboard from "react-simple-keyboard"; import "react-simple-keyboard/build/css/index.css"; import "./kb-dark-theme.css"; interface TerminalKeyboardProps { onSendInput: (input: string) => void; + onLayoutChange: () => void; } -export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) { +export function TerminalKeyboard({onSendInput, onLayoutChange}: TerminalKeyboardProps) { const [layoutName, setLayoutName] = useState("default"); const [isCtrl, setIsCtrl] = 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) => { if (button === "{shift}") { setLayoutName("shift"); diff --git a/src/ui/Mobile/MobileApp.tsx b/src/ui/Mobile/MobileApp.tsx index 6ea27af8..9e417c5a 100644 --- a/src/ui/Mobile/MobileApp.tsx +++ b/src/ui/Mobile/MobileApp.tsx @@ -95,6 +95,10 @@ const AppContent: FC = () => { const closeSidebar = () => setIsSidebarOpen(false); + const handleKeyboardLayoutChange = () => { + fitCurrentTerminal(); + } + function handleKeyboardInput(input: string) { const currentTerminalTab = getTab(currentTab as number); if (currentTerminalTab && currentTerminalTab.terminalRef?.current?.sendInput) { @@ -162,7 +166,7 @@ const AppContent: FC = () => { {currentTab &&