diff --git a/components/Menu/Carousel/CarouselTypeChanger.tsx b/components/Menu/Carousel/CarouselTypeChanger.tsx index 776f4d9..4f5b3ac 100644 --- a/components/Menu/Carousel/CarouselTypeChanger.tsx +++ b/components/Menu/Carousel/CarouselTypeChanger.tsx @@ -2,7 +2,13 @@ import React, { useRef } from "react"; import { View, TouchableOpacity, Text } from "react-native"; import Ionicons from "react-native-vector-icons/Ionicons"; -export const CarouselTypeChanger = ({ locationStatus, position, mapsRef }) => { +export const CarouselTypeChanger = ({ + locationStatus, + position, + mapsRef, + stationListMode, + setStationListMode,setSelectedCurrentStation +}) => { return ( { alignItems: "center", flexDirection: "row", marginHorizontal: 5, - borderRadius: 30, + borderTopLeftRadius: 20, + borderTopRightRadius: 20, + borderBottomLeftRadius: stationListMode == "position" ? 0 : 20, + borderBottomRightRadius: stationListMode == "position" ? 0 : 20, }} disabled={!locationStatus} onPress={() => { @@ -28,6 +37,7 @@ export const CarouselTypeChanger = ({ locationStatus, position, mapsRef }) => { }, 1000 ); + setStationListMode("position"); }} > { 現在地基準 + { + if (!position) return; + const { latitude, longitude } = position.coords; + mapsRef.current.animateToRegion( + { + latitude, + longitude, + latitudeDelta: 0.05, + longitudeDelta: 0.05, + }, + 1000 + ); + }} + > + + { alignItems: "center", flexDirection: "row", marginHorizontal: 5, - borderRadius: 30, + borderTopLeftRadius: 20, + borderTopRightRadius: 20, + borderBottomLeftRadius: stationListMode == "favorite" ? 0 : 20, + borderBottomRightRadius: stationListMode == "favorite" ? 0 : 20, }} onPress={() => { // お気に入りリスト更新 + setStationListMode("favorite"); + setSelectedCurrentStation(0); }} > diff --git a/menu.js b/menu.js index faf0d84..8778e8c 100644 --- a/menu.js +++ b/menu.js @@ -35,6 +35,7 @@ export default function Menu({ getCurrentTrain, scrollRef }) { const { bottom, left, right, top } = useSafeAreaInsets(); const tabBarHeight = useBottomTabBarHeight(); const [mapsOpacity, setMapsOpacity] = useState(false); + const [stationListMode, setStationListMode] = useState/*<"position"|"favorite">*/("position"); const mapsRef = useRef(null); const MapHeight = height - @@ -62,7 +63,7 @@ export default function Menu({ getCurrentTrain, scrollRef }) { const makeCurrentStation = (location) => { if (!originalStationList) return () => {}; const findStationEachLine = (selectLine) => { - const searchArea = 0.002; + const searchArea = stationListMode == "position" ? 0.1 : 0.002; const _calcDistance = (from, to) => { let lat = Math.abs(from.lat - to.lat); let lng = Math.abs(from.lng - to.lng); @@ -80,7 +81,9 @@ export default function Menu({ getCurrentTrain, scrollRef }) { let returnDataBase = lineList .map((d) => findStationEachLine(originalStationList[d])) - .filter((d) => d.length > 0) + .filter((d) => { + console.log(d); + return d.length > 0}) .reduce((pre, current) => { pre.push(...current); return pre; @@ -102,10 +105,17 @@ export default function Menu({ getCurrentTrain, scrollRef }) { const [allStationData, setAllStationData] = useState([]); useEffect(() => { + if(stationListMode == "position"){ + setAllStationData( + [currentStation].filter((d) => d != undefined) + ); + }else{ setAllStationData( [currentStation, ...favoriteStation].filter((d) => d != undefined) ); - }, [currentStation, favoriteStation]); + + } + }, [currentStation, favoriteStation,stationListMode]); useEffect(() => { if (allStationData.length == 0) { setSelectedCurrentStation(0); @@ -178,7 +188,7 @@ export default function Menu({ getCurrentTrain, scrollRef }) { }} onPress={() => alert("地図をタップ")} /> - + {allStationData.length != 0 && originalStationList.length != 0 && ( <>