地図の路線フィルタリング機能の強化

2024-05-27 16:39:15 +00:00
parent 43b911c23f
commit c05824c3d0
6 changed files with 267 additions and 53 deletions
--- a/components/ActionSheetComponents/TrainMenuLineSelector.js
+++ b/components/ActionSheetComponents/TrainMenuLineSelector.js
@@ -0,0 +1,147 @@
+import React, { useEffect, useRef } from "react";
+import {
+  View,
+  LayoutAnimation,
+  ScrollView,
+  Linking,
+  Text,
+  TouchableOpacity,
+  Platform,
+  BackHandler,
+} from "react-native";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import ActionSheet, {
+  SheetManager,
+  useScrollHandlers,
+} from "react-native-actions-sheet";
+import LottieView from "lottie-react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import ViewShot from "react-native-view-shot";
+import * as Sharing from "expo-sharing";
+import { useTrainDelayData } from "../../stateBox/useTrainDelayData";
+import { useTrainMenu } from "../../stateBox/useTrainMenu";
+import lineColorList from "../../assets/originData/lineColorList";
+import { stationIDPair } from "../../lib/getStationList2";
+import { lineListPair } from "../../lib/getStationList";
+
+export const TrainMenuLineSelector = () => {
+  const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
+    useTrainDelayData();
+  const {
+    selectedLine,
+    setSelectedLine,
+    mapsStationData: stationData,
+    setMapsStationData,
+  } = useTrainMenu();
+  const actionSheetRef = useRef(null);
+  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
+  const insets = useSafeAreaInsets();
+  const viewShot = useRef(null);
+  const platformIs = Platform.OS == "android";
+  return (
+    <ActionSheet
+      gestureEnabled
+      CustomHeaderComponent={<></>}
+      ref={actionSheetRef}
+      isModal={Platform.OS == "ios"}
+      containerStyle={platformIs ? { paddingBottom: insets.bottom } : {}}
+      useBottomSafeAreaPadding={platformIs}
+    >
+      <Handler />
+      <View
+        style={{
+          backgroundColor: "#0099CC",
+          borderTopRadius: 5,
+          borderColor: "dark",
+          borderWidth: 1,
+        }}
+      >
+        <View style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}>
+          <View
+            style={{
+              height: 6,
+              width: 45,
+              borderRadius: 100,
+              backgroundColor: "#f0f0f0",
+              marginVertical: 10,
+              alignSelf: "center",
+            }}
+          />
+        </View>
+      </View>
+      {Object.keys(stationData).map((d) => (
+        <TouchableOpacity
+          style={{
+            flexDirection: "row",
+            backgroundColor: selectedLine == d ? "#0099CC33" : "white",
+          }}
+          onPress={() => {
+            SheetManager.hide("TrainMenuLineSelector");
+            setSelectedLine(selectedLine == d ? undefined : d);
+          }}
+        >
+          <View
+            style={{
+              width: 35,
+              position: "relative",
+              marginHorizontal: 15,
+              flexDirection: "row",
+              height: "101%",
+            }}
+          >
+            <View
+              style={{
+                backgroundColor: lineColorList[stationIDPair[d]],
+                flex: 1,
+              }}
+            >
+              <View style={{ flex: 1 }} />
+              <Text
+                style={{
+                  color: "white",
+                  textAlign: "center",
+                  fontSize: 12,
+                  fontWeight: "bold",
+                }}
+              >
+                {stationIDPair[d]}
+              </Text>
+              <View style={{ flex: 1 }} />
+            </View>
+          </View>
+
+          <View
+            style={{
+              padding: 8,
+              flexDirection: "row",
+              borderBottomWidth: 1,
+              borderBottomColor: "#f0f0f0",
+              flex: 1,
+              alignContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Text style={{ fontSize: 20 }}>
+              {lineListPair[stationIDPair[d]]}
+            </Text>
+            <View style={{ flex: 1 }} />
+          </View>
+        </TouchableOpacity>
+      ))}
+    </ActionSheet>
+  );
+};
+const Handler = () => {
+  useEffect(() => {
+    const backAction = () => {
+      SheetManager.hide("TrainMenuLineSelector");
+      return true;
+    };
+    const backHandler = BackHandler.addEventListener(
+      "hardwareBackPress",
+      backAction
+    );
+    return () => backHandler.remove();
+  }, []);
+  return <></>;
+};