diff --git a/App.js b/App.js index f8e7f4b..aa15106 100644 --- a/App.js +++ b/App.js @@ -19,6 +19,7 @@ import "./components/ActionSheetComponents/sheets.js"; import { TrainDelayDataProvider } from "./stateBox/useTrainDelayData.js"; import { SafeAreaProvider } from "react-native-safe-area-context"; import { DeviceOrientationChangeProvider } from "./stateBox/useDeviceOrientationChange.js"; +import { TrainMenuProvider } from "./stateBox/useTrainMenu.js"; LogBox.ignoreLogs([ "ViewPropTypes will be removed", "ColorPropType will be removed", @@ -42,9 +43,11 @@ export default function App() { - - - + + + + + diff --git a/Top.js b/Top.js index 76556d5..5f3438d 100644 --- a/Top.js +++ b/Top.js @@ -14,6 +14,7 @@ import { optionData } from "./lib/stackOption.js"; import { useNavigation } from "@react-navigation/native"; import { useCurrentTrain } from "./stateBox/useCurrentTrain.js"; import { AS } from "./storageControl.js"; +import { useTrainMenu } from "./stateBox/useTrainMenu"; const Stack = createStackNavigator(); export const Top = ({ navigationRef }) => { const { webview, getCurrentTrain } = useCurrentTrain(); @@ -21,7 +22,7 @@ export const Top = ({ navigationRef }) => { const { navigate, addListener } = navigation; //地図用 - const [mapsStationData, setMapsStationData] = useState(undefined); + const { mapsStationData, setMapsStationData } = useTrainMenu(); useEffect(() => { getStationList2().then(setMapsStationData); diff --git a/components/ActionSheetComponents/TrainMenuLineSelector.js b/components/ActionSheetComponents/TrainMenuLineSelector.js new file mode 100644 index 0000000..77562de --- /dev/null +++ b/components/ActionSheetComponents/TrainMenuLineSelector.js @@ -0,0 +1,147 @@ +import React, { useEffect, useRef } from "react"; +import { + View, + LayoutAnimation, + ScrollView, + Linking, + Text, + TouchableOpacity, + Platform, + BackHandler, +} from "react-native"; +import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"; +import ActionSheet, { + SheetManager, + useScrollHandlers, +} from "react-native-actions-sheet"; +import LottieView from "lottie-react-native"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; +import ViewShot from "react-native-view-shot"; +import * as Sharing from "expo-sharing"; +import { useTrainDelayData } from "../../stateBox/useTrainDelayData"; +import { useTrainMenu } from "../../stateBox/useTrainMenu"; +import lineColorList from "../../assets/originData/lineColorList"; +import { stationIDPair } from "../../lib/getStationList2"; +import { lineListPair } from "../../lib/getStationList"; + +export const TrainMenuLineSelector = () => { + const { getTime, delayData, loadingDelayData, setLoadingDelayData } = + useTrainDelayData(); + const { + selectedLine, + setSelectedLine, + mapsStationData: stationData, + setMapsStationData, + } = useTrainMenu(); + const actionSheetRef = useRef(null); + const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef); + const insets = useSafeAreaInsets(); + const viewShot = useRef(null); + const platformIs = Platform.OS == "android"; + return ( + } + ref={actionSheetRef} + isModal={Platform.OS == "ios"} + containerStyle={platformIs ? { paddingBottom: insets.bottom } : {}} + useBottomSafeAreaPadding={platformIs} + > + + + + + + + {Object.keys(stationData).map((d) => ( + { + SheetManager.hide("TrainMenuLineSelector"); + setSelectedLine(selectedLine == d ? undefined : d); + }} + > + + + + + {stationIDPair[d]} + + + + + + + + {lineListPair[stationIDPair[d]]} + + + + + ))} + + ); +}; +const Handler = () => { + useEffect(() => { + const backAction = () => { + SheetManager.hide("TrainMenuLineSelector"); + return true; + }; + const backHandler = BackHandler.addEventListener( + "hardwareBackPress", + backAction + ); + return () => backHandler.remove(); + }, []); + return <>; +}; diff --git a/components/ActionSheetComponents/sheets.js b/components/ActionSheetComponents/sheets.js index da95b04..eaa7427 100644 --- a/components/ActionSheetComponents/sheets.js +++ b/components/ActionSheetComponents/sheets.js @@ -2,9 +2,11 @@ import { registerSheet } from "react-native-actions-sheet"; import { EachTrainInfo } from "./EachTrainInfo"; import { JRSTraInfo } from "./JRSTraInfo"; import { StationDeteilView } from "./StationDeteilView"; +import { TrainMenuLineSelector } from "./TrainMenuLineSelector"; registerSheet("EachTrainInfo", EachTrainInfo); registerSheet("JRSTraInfo", JRSTraInfo); registerSheet("StationDetailView", StationDeteilView); +registerSheet("TrainMenuLineSelector", TrainMenuLineSelector); export {}; diff --git a/components/trainMenu.js b/components/trainMenu.js index a7feba6..659ee7e 100644 --- a/components/trainMenu.js +++ b/components/trainMenu.js @@ -1,18 +1,21 @@ import React, { useRef, useState, useEffect } from "react"; -import { View, Text, TouchableOpacity, Linking } from "react-native"; +import { View, Text, TouchableOpacity, Linking, Platform } from "react-native"; import MapView, { Marker } from "react-native-maps"; -import { MaterialCommunityIcons } from "@expo/vector-icons"; +import Constants from "expo-constants"; +import { MaterialCommunityIcons, Ionicons } from "@expo/vector-icons"; import { useCurrentTrain } from "../stateBox/useCurrentTrain"; import { useNavigation } from "@react-navigation/native"; import lineColorList from "../assets/originData/lineColorList"; import { stationIDPair } from "../lib/getStationList2"; import { lineListPair } from "../lib/getStationList"; +import { SheetManager } from "react-native-actions-sheet"; +import { useTrainMenu } from "../stateBox/useTrainMenu"; export default function TrainMenu({ stationData, style }) { const { webview } = useCurrentTrain(); const mapRef = useRef(); const { navigate } = useNavigation(); const [stationPin, setStationPin] = useState([]); - const [selectedLine, setSelectedLine] = useState(undefined); + const { selectedLine, setSelectedLine } = useTrainMenu(); useEffect(() => { const stationPinData = []; Object.keys(stationData).map((d, indexBase) => @@ -40,32 +43,6 @@ export default function TrainMenu({ stationData, style }) { }, [stationPin]); return ( - {selectedLine && ( - - - {selectedLine ? lineListPair[stationIDPair[selectedLine]] : "全線"} - - - )} - + SheetManager.show("TrainMenuLineSelector")} + > + + {selectedLine + ? lineListPair[stationIDPair[selectedLine]] + : "ここを押して路線をフィルタリングできます　　▲"} + + 路線記号からフィルタリング @@ -116,8 +121,12 @@ export default function TrainMenu({ stationData, style }) { padding: 5, margin: 2, borderRadius: 10, + borderColor: "white", + borderWidth: 1, + borderStyle: "solid", alignItems: "center", opacity: selectedLine == d ? 1 : !selectedLine ? 1 : 0.5, + zIndex: 10, }} onPress={() => setSelectedLine(selectedLine == d ? undefined : d)} > @@ -166,26 +175,11 @@ export default function TrainMenu({ stationData, style }) { )} - {navigate && ( - navigate("Apps")} - > - - - 閉じる - - - - )} + navigate("Apps")} + top={Platform.OS == "ios" ? Constants.statusBarHeight : 0} + mapSwitch={"flex"} + /> ); } @@ -228,3 +222,39 @@ const MapPin = ({ index, indexBase, latlng, D, d, navigate, webview }) => { > ); }; + +const MapsButton = ({ onPress, top, mapSwitch }) => { + const styles = { + touch: { + position: "absolute", + top, + left: 10, + width: 50, + height: 50, + backgroundColor: "#0099CC", + borderColor: "white", + borderStyle: "solid", + borderWidth: 1, + borderRadius: 50, + alignContent: "center", + alignSelf: "center", + alignItems: "center", + display: mapSwitch, + }, + text: { + textAlign: "center", + width: "auto", + height: "auto", + textAlignVertical: "center", + fontWeight: "bold", + color: "white", + }, + }; + return ( + + + + + + ); +}; diff --git a/stateBox/useTrainMenu.js b/stateBox/useTrainMenu.js new file mode 100644 index 0000000..da93ada --- /dev/null +++ b/stateBox/useTrainMenu.js @@ -0,0 +1,31 @@ +import React, { createContext, useContext, useState } from "react"; +const initialState = { + selectedLine: undefined, + setSelectedLine: () => {}, + mapsStationData: undefined, + setMapsStationData: () => {}, +}; + +const TrainMenuContext = createContext(initialState); + +export const useTrainMenu = () => { + return useContext(TrainMenuContext); +}; + +export const TrainMenuProvider = ({ children }) => { + const [selectedLine, setSelectedLine] = useState(undefined); + const [mapsStationData, setMapsStationData] = useState(undefined); + + return ( + + {children} + + ); +};