FixedBoxを拡張可能に変更

components/Apps/FixedPositionBox/FixedStationBox.tsx

@@ -15,17 +15,27 @@ import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
 import { useAreaInfo } from "@/stateBox/useAreaInfo";
 import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
 import { useStationList } from "@/stateBox/useStationList";
+import { Ionicons } from "@expo/vector-icons";
+import { useNavigation } from "@react-navigation/native";
 
 import { FC, useEffect, useState } from "react";
-import { Text, TouchableOpacity, View } from "react-native";
+import { LayoutAnimation, Text, TouchableOpacity, View } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
 
 type props = {
   stationID: string;
+  displaySize: number;
+  setDisplaySize: (size: number) => void;
 };
 
-export const FixedStation: FC<props> = ({ stationID }) => {
+export const FixedStation: FC<props> = ({
+  stationID,
+  displaySize,
+  setDisplaySize,
+}) => {
   const { currentTrain, setFixedPosition } = useCurrentTrain();
   const { getStationDataFromId } = useStationList();
+  const { navigate } = useNavigation();
   const [station, setStation] = useState<StationProps[]>([]);
   useEffect(() => {
     const data = getStationDataFromId(stationID);
@@ -88,9 +98,23 @@ export const FixedStation: FC<props> = ({ stationID }) => {
 
   return (
     <TouchableOpacity
-      style={{ flex: 1, flexDirection: "row" }}
+      style={{
+        flex: 1,
+        flexDirection: "row",
+        borderBottomColor: lineColor,
+        borderBottomWidth: 2,
+        position: "relative",
+      }}
+      activeOpacity={1}
       onPress={() => {
-        setFixedPosition({ type: null, value: null });
+        const payload = {
+          currentStation: station,
+          navigate,
+          goTo: "menu",
+          onExit: () => SheetManager.hide("StationDetailView"),
+        };
+        //@ts-ignore
+        SheetManager.show("StationDetailView", { payload });
       }}
     >
       <View
@@ -157,7 +181,7 @@ export const FixedStation: FC<props> = ({ stationID }) => {
             flex: 1,
           }}
         >
-          <Text style={{ fontSize: 20 }}>次の発車予定：</Text>
+          <Text style={{ fontSize: 18 }}>次の発車予定：</Text>
         </View>
       </View>
 
@@ -176,22 +200,130 @@ export const FixedStation: FC<props> = ({ stationID }) => {
             <FixedStationBoxEachTrain
               d={d}
               station={station[0]}
+              displaySize={displaySize}
               key={d.train + "-fixedStationBox"}
             />
           ))
         ) : (
           <View style={{ backgroundColor: "white", flex: 1 }}>
-            <Text style={{ fontSize:  parseInt("11%") }}>
+            <Text style={{ fontSize: parseInt("11%") }}>
               当駅を発着する走行中の列車はありません。
             </Text>
           </View>
         )}
       </View>
+      <TouchableOpacity
+        style={{
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          flexDirection: "row",
+          alignItems: "center",
+        }}
+        onPress={() => {
+          setFixedPosition({ type: null, value: null });
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            backgroundColor: lineColor,
+            paddingHorizontal: 5,
+          }}
+        >
+          <Ionicons name="lock-closed" size={15} color="white" />
+          <Text
+            style={{
+              color: "white",
+              fontSize: 15,
+              paddingRight: 5,
+            }}
+          >
+            駅位置ロック中
+          </Text>
+          <Ionicons name="close" size={15} color="white" />
+        </View>
+
+        <View
+          style={{
+            backgroundColor: "#0000",
+            width: 6,
+            borderLeftColor: lineColor,
+            borderTopColor: lineColor,
+            borderBottomColor: "#0000",
+            borderRightColor: "#0000",
+            borderBottomWidth: 22,
+            borderLeftWidth: 10,
+            borderRightWidth: 0,
+            borderTopWidth: 0,
+            height: 20,
+          }}
+        />
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={{
+          position: "absolute",
+          top: "100%",
+          right: 0,
+          flexDirection: "row",
+          alignItems: "center",
+        }}
+        onPress={() => {
+          LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+          if (displaySize === 50) {
+            setDisplaySize(200);
+          } else {
+            setDisplaySize(50);
+          }
+        }}
+      >
+        <View
+          style={{
+            backgroundColor: "#0000",
+            width: 6,
+            borderLeftColor: "#0000",
+            borderTopColor: lineColor,
+            borderBottomColor: "#0000",
+            borderRightColor: lineColor,
+            borderBottomWidth: 22,
+            borderLeftWidth: 0,
+            borderRightWidth: 10,
+            borderTopWidth: 0,
+            height: 20,
+          }}
+        />
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            backgroundColor: lineColor,
+            paddingHorizontal: 5,
+          }}
+          pointerEvents="none"
+        >
+          <Ionicons
+            name={displaySize == 50 ? "chevron-down" : "chevron-up"}
+            size={15}
+            color="white"
+          />
+          <Text
+            style={{
+              color: "white",
+              paddingRight: 5,
+              backgroundColor: lineColor,
+              fontSize: 15,
+            }}
+          >
+            {displaySize == 50 ? "時刻表を展開する" : "時刻表を縮小する"}
+          </Text>
+        </View>
+      </TouchableOpacity>
     </TouchableOpacity>
   );
 };
 
-const FixedStationBoxEachTrain = ({ d, station }) => {
+const FixedStationBoxEachTrain = ({ d, station, displaySize }) => {
   const { currentTrain } = useCurrentTrain();
   const { stationList } = useStationList();
   const { allCustomTrainData } = useAllTrainDiagram();
@@ -216,7 +348,7 @@ const FixedStationBoxEachTrain = ({ d, station }) => {
       style={{
         backgroundColor: "white",
         flexDirection: "row",
-        height: "33%",
+        height: displaySize == 50 ? "33%" : "7.5%",
         overflow: "visible",
       }}
     >