駅名入力でフィルタリングする機能を追加

components/StationDiagram/StationDiagramView.tsx

@@ -1,12 +1,20 @@
 import { FC, useEffect, useState } from "react";
-import { View, Text, ScrollView } from "react-native";
+import {
+  View,
+  Text,
+  ScrollView,
+  TextInput,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { BigButton } from "../atom/BigButton";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
 import { ListView } from "@/components/StationDiagram/ListView";
 import dayjs from "dayjs";
 import { ExGridView } from "./ExGridView";
-import { Switch } from "react-native-elements";
+import { Switch, Input } from "react-native-elements";
 
 type props = {
   route: {
@@ -40,6 +48,8 @@ export const StationDiagramView: FC<props> = ({ route }) => {
   const { allTrainDiagram } = useAllTrainDiagram();
 
   const { navigate, addListener, goBack, canGoBack } = useNavigation();
+  const [keyBoardVisible, setKeyBoardVisible] = useState(false);
+  const [input, setInput] = useState("");
   type hoge = {
     trainNumber: string;
     array: string;
@@ -62,31 +72,47 @@ export const StationDiagramView: FC<props> = ({ route }) => {
         type: any;
         time: any;
       }[] = [];
-      Object.keys(allTrainDiagram).forEach((d) => {
-        allTrainDiagram[d]
-          .split("#")
-          .filter((d) => {
+      Object.keys(allTrainDiagram)
+        .filter((s) => {
+          const boolData = allTrainDiagram[s];
+          let isStop = false;
+          let isInput = false;
+
+          boolData.split("#").forEach((d) => {
             const [station, type, time] = d.split(",");
-            return station === stationName;
-          })
-          .forEach((x) => {
-            const [name, type, time] = x.split(",");
-            if (!name || !type || !time) return;
-            const arrayData = {
-              trainNumber: d,
-              array: allTrainDiagram[d],
-              name,
-              type,
-              time,
-            };
-            // //条件によってフィルタリング
-            if(!threw &&type && type.includes("通")) return;
-            if (!isOutOfService && !!d.match(/[A,B,R,H,E,T,L]/)) return;
-            if (!isSpecial && !!d.match(/9\d\d\d[D,M,S]/)) return;
-            if (!showLastStop && type && type.includes("着")) return;
-            returnDataArray.push(arrayData);
+            if (station === stationName) isStop = true;
+            if (station === input && type && !type.includes("通")) isInput = true;
           });
-      });
+          if (input && input.length > 0) {
+            return isInput && isStop;
+          }
+          return isStop;
+        })
+        .forEach((d) => {
+          allTrainDiagram[d]
+            .split("#")
+            .filter((d) => {
+              const [station, type, time] = d.split(",");
+              return station === stationName;
+            })
+            .forEach((x) => {
+              const [name, type, time] = x.split(",");
+              if (!name || !type || !time) return;
+              const arrayData = {
+                trainNumber: d,
+                array: allTrainDiagram[d],
+                name,
+                type,
+                time,
+              };
+              // //条件によってフィルタリング
+              if (!threw && type && type.includes("通")) return;
+              if (!isOutOfService && !!d.match(/[A,B,R,H,E,T,L]/)) return;
+              if (!isSpecial && !!d.match(/9\d\d\d[D,M,S]/)) return;
+              if (!showLastStop && type && type.includes("着")) return;
+              returnDataArray.push(arrayData);
+            });
+        });
       setCurrentStationDiagram(
         returnDataArray.sort((a, b) => {
           const adjustTime = (t: string) => {
@@ -104,7 +130,21 @@ export const StationDiagramView: FC<props> = ({ route }) => {
         })
       );
     }
-  }, [currentStation, showLastStop, isSpecial, isOutOfService, threw]);
+  }, [currentStation, showLastStop, isSpecial, isOutOfService, threw, input]);
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
+      setKeyBoardVisible(true);
+    });
+    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+      setKeyBoardVisible(false);
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <Text
@@ -129,17 +169,55 @@ export const StationDiagramView: FC<props> = ({ route }) => {
       >
         お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
       </Text> */}
-      <View style={{ height: 20, flexDirection: "row" }}>
-        <Switch value={showLastStop} onValueChange={setShowLastStop} />
-        <Text>当駅止</Text>
-        <Switch value={isSpecial} onValueChange={setIsSpecial} />
-        <Text>臨時</Text>
-        <Switch value={isOutOfService} onValueChange={setIsOutOfService} />
-        <Text>回送</Text>
-        <Switch value={threw} onValueChange={setIsThrew} />
-        <Text>通過</Text>
-      </View>
-      <BigButton onPress={() => goBack()} string="閉じる" />
+      <KeyboardAvoidingView
+        behavior="padding"
+        keyboardVerticalOffset={80}
+        enabled={Platform.OS === "ios"}
+      >
+        <View style={{ height: 35, flexDirection: "row" }}>
+          <Switch value={showLastStop} onValueChange={setShowLastStop}
+            color="red"
+            style={{ marginVertical: 5 }} />
+          <Text style={{ color: "white", fontSize: 20, marginVertical: 5 }}>当駅止</Text>
+          <Switch value={isSpecial} onValueChange={setIsSpecial}
+            color="red"
+            style={{ marginVertical: 5 }} />
+          <Text style={{ color: "white", fontSize: 20, marginVertical: 5 }}>臨時</Text>
+          <Switch value={isOutOfService} onValueChange={setIsOutOfService}
+            color="red"
+            style={{ marginVertical: 5 }} />
+          <Text style={{ color: "white", fontSize: 20, marginVertical: 5 }}>回送</Text>
+          <Switch value={threw} onValueChange={setIsThrew}
+            color="red"
+            style={{ marginVertical: 5 }} />
+          <Text style={{ color: "white", fontSize: 20, marginVertical: 5 }}>通過</Text>
+        </View>
+        <View
+          style={{
+            height: 35,
+            margin: 5,
+            alignItems: "center",
+            backgroundColor: "#F4F4F4",
+            flexDirection: "row",
+            paddingLeft: 10,
+            paddingRight: 10,
+            borderRadius: 25,
+            borderColor: "#F4F4F4",
+          }}
+        >
+          <TextInput
+            placeholder="列番・列車名を入力してフィルタリングします。"
+            onFocus={() => setKeyBoardVisible(true)}
+            onEndEditing={() => {}}
+            onChange={(ret) => setInput(ret.nativeEvent.text)}
+            value={input}
+            style={{ flex: 1 }}
+          />
+        </View>
+      </KeyboardAvoidingView>
+      {keyBoardVisible || (
+        <BigButton onPress={() => goBack()} string="閉じる" />
+      )}
     </View>
   );
 };

stateBox/useAllTrainDiagram.js

@@ -6,6 +6,7 @@ const initialState = {
   allTrainDiagram: undefined,
   setAllTrainDiagram: () => {},
   allCustomTrainData: [],
+  keyList: [],
 };
 
 const AllTrainDiagramContext = createContext(initialState);