From 49e9ed14bca4fb21a9765ddc8cca1e9226766636 Mon Sep 17 00:00:00 2001
From: harukin-OneMix4 <harukin@haruk.in>
Date: Wed, 7 Feb 2024 00:12:27 +0900
Subject: [PATCH] =?UTF-8?q?EachTrainInfo=E3=81=AE=E5=8F=AF=E5=A4=89?=
 =?UTF-8?q?=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActionSheetComponents/EachTrainInfo.js    | 347 +++++++-----------
 .../EachTrainInfo/DynamicHeader.js            | 274 ++++++++++++++
 .../EachTrainInfo/StateBox.js                 |  35 +-
 .../EachTrainInfo/TrainDataView.js            |  13 +-
 4 files changed, 444 insertions(+), 225 deletions(-)
 create mode 100644 components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js

diff --git a/components/ActionSheetComponents/EachTrainInfo.js b/components/ActionSheetComponents/EachTrainInfo.js
index 233478f..97b436b 100644
--- a/components/ActionSheetComponents/EachTrainInfo.js
+++ b/components/ActionSheetComponents/EachTrainInfo.js
@@ -6,6 +6,7 @@ import {
   Text,
   TouchableOpacity,
   Platform,
+  Animated,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import ActionSheet, {
@@ -24,6 +25,7 @@ import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
 import { EachStopList } from "./EachTrainInfo/EachStopList";
 import { DataFromButton } from "./EachTrainInfo/DataFromButton";
 import { TrainDataView } from "./EachTrainInfo/TrainDataView";
+import { DynamicHeader } from "./EachTrainInfo/DynamicHeader";
 
 export const EachTrainInfo = (props) => {
   if (!props.payload) return <></>;
@@ -377,6 +379,8 @@ export const EachTrainInfo = (props) => {
   };
   const actionSheetRef = useRef(null);
   const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
+
+  const scrollOffsetY = useRef(new Animated.Value(0)).current;
   return (
     <ActionSheet
       gestureEnabled={true}
@@ -446,192 +450,102 @@ export const EachTrainInfo = (props) => {
               />
             )}
         </View>
-        {from == "AllTrainDiagramView" || (
-          <ScrollView
-            //onTouchStart={() => setActionSheetHorizonalScroll(true)}
-            //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
-            //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
-            style={{
-              flexDirection: "row",
-              //width: widthPercentageToDP("200%"),
-              minHeight: 200,
-              height: heightPercentageToDP("20%"),
-            }}
-            horizontal
-            pagingEnabled
-          >
-            <TrainDataView
+        <View style={{ maxHeight: heightPercentageToDP("70%") }}>
+          {from == "AllTrainDiagramView" || (
+            <DynamicHeader
+              animHeaderValue={scrollOffsetY}
               currentTrainData={currentTrainData}
               currentPosition={currentPosition}
               nearTrainIDList={nearTrainIDList}
               openTrainInfo={openTrainInfo}
             />
-            {/* <View
-              style={{
-                flexDirection: "column",
-                height: heightPercentageToDP("20%"),
-                flex: 1,
-                width: widthPercentageToDP("100%"),
-              }}
-            >
-              <View style={{ flex: 1, flexDirection: "row" }}>
-                <View
-                  style={{
-                    flex: 1,
-                    backgroundColor: "white",
-                    borderRadius: 10,
-                    padding: 10,
-                    margin: 10,
-                  }}
-                >
-                  <Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
-                  <View style={{ flex: 1 }} />
-                  <Text
-                    style={{
-                      fontSize: 20,
-                      color: "#0099CC",
-                      textAlign: "right",
-                    }}
-                  >
-                    岡山
-                  </Text>
-                </View>
+          )}
 
-                <View
-                  style={{
-                    flex: 3,
-                    backgroundColor: "white",
-                    borderRadius: 10,
-                    padding: 10,
-                    margin: 10,
-                  }}
-                >
-                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
-                    車両案内
-                  </Text>
-                  <View style={{ flex: 1 }} />
-                  <Text
-                    style={{
-                      fontSize: 20,
-                      color: "#0099CC",
-                      textAlign: "right",
-                    }}
-                  >
-                    宇多津でうずしお号と連結
-                  </Text>
-                </View>
-              </View>
-              <View style={{ flex: 1, flexDirection: "row" }}>
-                <View
-                  style={{
-                    flex: 1,
-                    backgroundColor: "white",
-                    borderRadius: 10,
-                    padding: 10,
-                    margin: 10,
-                  }}
-                >
-                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
-                    編成(使用車両：2700系)
-                  </Text>
-                  <View style={{ flex: 1 }} />
-                  <Text
-                    style={{
-                      fontSize: 20,
-                      color: "#0099CC",
-                      textAlign: "left",
-                    }}
-                  >
-                    {"[<自][自>][アン自|指>][アン指|G>]"}
-                  </Text>
-                </View>
-              </View>
-            </View> */}
-          </ScrollView>
-        )}
-        <ScrollView
-          {...scrollHandlers}
-          style={{
-            maxHeight: heightPercentageToDP(
-              from == "AllTrainDiagramView" ? "70%" : "50%"
-            ),
-            backgroundColor: "white",
-          }}
-          stickyHeaderIndices={[0]}
-        >
-          <View
+          <ScrollView
+            {...scrollHandlers}
             style={{
-              alignItems: "center",
               backgroundColor: "white",
-              flexDirection: "row",
             }}
-            index={0}
+            stickyHeaderIndices={[0]}
+            scrollEventThrottle={16}
+            onScroll={Animated.event(
+              [{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
+              { useNativeDriver: false }
+            )}
           >
             <View
               style={{
-                padding: 8,
+                alignItems: "center",
+                backgroundColor: "white",
                 flexDirection: "row",
-                borderBottomWidth: 1,
-                borderBottomColor: "#f0f0f0",
-                flex: 1,
               }}
+              index={0}
             >
-              <Text style={{ fontSize: 20 }}>停車駅</Text>
-              <View style={{ flex: 1 }} />
-              <View style={{ flexDirection: "row" }}>
-                {!isNaN(currentTrainData?.delay) &&
-                  currentTrainData?.delay != 0 && (
-                    <Text
-                      style={{
-                        fontSize: 15,
-                        color: "black",
-                        position: "absolute",
-                        right: 110,
-                        textAlign: "right",
-                        textDecorationLine: "line-through",
-                      }}
-                    >
-                      (定刻)
-                    </Text>
-                  )}
-                <Text
-                  style={{
-                    fontSize: 20,
-                    color: isNaN(currentTrainData?.delay)
-                      ? "black"
-                      : currentTrainData?.delay == 0
-                      ? "black"
-                      : "red",
-                    width: 60,
-                  }}
-                >
-                  見込
-                </Text>
-                <Text style={{ fontSize: 20, width: 50 }}></Text>
+              <View
+                style={{
+                  padding: 8,
+                  flexDirection: "row",
+                  borderBottomWidth: 1,
+                  borderBottomColor: "#f0f0f0",
+                  flex: 1,
+                }}
+              >
+                <Text style={{ fontSize: 20 }}>停車駅</Text>
+                <View style={{ flex: 1 }} />
+                <View style={{ flexDirection: "row" }}>
+                  {!isNaN(currentTrainData?.delay) &&
+                    currentTrainData?.delay != 0 && (
+                      <Text
+                        style={{
+                          fontSize: 15,
+                          color: "black",
+                          position: "absolute",
+                          right: 110,
+                          textAlign: "right",
+                          textDecorationLine: "line-through",
+                        }}
+                      >
+                        (定刻)
+                      </Text>
+                    )}
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: isNaN(currentTrainData?.delay)
+                        ? "black"
+                        : currentTrainData?.delay == 0
+                        ? "black"
+                        : "red",
+                      width: 60,
+                    }}
+                  >
+                    見込
+                  </Text>
+                  <Text style={{ fontSize: 20, width: 50 }}></Text>
+                </View>
               </View>
             </View>
-          </View>
-          {headStation && !isConcatNear && (
-            <TouchableOpacity
-              onPress={() => openBackTrainInfo(headStation)}
-              style={{
-                padding: 10,
-                flexDirection: "row",
-                borderColor: "blue",
-                borderWidth: 1,
-                margin: 10,
-                borderRadius: 5,
-                alignItems: "center",
-              }}
-            >
-              <Text
-                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+            {headStation && !isConcatNear && (
+              <TouchableOpacity
+                onPress={() => openBackTrainInfo(headStation)}
+                style={{
+                  padding: 10,
+                  flexDirection: "row",
+                  borderColor: "blue",
+                  borderWidth: 1,
+                  margin: 10,
+                  borderRadius: 5,
+                  alignItems: "center",
+                }}
               >
-                「本当の始発駅」を表示
-              </Text>
-            </TouchableOpacity>
-          )}
-          {/* <LottieView
+                <Text
+                  style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+                >
+                  「本当の始発駅」を表示
+                </Text>
+              </TouchableOpacity>
+            )}
+            {/* <LottieView
                 autoPlay
                 loop
                 style={{ width: 150, height: 150, backgroundColor: "#fff" }}
@@ -639,56 +553,59 @@ export const EachTrainInfo = (props) => {
               />
               <Text>ほげほげふがふが</Text> */}
 
-          {trainData.map((i, index) =>
-            i.split(",")[1] == "提" ? (
-              <DataFromButton i={i} />
-            ) : (
-              <EachStopList
-                i={i}
-                index={index}
-                stationList={stationList}
-                points={points}
-                currentTrainData={currentTrainData}
-                openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
-              />
-            )
-          )}
-          {tailStation && !isConcatNear && (
-            <TouchableOpacity
-              onPress={() => openBackTrainInfo(tailStation)}
-              style={{
-                padding: 10,
-                flexDirection: "row",
-                borderColor: "blue",
-                borderWidth: 1,
-                margin: 10,
-                borderRadius: 5,
-                alignItems: "center",
-              }}
-            >
-              <Text
-                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+            {trainData.map((i, index) =>
+              i.split(",")[1] == "提" ? (
+                <DataFromButton i={i} />
+              ) : (
+                <EachStopList
+                  i={i}
+                  index={index}
+                  stationList={stationList}
+                  points={points}
+                  currentTrainData={currentTrainData}
+                  openStationACFromEachTrainInfo={
+                    openStationACFromEachTrainInfo
+                  }
+                />
+              )
+            )}
+            {tailStation && !isConcatNear && (
+              <TouchableOpacity
+                onPress={() => openBackTrainInfo(tailStation)}
+                style={{
+                  padding: 10,
+                  flexDirection: "row",
+                  borderColor: "blue",
+                  borderWidth: 1,
+                  margin: 10,
+                  borderRadius: 5,
+                  alignItems: "center",
+                }}
               >
-                「本当の終着駅」を表示
-              </Text>
-            </TouchableOpacity>
-          )}
+                <Text
+                  style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+                >
+                  「本当の終着駅」を表示
+                </Text>
+              </TouchableOpacity>
+            )}
 
-          <View style={{ flexDirection: "row" }}>
-            <View
-              style={{
-                padding: 8,
-                flexDirection: "row",
-                borderBottomWidth: 1,
-                borderBottomColor: "#f0f0f0",
-                flex: 1,
-              }}
-            >
-              <Text style={{ fontSize: 20 }}> </Text>
-              <View style={{ flex: 1 }} />
+            <View style={{ flexDirection: "row" }}>
+              <View
+                style={{
+                  padding: 8,
+                  flexDirection: "row",
+                  borderBottomWidth: 1,
+                  borderBottomColor: "#f0f0f0",
+                  flex: 1,
+                }}
+              >
+                <Text style={{ fontSize: 20 }}> </Text>
+                <View style={{ flex: 1 }} />
+              </View>
             </View>
-          </View>
-        </ScrollView>
+          </ScrollView>
+        </View>
       </View>
     </ActionSheet>
   );
diff --git a/components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js b/components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js
new file mode 100644
index 0000000..fc2170f
--- /dev/null
+++ b/components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js
@@ -0,0 +1,274 @@
+import * as React from "react";
+import { Text, View, StyleSheet, Animated, ScrollView } from "react-native";
+import { TrainDataView } from "./TrainDataView";
+
+const Max_Header_Height = 200;
+const Min_Header_Height = 80;
+const Scroll_Distance = Max_Header_Height - Min_Header_Height;
+export const DynamicHeader = ({
+  animHeaderValue,
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+}) => {
+  const animatedHeaderHeight = animHeaderValue.interpolate({
+    inputRange: [0, Scroll_Distance],
+    outputRange: [Max_Header_Height, 0],
+    extrapolate: "clamp",
+  });
+  const animatedHeaderHeight2 = animHeaderValue.interpolate({
+    inputRange: [0, Scroll_Distance],
+    outputRange: [0, Min_Header_Height],
+    extrapolate: "clamp",
+  });
+  const animateHeaderBackgroundColor = animHeaderValue.interpolate({
+    inputRange: [0, Max_Header_Height - Min_Header_Height],
+    outputRange: ["blue", "red"],
+    extrapolate: "clamp",
+  });
+  return (
+    <>
+      <Animated.View
+        style={[
+          styles.header,
+          {
+            height: animatedHeaderHeight,
+            // backgroundColor: animateHeaderBackgroundColor,
+          },
+        ]}
+      >
+        <ScrollView
+          //onTouchStart={() => setActionSheetHorizonalScroll(true)}
+          //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+          //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
+          style={{
+            flexDirection: "row",
+            //width: widthPercentageToDP("200%"),
+            // minHeight: 200,
+            //height: heightPercentageToDP("20%"),
+          }}
+          horizontal
+          pagingEnabled
+        >
+          <TrainDataView
+            currentTrainData={currentTrainData}
+            currentPosition={currentPosition}
+            nearTrainIDList={nearTrainIDList}
+            openTrainInfo={openTrainInfo}
+          />
+          {/* <View
+              style={{
+                flexDirection: "column",
+                height: heightPercentageToDP("20%"),
+                flex: 1,
+                width: widthPercentageToDP("100%"),
+              }}
+            >
+              <View style={{ flex: 1, flexDirection: "row" }}>
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    岡山
+                  </Text>
+                </View>
+
+                <View
+                  style={{
+                    flex: 3,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                    車両案内
+                  </Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    宇多津でうずしお号と連結
+                  </Text>
+                </View>
+              </View>
+              <View style={{ flex: 1, flexDirection: "row" }}>
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                    編成(使用車両：2700系)
+                  </Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "#0099CC",
+                      textAlign: "left",
+                    }}
+                  >
+                    {"[<自][自>][アン自|指>][アン指|G>]"}
+                  </Text>
+                </View>
+              </View>
+            </View> */}
+        </ScrollView>
+      </Animated.View>
+      <Animated.View
+        style={[
+          styles.header,
+          {
+            height: animatedHeaderHeight2,
+            //backgroundColor: animateHeaderBackgroundColor,
+            margin: 0,
+          },
+        ]}
+      >
+        <ScrollView
+          //onTouchStart={() => setActionSheetHorizonalScroll(true)}
+          //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+          //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
+          style={{
+            flexDirection: "row",
+            flex: 1,
+            //width: widthPercentageToDP("200%"),
+            // minHeight: 200,
+            //height: heightPercentageToDP("20%"),
+          }}
+          horizontal
+          pagingEnabled
+        >
+          <TrainDataView
+            mode={2}
+            currentTrainData={currentTrainData}
+            currentPosition={currentPosition}
+            nearTrainIDList={nearTrainIDList}
+            openTrainInfo={openTrainInfo}
+          />
+          {/* <View
+              style={{
+                flexDirection: "column",
+                height: heightPercentageToDP("20%"),
+                flex: 1,
+                width: widthPercentageToDP("100%"),
+              }}
+            >
+              <View style={{ flex: 1, flexDirection: "row" }}>
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    岡山
+                  </Text>
+                </View>
+
+                <View
+                  style={{
+                    flex: 3,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                    車両案内
+                  </Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    宇多津でうずしお号と連結
+                  </Text>
+                </View>
+              </View>
+              <View style={{ flex: 1, flexDirection: "row" }}>
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                    編成(使用車両：2700系)
+                  </Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "#0099CC",
+                      textAlign: "left",
+                    }}
+                  >
+                    {"[<自][自>][アン自|指>][アン指|G>]"}
+                  </Text>
+                </View>
+              </View>
+            </View> */}
+        </ScrollView>
+      </Animated.View>
+    </>
+  );
+};
+const styles = StyleSheet.create({
+  header: {
+    justifyContent: "center",
+    alignItems: "center",
+    left: 0,
+    right: 0,
+    //paddingTop: 10,
+  },
+  headerText: {
+    color: "#fff",
+    fontSize: 25,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+});
diff --git a/components/ActionSheetComponents/EachTrainInfo/StateBox.js b/components/ActionSheetComponents/EachTrainInfo/StateBox.js
index 933b930..c26f41b 100644
--- a/components/ActionSheetComponents/EachTrainInfo/StateBox.js
+++ b/components/ActionSheetComponents/EachTrainInfo/StateBox.js
@@ -1,19 +1,29 @@
 import React from "react";
 import { View, Text } from "react-native";
 
-export const StateBox = ({ text, title, style }) => (
-  <View style={{ ...boxStyle, ...style }}>
+export const StateBox = ({ text, title, style, mode }) => (
+  <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
     <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
     <View style={{ flex: 1 }} />
-    <View style={{ fontSize: 25, color: "#0099CC", textAlign: "right" }}>
+    <View
+      style={{
+        color: "#0099CC",
+        textAlign: "right",
+        flexDirection: mode == 2 ? "row" : "column",
+      }}
+    >
       {text?.match("～") ? (
         <>
-          <Text style={boxTextStyle}>{text.split("～")[0]}</Text>
+          <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
+            {text.split("～")[0]}
+          </Text>
           <Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
-          <Text style={boxTextStyle}>{text.split("～")[1]}</Text>
+          <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
+            {text.split("～")[1]}
+          </Text>
         </>
       ) : (
-        <Text style={boxTextStyle}>{text}</Text>
+        <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
       )}
     </View>
   </View>
@@ -25,6 +35,19 @@ const boxStyle = {
   padding: 10,
   margin: 10,
 };
+const boxStyle2 = {
+  flex: 1,
+  backgroundColor: "white",
+  borderRadius: 10,
+  padding: 5,
+  margin: 5,
+};
+const boxTextStyle2 = {
+  fontSize: 18,
+  color: "#0099CC",
+  textAlign: "right",
+};
+
 const boxTextStyle = {
   fontSize: 25,
   color: "#0099CC",
diff --git a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
index a98ca15..cf73398 100644
--- a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
+++ b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
@@ -11,17 +11,20 @@ export const TrainDataView = ({
   currentPosition,
   nearTrainIDList,
   openTrainInfo,
+  mode = 0,
 }) => {
   return (
     <View
       style={{
         flexDirection: "row",
-        minHeight: 200,
-        height: heightPercentageToDP("20%"),
+        //minHeight: 200,
+        //height: heightPercentageToDP("20%"),
         width: widthPercentageToDP("100%"),
+        flex: 1,
       }}
     >
       <StateBox
+        mode={mode}
         title={`現在地 ${currentPosition.toString()}`}
         text={
           currentTrainData?.Pos.match("～")
@@ -37,9 +40,10 @@ export const TrainDataView = ({
             : currentTrainData?.Pos
         }
       />
-      <View style={{ flex: 1, flexDirection: "column" }}>
+      <View style={{ flex: 1, flexDirection: mode == 2 ? "row" : "column" }}>
         <View style={{ flex: 1, flexDirection: "row" }}>
           <StateBox
+            mode={mode}
             title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
             text={`${currentTrainData?.delay}${
               isNaN(currentTrainData?.delay) ? "" : "分"
@@ -55,9 +59,10 @@ export const TrainDataView = ({
           }}
         >
           {nearTrainIDList.length == 0 ? (
-            <StateBox title="列番" text={currentTrainData?.num} />
+            <StateBox mode={mode} title="列番" text={currentTrainData?.num} />
           ) : (
             <StateBox
+              mode={mode}
               title="増解結相手を表示▶️"
               text={`${nearTrainIDList}`}
               style={{