diff --git a/components/発車時刻表/LED_inside_Component/AreaDescription.tsx b/components/発車時刻表/LED_inside_Component/AreaDescription.tsx new file mode 100644 index 0000000..f3dd3b3 --- /dev/null +++ b/components/発車時刻表/LED_inside_Component/AreaDescription.tsx @@ -0,0 +1,79 @@ +import React, { FC, useState, useEffect } from "react"; +import { Text, TextStyle, View, TouchableOpacity } from "react-native"; +import { useInterval } from "../../../lib/useInterval"; + +const descriptionStyle: TextStyle = { + fontSize: parseInt("16%"), + fontWeight: "bold", +}; + +type Props = { + areaInfo: string; + numberOfLines?: number; + onClick?: () => void; + onLongClick?: () => void; +}; +export const AreaDescription:FC = ({ areaInfo, numberOfLines = 0, onClick, onLongClick }) => { + const [areaString, setAreaString] = useState(""); + const [areaStringLength, setAreaStringLength] = useState(0); + const [move, setMove] = useState(0); + useInterval( + () => { + if (areaInfo != "") { + setMove(areaStringLength < move ? 0 : move + 1); + } + }, + 350, + true + ); + useEffect(() => { + if (!areaInfo) { + setAreaString(""); + return () => {}; + } + setAreaString( + areaInfo.substring(move, areaInfo.length) + areaInfo.substring(0, move) + ); + }, [move]); + + useEffect(() => { + if (!areaInfo) { + setAreaStringLength(0); + return () => {}; + } + setAreaStringLength(areaInfo.length); + }, [areaInfo]); + return( + + + {numberOfLines == 1 ? ( + + 運行情報 >{" "} + + ) : ( + > + )} + + + {areaString.replaceAll("\n", "").replaceAll("\r", "")} + + + + ); +}; diff --git a/components/発車時刻表/LED_vidion.js b/components/発車時刻表/LED_vidion.js index 96d297b..bee0532 100644 --- a/components/発車時刻表/LED_vidion.js +++ b/components/発車時刻表/LED_vidion.js @@ -12,6 +12,7 @@ import { Description } from "./LED_inside_Component/Description"; import { EachData } from "./EachData"; import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram"; import { trainPosition } from "@/lib/trainPositionTextArray"; +import { AreaDescription } from "./LED_inside_Component/AreaDescription"; /** * @@ -180,36 +181,6 @@ export default function LED_vision(props) { return !date.isAfter(db); } }; - - const [areaString, setAreaString] = useState(""); - const [areaStringLength, setAreaStringLength] = useState(0); - const [move, setMove] = useState(0); - useInterval( - () => { - if (areaInfo != "") { - setMove(areaStringLength < move ? 0 : move + 1); - } - }, - 350, - true - ); - useEffect(() => { - if (!areaInfo) { - setAreaString(""); - return () => {}; - } - setAreaString( - areaInfo.substring(move, areaInfo.length) + areaInfo.substring(0, move) - ); - }, [move]); - - useEffect(() => { - if (!areaInfo) { - setAreaStringLength(0); - return () => {}; - } - setAreaStringLength(areaInfo.length); - }, [areaInfo]); const { width } = useWindowDimensions(); const adjustedWidth = width * 0.98; return ( @@ -236,10 +207,10 @@ export default function LED_vision(props) { key={d.train} /> ))} - {areaString != "" && isInfoArea && ( - alert(areaInfo)} /> )}