87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
import React, { FC, useEffect } from "react";
|
|
import { View, Text, ScrollView } from "react-native";
|
|
|
|
import Icon from "react-native-vector-icons/Entypo";
|
|
import { useFavoriteStation } from "../stateBox/useFavoriteStation";
|
|
import { useCurrentTrain } from "../stateBox/useCurrentTrain";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import { useTrainMenu } from "../stateBox/useTrainMenu";
|
|
import { FavoriteListItem } from "./atom/FavoriteListItem";
|
|
import { BigButton } from "./atom/BigButton";
|
|
import { useStationList } from "@/stateBox/useStationList";
|
|
export const FavoriteList: FC = () => {
|
|
const { favoriteStation } = useFavoriteStation();
|
|
const { webview } = useCurrentTrain();
|
|
const { navigate, addListener, goBack, canGoBack } = useNavigation();
|
|
const { mapsStationData: stationData } = useTrainMenu();
|
|
const { getInjectJavascriptAddress } = useStationList();
|
|
|
|
useEffect(() => {
|
|
const unsubscribe = addListener("tabPress", goToTrainMenu);
|
|
return unsubscribe;
|
|
}, [{ navigate, addListener }]);
|
|
|
|
const goToTrainMenu = (e) => {
|
|
e.preventDefault();
|
|
goBack();
|
|
};
|
|
return (
|
|
<View style={{ height: "100%", backgroundColor: "#0099CC" }}>
|
|
<Text
|
|
style={{
|
|
textAlign: "center",
|
|
fontSize: 20,
|
|
color: "white",
|
|
fontWeight: "bold",
|
|
paddingVertical: 10,
|
|
}}
|
|
>
|
|
位置情報クイック移動メニュー
|
|
</Text>
|
|
<ScrollView style={{ height: "100%", backgroundColor: "white" }}>
|
|
{favoriteStation
|
|
.map((currentStation) => {
|
|
return (
|
|
<FavoriteListItem
|
|
currentStation={currentStation}
|
|
onPress={() => {
|
|
const scriptString = getInjectJavascriptAddress(
|
|
currentStation[0].StationNumber
|
|
);
|
|
if (!scriptString) return;
|
|
webview.current?.injectJavaScript(scriptString);
|
|
goBack();
|
|
if (canGoBack()) goBack();
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
flex: 2,
|
|
flexDirection: "row",
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
marginVertical: 4,
|
|
}}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Text style={{ fontSize: 20 }}>移動する</Text>
|
|
<Icon name="chevron-right" size={20} />
|
|
</View>
|
|
</FavoriteListItem>
|
|
);
|
|
})}
|
|
</ScrollView>
|
|
<Text
|
|
style={{
|
|
backgroundColor: "white",
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
}}
|
|
>
|
|
お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
|
|
</Text>
|
|
<BigButton onPress={() => goBack()} string="閉じる" />
|
|
</View>
|
|
);
|
|
};
|