areainfoの処理ベースを変更

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<Props> = ({ 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(
+  <TouchableOpacity
+    style={{
+      alignContent: "center",
+      alignItems: "center",
+      width: "94%",
+      marginVertical: 5,
+      marginHorizontal: "3%",
+      backgroundColor: "#000",
+      flexDirection: "row",
+      overflow: "hidden",
+    }}
+    onPress={onClick}
+    onLongPress={onLongClick}
+  >
+    <View style={{ flex: 4, flexDirection: "row" }}>
+      {numberOfLines == 1 ? (
+        <Text style={{ ...descriptionStyle, color: "red" }}>
+          運行情報 &gt;{" "}
+        </Text>
+      ) : (
+        <Text style={{ ...descriptionStyle, color: "green" }}> &gt; </Text>
+      )}
+
+      <Text
+        style={{ ...descriptionStyle, color: "green" }}
+        numberOfLines={numberOfLines}
+      >
+        {areaString.replaceAll("\n", "").replaceAll("\r", "")}
+      </Text>
+    </View>
+  </TouchableOpacity>
+  );
+};

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 && (
-        <Description
+      {areaInfo != "" && isInfoArea && (
+        <AreaDescription
           numberOfLines={1}
-          info={areaString.replaceAll("\n", "").replaceAll("\r", "")}
+          areaInfo={areaInfo}
           onClick={() => alert(areaInfo)}
         />
       )}