143 lines
4.3 KiB
JavaScript
143 lines
4.3 KiB
JavaScript
import React, { useEffect, useRef } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
Platform,
|
|
BackHandler,
|
|
} from "react-native";
|
|
import ActionSheet, { SheetManager } from "react-native-actions-sheet";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { useTrainMenu } from "../../stateBox/useTrainMenu";
|
|
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
|
|
import lineColorList from "../../assets/originData/lineColorList";
|
|
import { stationIDPair } from "../../lib/getStationList2";
|
|
import { lineListPair } from "../../lib/getStationList";
|
|
|
|
export const TrainMenuLineSelector = () => {
|
|
const {
|
|
selectedLine,
|
|
setSelectedLine,
|
|
mapsStationData: stationData,
|
|
} = useTrainMenu();
|
|
const { webview } = useCurrentTrain();
|
|
const actionSheetRef = useRef(null);
|
|
const insets = useSafeAreaInsets();
|
|
const platformIs = Platform.OS == "android";
|
|
return (
|
|
<ActionSheet
|
|
gestureEnabled
|
|
CustomHeaderComponent={<></>}
|
|
ref={actionSheetRef}
|
|
isModal={Platform.OS == "ios"}
|
|
containerStyle={platformIs ? { paddingBottom: insets.bottom } : {}}
|
|
useBottomSafeAreaPadding={platformIs}
|
|
>
|
|
<Handler />
|
|
<View style={{ height: 26, width: "100%", backgroundColor: "white" }}>
|
|
<View
|
|
style={{
|
|
height: 6,
|
|
width: 45,
|
|
borderRadius: 100,
|
|
backgroundColor: "#f0f0f0",
|
|
marginVertical: 10,
|
|
alignSelf: "center",
|
|
}}
|
|
/>
|
|
</View>
|
|
{Object.keys(stationData).map((d) => (
|
|
<TouchableOpacity
|
|
style={{
|
|
flexDirection: "row",
|
|
backgroundColor: selectedLine == d ? "#0099CC33" : "white",
|
|
}}
|
|
onPress={() => {
|
|
SheetManager.hide("TrainMenuLineSelector");
|
|
const s = selectedLine == d ? undefined : d;
|
|
if(!s) return;
|
|
setSelectedLine(s);
|
|
Object.keys(stationData).forEach((data, indexBase) => {
|
|
stationData[data].forEach((D, index) => {
|
|
if (!D.StationMap) return null;
|
|
if (s && s != data) return;
|
|
const latlng = D.StationMap.replace(
|
|
"https://www.google.co.jp/maps/place/",
|
|
""
|
|
).split(",");
|
|
if (latlng.length == 0) return null;
|
|
if (index == 0 ) {
|
|
webview.current
|
|
?.injectJavaScript(`MoveDisplayStation('${data}_${D.MyStation}_${D.Station_JP}');
|
|
document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`);
|
|
}
|
|
});
|
|
});
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
width: 35,
|
|
position: "relative",
|
|
marginHorizontal: 15,
|
|
flexDirection: "row",
|
|
height: "101%",
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
backgroundColor: lineColorList[stationIDPair[d]],
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Text
|
|
style={{
|
|
color: "white",
|
|
textAlign: "center",
|
|
fontSize: 12,
|
|
fontWeight: "bold",
|
|
}}
|
|
>
|
|
{stationIDPair[d]}
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</View>
|
|
</View>
|
|
|
|
<View
|
|
style={{
|
|
padding: 8,
|
|
flexDirection: "row",
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: "#f0f0f0",
|
|
flex: 1,
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 20 }}>
|
|
{lineListPair[stationIDPair[d]]}
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
))}
|
|
</ActionSheet>
|
|
);
|
|
};
|
|
const Handler = () => {
|
|
useEffect(() => {
|
|
const backAction = () => {
|
|
SheetManager.hide("TrainMenuLineSelector");
|
|
return true;
|
|
};
|
|
const backHandler = BackHandler.addEventListener(
|
|
"hardwareBackPress",
|
|
backAction
|
|
);
|
|
return () => backHandler.remove();
|
|
}, []);
|
|
return <></>;
|
|
};
|