diff --git a/client/components/OpenKeyboard.tsx b/client/components/OpenKeyboard.tsx index a29e22e..b41bf18 100644 --- a/client/components/OpenKeyboard.tsx +++ b/client/components/OpenKeyboard.tsx @@ -1,9 +1,11 @@ import React, { useState, useEffect, useRef } from "react"; +import { VirtualText } from "./VirtualText"; import { Dimensions, Image, Keyboard, + KeyboardEvent, Platform, StyleSheet, TextInput, @@ -11,7 +13,6 @@ import { View } from "react-native"; -import { keyboardHandler } from "../utils"; import { DEFAULT_TEXT_VALUE } from "../utils"; enum KeyboardButtons { Up, Down } @@ -20,6 +21,8 @@ export const OpenKeyboard = () => { const [keyPress, setKeyPress] = useState(DEFAULT_TEXT_VALUE); const [keyboardShowing, setKeyboardShowing] = useState(false); const [clickedButton, setClickedButton] = useState(null); + const [virtualTextHandler, setVirtualTextHandler] = useState(""); + const [keyboardHeight, setKeyboardHeight] = useState(0); const inputRef = useRef(null); useEffect(() => { @@ -33,13 +36,20 @@ export const OpenKeyboard = () => { useEffect(() => { if (keyPress != DEFAULT_TEXT_VALUE) { - keyboardHandler(keyPress); + setVirtualTextHandler(keyPress); setKeyPress(DEFAULT_TEXT_VALUE); } }, [keyPress]); - const showKeyboard = () => setKeyboardShowing(true); - const hideKeyboard = () => setKeyboardShowing(false); + const showKeyboard = (e: KeyboardEvent) => { + setKeyboardHeight(e.endCoordinates.height); + setKeyboardShowing(true); + } + + const hideKeyboard = () => { + setKeyboardHeight(0); + setKeyboardShowing(false); + } const handlePress = () => { setClickedButton(KeyboardButtons.Up); @@ -82,6 +92,13 @@ export const OpenKeyboard = () => { /> + { keyboardShowing && + + } >, + keyboardHeight: number, +} + +const TEXT_TIMEOUT = 5000; + +export const VirtualText = ({ virtualTextHandler, setVirtualTextHandler, keyboardHeight }: Props) => { + const [virtualText, setVirtualText] = useState(""); + const [showText, setShowText] = useState(null); + + useEffect(() => { + if (virtualTextHandler != DEFAULT_TEXT_VALUE) { + let text = keyboardHandler(virtualTextHandler); + switch (text) { + case "": + break; + case 0: + setVirtualText(""); + break; + case -1: // Backspace + setVirtualText(virtualText.substring(0, virtualText.length - 1)); + clearWithin(); + break; + default: + setVirtualText(virtualText + text); + clearWithin(); + break; + } + setVirtualTextHandler(DEFAULT_TEXT_VALUE); + return () => { + text = ""; + }; + } + }, [virtualTextHandler]); + + // Reset timeout + const clearWithin = () => { + showText && clearTimeout(showText); + setShowText(setTimeout(() => { + setVirtualText(""); + setShowText(null); + }, TEXT_TIMEOUT)); + } + + return ( + <> + { virtualText + ? + + { virtualText } + + + : <> + } + + ) +} + +const styles = StyleSheet.create({ + text: { + color: "white", + fontSize: 18, + fontWeight: "400", + }, +}); + +const stylesContainer = (keyboardHeight: Props["keyboardHeight"]) => StyleSheet.create({ + textBox: { + position: "absolute", + bottom: (Platform.OS == "android" && StatusBar.currentHeight) + ? keyboardHeight + StatusBar.currentHeight + : keyboardHeight, + alignItems: "center", + justifyContent: "center", + width: "100%", + height: 40, + backgroundColor: "#1B1134", + zIndex: -1, + }, +}); diff --git a/client/utils.ts b/client/utils.ts index be94333..118d791 100644 --- a/client/utils.ts +++ b/client/utils.ts @@ -110,16 +110,16 @@ export const mouseScroll = (previous: ScrollPosition, current: ScrollPosition) = // Keyboard // k -- Key [OpenKeyboard] // t -- Type [OpenKeyboard] -export const keyboardHandler = (keyPress: string) => { +export const keyboardHandler = (keyPress: string): string | number => { // Function keys if (keyPress == FunctionKeyNotation.BACKSPACE) { sendMessage("k" + FunctionKey.BACKSPACE); - return; + return -1; } keyPress = keyPress.substring(1, keyPress.length); if (keyPress == FunctionKeyNotation.ENTER) { sendMessage("k" + FunctionKey.ENTER); - return; + return 0; } // Long string @@ -128,11 +128,11 @@ export const keyboardHandler = (keyPress: string) => { stringArray = limitString([], keyPress, DEFAULT_STRING_LIMIT); for (let string in stringArray) sendMessage("t" + stringArray[string]); - return; + return keyPress; } // Key presses sendMessage("t" + keyPress); - return; + return keyPress; } const limitString = (limitedStrings: string[], string: string, limit: number) => {