検索モードの追加

components/Menu/Carousel/CarouselBox.tsx

@@ -104,7 +104,7 @@ export const CarouselBox = ({
               }}
             >
               <Text style={{ color: "#0099CC", fontSize: 20 }}>
-                {!!isSearchMode ? "路線検索モードです。上に並んでいる路線を選んでみましょう！" :stationListMode == "position"
+                {!!isSearchMode ? "路線検索モードです。入力欄に駅名やナンバリングを入力したり、上に並んでいる路線を選んでみましょう！" :stationListMode == "position"
                   ? "現在地の近くに駅がありません。"
                   : "お気に入りリストがありません。お気に入りの駅を追加しよう！"}
               </Text>

components/Menu/Carousel/CarouselTypeChanger.tsx

@@ -25,6 +25,10 @@ export const CarouselTypeChanger = ({
   setMapMode,
   isSearchMode,
   setisSearchMode,
+  listUpStation,
+  setListUpStation,
+              input,
+              setInput
 }) => {
   const tabBarHeight = useBottomTabBarHeight();
   const { height, width } = useWindowDimensions();
@@ -62,6 +66,8 @@ export const CarouselTypeChanger = ({
       <SearchUnitBox
         isSearchMode={isSearchMode}
         setisSearchMode={setisSearchMode}
+        input={input}
+        setInput={setInput}
       />
       <TouchableOpacity
         style={{

components/Menu/RailScope/SearchUnitBox.tsx

@@ -12,9 +12,13 @@ import Ionicons from "react-native-vector-icons/Ionicons";
 import { useWindowDimensions } from "react-native";
 import lineColorList from "@/assets/originData/lineColorList";
 import { lineList_LineWebID, stationIDPair } from "@/lib/getStationList";
-export const SearchUnitBox = ({ isSearchMode, setisSearchMode, }) => {
+export const SearchUnitBox = ({
+  isSearchMode,
+  setisSearchMode,
+  input,
+  setInput,
+}) => {
   const { height, width } = useWindowDimensions();
-  const [input, setInput] = React.useState("");
   return (
     <>
       <TouchableOpacity
@@ -40,25 +44,32 @@ export const SearchUnitBox = ({ isSearchMode, setisSearchMode, }) => {
       >
         {!isSearchMode && <Ionicons name="search" size={30} color="white" />}
         {!!isSearchMode && (
-          <View style={{ backgroundColor: "#0099CC",flexDirection:"column",display:"flex",flex:1 }}>
+          <View
-              <View
+            style={{
-                style={{
+              backgroundColor: "#0099CC",
-                  backgroundColor: "white",
+              flexDirection: "column",
-                  borderRadius: 25,
+              display: "flex",
-                  height: 30,
+              flex: 1,
-                  paddingRight: 10,
+            }}
-                  paddingLeft: 10,
+          >
-                  flex: 1,
+            <View
-                }}
+              style={{
-              >
+                backgroundColor: "white",
-                <TextInput
+                borderRadius: 25,
-                  placeholder="駅名を入力してフィルタリングします。"
+                height: 30,
-                  onEndEditing={() => {}}
+                paddingRight: 10,
-                  onChange={(ret) => setInput(ret.nativeEvent.text)}
+                paddingLeft: 10,
-                  value={input}
+                flex: 1,
-                  style={{ flex: 1 }}
+              }}
-                />
+            >
-              </View>
+              <TextInput
+                placeholder="駅名や駅ナンバリングを入力してフィルタリングします。"
+                onEndEditing={() => {}}
+                onChange={(ret) => setInput(ret.nativeEvent.text)}
+                value={input}
+                style={{ flex: 1 }}
+              />
+            </View>
             <View style={{ flexDirection: "row", alignItems: "center" }}>
               <TouchableOpacity
                 onPress={() => {

menu.js

@@ -42,7 +42,7 @@ export default function Menu(props) {
   const { scrollRef, mapHeight, MapFullHeight, mapMode, setMapMode } = props;
   const { navigate, addListener, isFocused } = useNavigation();
   const { favoriteStation } = useFavoriteStation();
-  const { originalStationList } = useStationList();
+  const { originalStationList,getStationDataFromNameBase } = useStationList();
   const { height, width } = useWindowDimensions();
   const { bottom, left, right, top } = useSafeAreaInsets();
   const tabBarHeight = useBottomTabBarHeight();
@@ -172,25 +172,31 @@ export default function Menu(props) {
 
   const [listUpStation, setListUpStation] = useState([]);
   const [isSearchMode, setisSearchMode] = useState(false);
+  const [input, setInput] = React.useState("");
   useLayoutEffect(() => {
     if (!!isSearchMode) {
       const returnData = [];
-      Object.keys(lineList_LineWebID).forEach((d, indexBase) => {
+      if (!input || input == "") {
-        originalStationList[d].forEach((D, index) => {
+        Object.keys(lineList_LineWebID).forEach((d, indexBase) => {
-          if (
+          originalStationList[d].forEach((D, index) => {
-            isSearchMode &&
+            if (
-            isSearchMode != stationIDPair[lineList_LineWebID[d]]
+              isSearchMode &&
-          )
+              isSearchMode != stationIDPair[lineList_LineWebID[d]]
-            return;
+            )
-          const latlng = [D.lat, D.lng];
+              return;
-          if (latlng.length == 0) return null;
+            const latlng = [D.lat, D.lng];
-          if (D.StationNumber == undefined) {
+            if (latlng.length == 0) return null;
-            return null;
+            if (D.StationNumber == undefined) {
-          }
+              return null;
-          returnData.push([D]);
+            }
+            returnData.push([D]);
+          });
         });
-      });
+        if (JSON.stringify(returnData) == JSON.stringify(listUpStation)) return;
-      if (JSON.stringify(returnData) == JSON.stringify(listUpStation)) return;
+      }else{
+        const hoge = getStationDataFromNameBase(input);
+        hoge.forEach(d=>returnData.push([d]));
+      }
       setListUpStation(returnData);
     } else if (stationListMode == "position") {
       const returnData = nearPositionStation.filter((d) => d != undefined);
@@ -290,7 +296,7 @@ export default function Menu(props) {
       >
         <MapView
           ref={mapsRef}
-          style={{ width: "100%", height:( mapMode ? MapFullHeight : mapHeight) }}
+          style={{ width: "100%", height: mapMode ? MapFullHeight : mapHeight }}
           showsUserLocation={true}
           loadingEnabled={true}
           showsMyLocationButton={false}
@@ -371,6 +377,10 @@ export default function Menu(props) {
               setMapMode,
               isSearchMode,
               setisSearchMode,
+              listUpStation,
+              setListUpStation,
+              input,
+              setInput,
             }}
           />
         )}
@@ -386,7 +396,7 @@ export default function Menu(props) {
                 listIndex,
                 navigate,
                 stationListMode,
-                isSearchMode
+                isSearchMode,
               }}
             />
             {listUpStation[listIndex] && (
@@ -416,6 +426,10 @@ export default function Menu(props) {
             setMapMode,
             isSearchMode,
             setisSearchMode,
+            listUpStation,
+            setListUpStation,
+            input,
+            setInput,
           }}
         />
       )}

stateBox/useStationList.tsx

@@ -16,6 +16,7 @@ type initialStateType = {
   setOriginalStationList: React.Dispatch<React.SetStateAction<any[]>>;
   getStationDataFromName: (id: string) => any[];
   getStationDataFromId: (id: string) => any[];
+  getStationDataFromNameBase: (name: string) => any[];
   stationList: any[];
   getInjectJavascriptAddress: (StationNumber: string) => string;
 };
@@ -24,6 +25,7 @@ const initialState = {
   setOriginalStationList: () => {},
   getStationDataFromName: () => [],
   getStationDataFromId: () => [],
+  getStationDataFromNameBase: () => [],
   stationList: [],
   getInjectJavascriptAddress: (StationNumber: string) => "",
 };
@@ -66,6 +68,23 @@ export const StationListProvider: FC<Props> = ({ children }) => {
     });
     return returnArray;
   };
+
+  const getStationDataFromNameBase: (name: string) => any[] = (name) => {
+    const returnArray = [];
+    Object.keys(originalStationList).forEach((key) => {
+      originalStationList[key].forEach((station) => {
+        if (!station.StationNumber) return;
+        if (typeof station.StationNumber === "string" && station.StationNumber.includes(name)) {
+          if (!!station.jslodApi) returnArray.push(station);
+        }
+        else if (typeof station.Station_JP === "string" && station.Station_JP.includes(name)) {
+          if (!!station.jslodApi) returnArray.push(station);
+        }
+      });
+    });
+    return returnArray;
+  };
+
   const [stationList, setStationList] = useState<any[][]>([[]]);
   useEffect(() => {
     if (originalStationList.length === 0) return;
@@ -113,6 +132,7 @@ export const StationListProvider: FC<Props> = ({ children }) => {
         setOriginalStationList,
         getStationDataFromName,
         getStationDataFromId,
+        getStationDataFromNameBase,
         stationList,
         getInjectJavascriptAddress,
       }}