暫定的GridViewの実装

components/StationDiagram/ExGridView.tsx

@@ -0,0 +1,60 @@
+import { FC } from "react";
+import { ListViewItem } from "@/components/StationDiagram/ListViewItem";
+import { View, Text, ScrollView, useWindowDimensions } from "react-native";
+import { ExGridViewItem } from "./ExGridViewItem";
+
+export const ExGridView: FC<{
+  data: {
+    trainNumber: string;
+    array: string;
+    name: string;
+    type: string;
+    time: string;
+  }[];
+}> = ({ data }) => {
+  const groupedData = {};
+  const groupKeys = [];
+
+    const { width } = useWindowDimensions();
+  data.forEach((item) => {
+    const hour = item.time.split(":")[0];
+    if (!groupedData[hour]) {
+      groupedData[hour] = [];
+      groupKeys.push(hour);
+    }
+    groupedData[hour].push(item);
+  });
+  return (
+    <ScrollView horizontal nestedScrollEnabled>
+      <ScrollView
+        style={{ backgroundColor: "white", width: width }}
+        minimumZoomScale={0.5}
+        maximumZoomScale={3.0}
+        pinchGestureEnabled
+        stickyHeaderIndices={
+          groupKeys.at(0) ? groupKeys.map((_, i) => i * 2) : []
+        }
+      >
+        {groupKeys.map((hour) => [
+          <View
+            style={{
+              backgroundColor: "white",
+              padding: 5,
+              borderBottomWidth: 0.5,
+              borderTopWidth: 0.5,
+              borderBottomColor: "#ccc",
+            }}
+            key={hour}
+          >
+            <Text style={{ fontSize: 15 }}>{hour}時台</Text>
+          </View>,
+          <View style={{ flexDirection: "row", position: "relative" }}>
+            {groupedData[hour].map((d, i) => (
+              <ExGridViewItem key={d.trainNumber + i} d={d} index={i} />
+            ))}
+          </View>,
+        ])}
+      </ScrollView>
+    </ScrollView>
+  );
+};

components/StationDiagram/ExGridViewItem.tsx

