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

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,7 +72,23 @@ export const StationDiagramView: FC<props> = ({ route }) => {
         type: any;
         time: any;
       }[] = [];
-      Object.keys(allTrainDiagram).forEach((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(",");
+            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) => {
@@ -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" }}>
+      <KeyboardAvoidingView
-        <Switch value={showLastStop} onValueChange={setShowLastStop} />
+        behavior="padding"
-        <Text>当駅止</Text>
+        keyboardVerticalOffset={80}
-        <Switch value={isSpecial} onValueChange={setIsSpecial} />
+        enabled={Platform.OS === "ios"}
-        <Text>臨時</Text>
+      >
-        <Switch value={isOutOfService} onValueChange={setIsOutOfService} />
+        <View style={{ height: 35, flexDirection: "row" }}>
-        <Text>回送</Text>
+          <Switch value={showLastStop} onValueChange={setShowLastStop}
-        <Switch value={threw} onValueChange={setIsThrew} />
+            color="red"
-        <Text>通過</Text>
+            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);