andrew.ng
/
ATC_SIMPLE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update BottomToolBar.tsx

This commit is contained in:
nguyentrungthat 2025-11-25 15:03:16 +07:00
parent cd9eeb08b1
commit 6ac08c2d8b
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
FRONTEND/src/components/BottomToolBar.tsx
View File

@ -11,7 +11,7 @@ import {
Tabs, Tabs,
Text, Text,
} from "@mantine/core"; } from "@mantine/core";
import { useMemo, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import classes from "./Component.module.css"; import classes from "./Component.module.css";
import type { IScenario, TLine, TStation } from "../untils/types"; import type { IScenario, TLine, TStation } from "../untils/types";
import type { Socket } from "socket.io-client"; import type { Socket } from "socket.io-client";
@ -64,9 +64,16 @@ const BottomToolBar = ({
: null; : null;
}, []); }, []);
const [valueInput, setValueInput] = useState<string>(""); const [valueInput, setValueInput] = useState<string>("");
const inputRef = useRef<HTMLInputElement>(null);
// const [activeTabBottom, setActiveTabBottom] = useState<string>("command"); // const [activeTabBottom, setActiveTabBottom] = useState<string>("command");
// const [isExpand, setIsExpand] = useState<boolean>(true); // const [isExpand, setIsExpand] = useState<boolean>(true);
useEffect(() => {
if (selectedLines?.length > 1 && inputRef?.current) {
inputRef?.current?.focus();
}
}, [selectedLines?.length]);
return ( return (
<motion.div <motion.div
initial={false} initial={false}
@ -224,6 +231,7 @@ const BottomToolBar = ({
</Flex> </Flex>
<Box> <Box>
<Input <Input
ref={inputRef}
style={{ style={{
width: "30vw", width: "30vw",
boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)", boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",