Merge commit 'ba65389596851e99fe0a3f4fad95b4fd6ea0448c' into develop

components/Apps/FixedPositionBox.tsx

@@ -1,5 +1,6 @@
 import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
 import { View, Platform } from "react-native";
+import { useKeepAwake } from "expo-keep-awake";
 import Constants from "expo-constants";
 import { FixedTrain } from "./FixedPositionBox/FixedTrainBox";
 import { FixedStation } from "./FixedPositionBox/FixedStationBox";
@@ -7,8 +8,9 @@ import { useState } from "react";
 
 export const FixedPositionBox = () => {
   const { fixedPosition, setFixedPosition } = useCurrentTrain();
-  const [displaySize, setDisplaySize] = useState(50);
+  const [displaySize, setDisplaySize] = useState(76);
 
+  useKeepAwake();
   return (
     <View
       style={{
@@ -20,6 +22,7 @@ export const FixedPositionBox = () => {
         height: displaySize,
         flexDirection: "row",
       }}
+      pointerEvents="box-none"
     >
       {fixedPosition.type === "station" && (
         <FixedStation

components/Apps/FixedPositionBox/FixedStationBox.tsx

@@ -97,6 +97,10 @@ export const FixedStation: FC<props> = ({
   }, [trainTimeAndNumber, currentTrain /*finalSwitch*/]);
 
   return (
+    <View
+      style={{ display: "flex", flexDirection: "column", flex: 1 }}
+      pointerEvents="box-none"
+    >
       <TouchableOpacity
         style={{
           flex: 1,
@@ -212,11 +216,18 @@ export const FixedStation: FC<props> = ({
             </View>
           )}
         </View>
+      </TouchableOpacity>
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          borderTopColor: lineColor,
+          borderTopWidth: 2,
+        }}
+        pointerEvents="box-none"
+      >
         <TouchableOpacity
           style={{
-          position: "absolute",
-          top: "100%",
-          left: 0,
             flexDirection: "row",
             alignItems: "center",
           }}
@@ -264,9 +275,6 @@ export const FixedStation: FC<props> = ({
         </TouchableOpacity>
         <TouchableOpacity
           style={{
-          position: "absolute",
-          top: "100%",
-          right: 0,
             flexDirection: "row",
             alignItems: "center",
           }}
@@ -275,10 +283,10 @@ export const FixedStation: FC<props> = ({
               duration: 500,
               update: { type: "spring", springDamping: 0.7 },
             });
-          if (displaySize === 50) {
+            if (displaySize === 76) {
-            setDisplaySize(200);
+              setDisplaySize(226);
             } else {
-            setDisplaySize(50);
+              setDisplaySize(76);
             }
           }}
         >
@@ -308,7 +316,7 @@ export const FixedStation: FC<props> = ({
             pointerEvents="none"
           >
             <Ionicons
-            name={displaySize == 50 ? "chevron-down" : "chevron-up"}
+              name={displaySize == 76 ? "chevron-down" : "chevron-up"}
               size={15}
               color="white"
             />
@@ -320,11 +328,12 @@ export const FixedStation: FC<props> = ({
                 fontSize: 15,
               }}
             >
-            {displaySize == 50 ? "時刻表を展開する" : "時刻表を縮小する"}
+              {displaySize == 76 ? "時刻表を展開する" : "時刻表を縮小する"}
             </Text>
           </View>
         </TouchableOpacity>
-    </TouchableOpacity>
+      </View>
+    </View>
   );
 };
 
@@ -353,7 +362,7 @@ const FixedStationBoxEachTrain = ({ d, station, displaySize }) => {
       style={{
         backgroundColor: "white",
         flexDirection: "row",
-        height: displaySize == 50 ? "33%" : "7.5%",
+        height: displaySize == 76 ? "33%" : "7.5%",
         overflow: "visible",
       }}
     >

components/Apps/FixedPositionBox/FixedTrainBox.tsx

@@ -214,27 +214,30 @@ export const FixedTrain: FC<props> = ({
       : ""
   }`;
   return (
+    <View
+      style={{ display: "flex", flexDirection: "column", flex: 1 }}
+      pointerEvents="box-none"
+    >
       <View
         style={{
           flex: 1,
-        flexDirection: displaySize === 50 ? "row" : "column",
+          flexDirection: displaySize === 76 ? "row" : "column",
           backgroundColor: "black",
-        borderBottomColor: "black",
+          //borderBottomColor: "black",
-        borderBottomWidth: 2,
+          //borderBottomWidth: 2,
-        position: "relative",
         }}
       >
         <View
           style={{
-          flexDirection: displaySize === 50 ? "column" : "row",
+            flexDirection: displaySize === 76 ? "column" : "row",
             flex: 1,
             backgroundColor: "white",
-          height: displaySize === 50 ? 50 : 200,
+            height: displaySize === 76 ? 50 : 200,
             overflow: "hidden",
           }}
         >
           <View
-          style={{ flex: displaySize === 50 ? 1 : 5, flexDirection: "row" }}
+            style={{ flex: displaySize === 76 ? 1 : 5, flexDirection: "row" }}
           >
             <View
               style={{
@@ -248,17 +251,17 @@ export const FixedTrain: FC<props> = ({
             >
               <Image
                 source={{ uri: customData.img }}
-              width={displaySize === 50 ? 14 : 23}
+                width={displaySize === 76 ? 14 : 23}
-              height={displaySize === 50 ? 17 : 26}
+                height={displaySize === 76 ? 17 : 26}
                 style={{ margin: 5 }}
               />
               <View
                 style={{
-                flexDirection: displaySize === 50 ? "row" : "column",
+                  flexDirection: displaySize === 76 ? "row" : "column",
                   alignContent: "center",
                   alignSelf: "center",
                   alignItems: "center",
-                maxWidth: displaySize === 50 ? 100 : 60,
+                  maxWidth: displaySize === 76 ? 100 : 60,
                 }}
               >
                 <Text
@@ -283,7 +286,7 @@ export const FixedTrain: FC<props> = ({
                     style={{
                       fontSize: trainNameText.length > 6 ? 8 : 14,
                       color: "white",
-                    maxWidth: displaySize === 50 ? 60 : 200,
+                      maxWidth: displaySize === 76 ? 60 : 200,
                       textAlignVertical: "center",
                     }}
                   >
@@ -298,11 +301,11 @@ export const FixedTrain: FC<props> = ({
                   borderLeftColor: customTrainType.color,
                   borderTopColor: lineColor,
                   borderBottomColor: lineColor,
-                borderTopWidth: displaySize === 50 ? 14 : 50,
+                  borderTopWidth: displaySize === 76 ? 14 : 50,
-                borderBottomWidth: displaySize === 50 ? 14 : 50,
+                  borderBottomWidth: displaySize === 76 ? 14 : 50,
-                borderLeftWidth: displaySize === 50 ? 10 : 30,
+                  borderLeftWidth: displaySize === 76 ? 10 : 30,
                   borderRightWidth: 0,
-                //height: displaySize === 50 ? 20 : 100,
+                  //height: displaySize === 76 ? 20 : 100,
                   height: "100%",
                 }}
               ></View>
@@ -346,7 +349,7 @@ export const FixedTrain: FC<props> = ({
               </View>
             </View>
           </View>
-        {displaySize === 200 && (
+          {displaySize === 226 && (
             <View
               style={{
                 backgroundColor: "white",
@@ -365,7 +368,7 @@ export const FixedTrain: FC<props> = ({
           <View
             style={{
               backgroundColor: "black",
-            flex: displaySize === 50 ? 1 : 4,
+              flex: displaySize === 76 ? 1 : 4,
               flexDirection: "row",
               alignItems: "center",
             }}
@@ -378,7 +381,9 @@ export const FixedTrain: FC<props> = ({
                 marginHorizontal: 5,
               }}
             >
-            {nextStationData[0]?.Station_JP == train?.Pos ? "ただいま" : "次は"}
+              {nextStationData[0]?.Station_JP == train?.Pos
+                ? "ただいま"
+                : "次は"}
             </Text>
             <StationNumberMaker
               currentStation={nextStationData}
@@ -395,7 +400,7 @@ export const FixedTrain: FC<props> = ({
             >
               {nextStationData[0]?.Station_JP || "不明"}
             </Text>
-          {displaySize === 50 && (
+            {displaySize === 76 && (
               <View
                 style={{
                   backgroundColor: "white",
@@ -417,13 +422,20 @@ export const FixedTrain: FC<props> = ({
           train={train}
           lineColor={lineColor}
           trainDataWithThrough={untilStationData}
-        isSmall={displaySize === 50}
+          isSmall={displaySize === 76}
         />
+      </View>
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          borderTopColor: "black",
+          borderTopWidth: 2,
+        }}
+        pointerEvents="box-none"
+      >
         <TouchableOpacity
           style={{
-          position: "absolute",
-          top: "100%",
-          left: 0,
             flexDirection: "row",
             alignItems: "center",
           }}
@@ -471,21 +483,18 @@ export const FixedTrain: FC<props> = ({
         </TouchableOpacity>
         <TouchableOpacity
           style={{
-          position: "absolute",
-          top: "100%",
-          right: 0,
             flexDirection: "row",
             alignItems: "center",
           }}
           onPress={() => {
             LayoutAnimation.configureNext({
-            duration: 500,
+              duration: 200,
-            update: { type: "spring", springDamping: 0.7 },
+              update: { type: "easeInEaseOut", springDamping: 0.4 },
             });
-          if (displaySize === 50) {
+            if (displaySize === 76) {
-            setDisplaySize(200);
+              setDisplaySize(226);
             } else {
-            setDisplaySize(50);
+              setDisplaySize(76);
             }
           }}
         >
@@ -512,10 +521,9 @@ export const FixedTrain: FC<props> = ({
               paddingHorizontal: 5,
               height: 26,
             }}
-          pointerEvents="none"
           >
             <Ionicons
-            name={displaySize == 50 ? "chevron-down" : "chevron-up"}
+              name={displaySize == 76 ? "chevron-down" : "chevron-up"}
               size={15}
               color="white"
             />
@@ -527,11 +535,12 @@ export const FixedTrain: FC<props> = ({
                 fontSize: 15,
               }}
             >
-            {displaySize == 50 ? "列車情報展開" : "列車情報縮小"}
+              {displaySize == 76 ? "列車情報展開" : "列車情報縮小"}
             </Text>
           </View>
         </TouchableOpacity>
       </View>
+    </View>
   );
 };