@@ -0,0 +1,220 @@
+import { migrateTrainName } from "@/lib/eachTrainInfoCoreLib/migrateTrainName";
+import { getStringConfig, typeID } from "@/lib/getStringConfig";
+import { getTrainType } from "@/lib/getTrainType";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { FC, useEffect, useMemo, useState } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+} from "react-native";
+import { customTrainDataDetector } from "../custom-train-data";
+import dayjs from "dayjs";
+import { SheetManager } from "react-native-actions-sheet";
+import { useNavigation } from "@react-navigation/native";
+import { lineList } from "@/lib/getStationList";
+import { useStationList } from "@/stateBox/useStationList";
+
+export const ExGridViewItem: FC<{
+  d: {
+    trainNumber: string;
+    array: string;
+    name: string;
+    type: string;
+    time: string;
+  };
+  index: number;
+}> = ({ d, index }) => {
+  const { allCustomTrainData } = useAllTrainDiagram();
+  const { navigate, goBack } = useNavigation();
+  const [trainData, setTrainData] = useState<{
+    ToData: string;
+    TrainNumber: string;
+    id: string;
+    img: string;
+    info?: string;
+    infoUrl: string;
+    infogram: string;
+    isEdit: boolean;
+    isSeason: boolean;
+    trainName: string;
+    trainNumDistance?: number;
+    type: typeID;
+    viaData?: string;
+    uwasa?: string;
+  }>();
+  useEffect(() => {
+    if (allCustomTrainData) {
+      allCustomTrainData.forEach((x) => {
+        if (x.TrainNumber === d.trainNumber) {
+          setTrainData(x);
+        }
+      });
+    }
+  }, []);
+  const { width } = useWindowDimensions();
+  const { color, name, data } = getTrainType(trainData?.type, true);
+  const { originalStationList } = useStationList();
+  // 列車名、種別、フォントの取得
+  const [
+    typeString,
+    trainName,
+    fontAvailable,
+    isOneMan,
+    infogram,
+    isEdit,
+    uwasa,
+    vehicleFormation,
+    trainInfoUrl,
+  ] = useMemo(() => {
+    const {
+      type,
+      trainName,
+      trainNumDistance,
+      infogram,
+      isEdit,
+      uwasa,
+      vehicleFormation,
+      trainInfoUrl,
+    } = customTrainDataDetector(d.trainNumber, allCustomTrainData);
+    const [typeString, fontAvailable, isOneMan] = getStringConfig(
+      type,
+      d.trainNumber
+    );
+    const trainData = d.array.split("#").filter((d) => d !== "");
+    switch (true) {
+      case trainData[trainData.length - 1] === undefined:
+        return [
+          typeString,
+          "",
+          fontAvailable,
+          isOneMan,
+          infogram,
+          isEdit,
+          uwasa,
+          vehicleFormation,
+          trainInfoUrl,
+        ];
+      default:
+        // 行先がある場合は、行先を取得
+        return [
+          typeString,
+          migrateTrainName(
+            trainData[trainData.length - 1].split(",")[0] + "行"
+          ),
+          fontAvailable,
+          isOneMan,
+          infogram,
+          isEdit,
+          uwasa,
+          vehicleFormation,
+          trainInfoUrl,
+        ];
+    }
+  }, [d.array]);
+  const timeArray = d.time.split(":").map((s) => parseInt(s));
+  const formattedTime = dayjs()
+    .set("hour", timeArray[0])
+    .set("minute", timeArray[1])
+    .format("m");
+
+  const openStationACFromEachTrainInfo = async (stationName) => {
+    await SheetManager.hide("EachTrainInfo");
+    const findStationEachLine = (selectLine) => {
+      let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
+      return NearStation;
+    };
+    let returnDataBase = lineList
+      .map((d) => findStationEachLine(originalStationList[d]))
+      .filter((d) => d.length > 0)
+      .reduce((pre, current) => {
+        pre.push(...current);
+        return pre;
+      }, []);
+    if (returnDataBase.length) {
+      const payload = {
+        currentStation: returnDataBase,
+        navigate,
+        //@ts-ignore
+        useShow: () => SheetManager.show("StationDetailView", { payload }),
+        onExit: () => SheetManager.hide("StationDetailView"),
+      }; //@ts-ignore
+      setTimeout(() => SheetManager.show("StationDetailView", { payload }), 50);
+    } else {
+      SheetManager.hide("StationDetailView");
+    }
+  };
+  const openTrainInfo = () => {
+    let TrainNumber = "";
+    if (trainData.trainNumDistance != undefined) {
+      const timeInfo =
+        parseInt(trainData.TrainNumber.replace("M", "").replace("D", "")) -
+        trainData.trainNumDistance;
+      TrainNumber = timeInfo + "号";
+    }
+    const payload = {
+      data: {
+        trainNum: trainData.TrainNumber,
+        limited: `${data}:${trainData.trainName}${TrainNumber}`,
+      },
+      navigate,
+      openStationACFromEachTrainInfo,
+      from: "AllTrainIDList",
+    };
+    SheetManager.show("EachTrainInfo", {
+      //@ts-ignore
+      payload,
+      onClose: (data) => {
+        //alert(data);
+      },
+    });
+  };
+  // if(typeString == "回送"){
+  //   return<></>;
+  // }
+  return (
+    <View style={{ left: 0, height: 50 }}>
+      <TouchableOpacity
+        style={{
+          flexDirection: "column",
+          borderTopWidth: 1,
+          borderBottomWidth: 0.5,
+          borderStyle: "solid",
+          borderColor: "darkgray",
+          opacity: d.type.includes("通") ? 0.5 : 1,
+          position: "absolute",
+          left: ((((width-50) / 100) * parseInt(formattedTime)) / 60) * 100,
+          height: "100%",
+        }}
+        onPress={() => openTrainInfo()}
+      >
+        <View style={{ position: "relative" }}>
+          <Text style={{ fontSize: 20, color: color }}>{formattedTime}</Text>
+          <Text
+            style={{
+              fontSize: 10,
+              position: "absolute",
+              bottom: -3,
+              right: 0,
+              fontWeight: "bold",
+            }}
+          >
+            {d.type}
+          </Text>
+        </View>
+        <View style={{ flex: 1, flexDirection: "column" }}>
+          <Text
+            style={{
+              fontSize: 10,
+              flex: 1,
+              fontWeight: "bold",
+            }}
+          >
+            {trainName}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};

components/StationDiagram/StationDiagramView.tsx

@@ -5,6 +5,7 @@ import { BigButton } from "../atom/BigButton";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
 import { ListView } from "@/components/StationDiagram/ListView";
 import dayjs from "dayjs";
+import { ExGridView } from "./ExGridView";
 
 type props = {
   route: {
@@ -65,6 +66,9 @@ export const StationDiagramView: FC<props> = ({ route }) => {
                 type,
                 time,
               };
+              // //条件によってフィルタリング
+              // if(type && type.includes("通")) return;
+              // if(type && type.includes("着")) return;
               returnDataArray.push(arrayData);
             });
         }
@@ -100,7 +104,8 @@ export const StationDiagramView: FC<props> = ({ route }) => {
       >
         {currentStation[0].Station_JP}駅 時刻表
       </Text>
-        <ListView data={currentStationDiagram} />
+        {/* <ListView data={currentStationDiagram} /> */}
+        <ExGridView data={currentStationDiagram} />
       {/* <Text
         style={{
           backgroundColor: "white",