検索ボックス候補機能を暫定作成

2025-09-23 14:45:51 +00:00
parent 8ddf3a3e8d
commit d36195df69
3 changed files with 325 additions and 128 deletions
--- a/components/StationDiagram/SearchBox/SearchInputSuggestBox.tsx
+++ b/components/StationDiagram/SearchBox/SearchInputSuggestBox.tsx
@@ -0,0 +1,164 @@
+import lineColorList from "@/assets/originData/lineColorList";
+import { useStationList } from "@/stateBox/useStationList";
+import { FC, useEffect, useState } from "react";
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  LayoutAnimation,
+} from "react-native";
+
+type hoge = {
+  trainNumber: string;
+  array: string;
+  name: string;
+  timeType: string;
+  time: string;
+}[];
+
+export const SearchInputSuggestBox: FC<{
+  input: string;
+  setInput: (f: string) => void;
+  currentStationDiagram: hoge;
+}> = ({ input, setInput, currentStationDiagram }) => {
+  const { getStationDataFromName } = useStationList();
+  const [stationList, setStationList] = useState<
+    {
+      stationName: string;
+      number: string[];
+    }[]
+  >([]);
+  const [listFiltered, setListFiltered] = useState<string>("");
+  const [filteredStationLine, setFilteredStationLine] = useState<string[]>([]);
+  useEffect(() => {
+    const x: { stationName: string; number: string[] }[] = [];
+    currentStationDiagram.forEach((d) => {
+      d.array.split("#").forEach((s) => {
+        if (s == "") return;
+        const [stationName, type, time] = s.split(",");
+        if (!x.find((item) => item.stationName === stationName)) {
+          if (!type?.includes("通")) {
+            const stationData = getStationDataFromName(stationName);
+            if (listFiltered === "その他") {
+              if (stationData.length === 0) {
+                x.push({
+                  stationName,
+                  number: stationData.map((item) => item.StationNumber),
+                });
+                return;
+              }
+            }
+            const filter = stationData.filter((s) => {
+              if (listFiltered === "") return true;
+              if (listFiltered === "その他") {
+                return !(
+                  s.StationNumber ? s.StationNumber.slice(0, 1) : ""
+                ).match(/[A-Z]/);
+              }
+              return (
+                s.StationNumber ? s.StationNumber.slice(0, 1) : ""
+              ).includes(listFiltered);
+            });
+            if (filter.length === 0) return;
+            x.push({
+              stationName,
+              number: stationData.map((item) => item.StationNumber),
+            });
+          }
+        }
+      });
+    });
+    setStationList(x);
+  }, [currentStationDiagram, listFiltered]);
+  useEffect(() => {
+    const filtered = stationList
+      .map((s) => s.number?.map((r) => (r ? r.slice(0, 1) : "")))
+      .flat();
+    const arrayB = Array.from(new Set(filtered));
+    setFilteredStationLine(arrayB.map((r) => (r !== "" ? r : "その他")));
+  }, [stationList]);
+  return (
+    <View
+      style={{
+        maxHeight: 200,
+        width: "100%",
+        backgroundColor: "#0099CC",
+        zIndex: 100,
+      }}
+    >
+      <Text>{input}</Text>
+      <ScrollView keyboardShouldPersistTaps="handled">
+        <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
+          {stationList.map(({ stationName, number }) => (
+            <TouchableOpacity
+              style={{
+                margin: 5,
+                padding: 5,
+                backgroundColor: "#eee",
+                borderRadius: 20,
+              }}
+              key={stationName + number.join(",")}
+              onPress={() => setInput(stationName)}
+            >
+              <Text>{stationName}</Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </ScrollView>
+      <View
+        style={{
+          flexDirection: "row",
+          flexWrap: "wrap",
+          borderTopColor: "#ccc",
+          borderTopWidth: 0.5,
+          paddingTop: 0,
+          marginTop: 10,
+        }}
+      >
+        <TouchableOpacity
+          style={{
+            margin: 5,
+            padding: 5,
+            backgroundColor: "#eee",
+            borderRadius: 5,
+          }}
+          key={"empty"}
+          onPress={() => {
+            LayoutAnimation.configureNext({
+              duration: 400,
+              update: { type: "easeInEaseOut", springDamping: 0.6 },
+            });
+            setListFiltered("");
+          }}
+        >
+          <Text>全て</Text>
+        </TouchableOpacity>
+        {filteredStationLine.map((line) => (
+          <TouchableOpacity
+            style={{
+              margin: 5,
+              padding: 5,
+              backgroundColor: lineColorList[line]
+                ? `${lineColorList[line]}`
+                : "#eee",
+              borderRadius: 5,
+            }}
+            key={line}
+            onPress={() => {
+              LayoutAnimation.configureNext({
+                duration: 400,
+                update: { type: "easeInEaseOut", springDamping: 0.6 },
+              });
+              setListFiltered(line);
+            }}
+          >
+            <Text style={{ color: lineColorList[line] ? `white` : "black" }}>
+              {line}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};