148 lines
4.1 KiB
JavaScript
148 lines
4.1 KiB
JavaScript
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 (
|
|
<ActionSheet
|
|
gestureEnabled
|
|
CustomHeaderComponent={<></>}
|
|
ref={actionSheetRef}
|
|
isModal={Platform.OS == "ios"}
|
|
containerStyle={platformIs ? { paddingBottom: insets.bottom } : {}}
|
|
useBottomSafeAreaPadding={platformIs}
|
|
>
|
|
<Handler />
|
|
<View
|
|
style={{
|
|
backgroundColor: "#0099CC",
|
|
borderTopRadius: 5,
|
|
borderColor: "dark",
|
|
borderWidth: 1,
|
|
}}
|
|
>
|
|
<View style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}>
|
|
<View
|
|
style={{
|
|
height: 6,
|
|
width: 45,
|
|
borderRadius: 100,
|
|
backgroundColor: "#f0f0f0",
|
|
marginVertical: 10,
|
|
alignSelf: "center",
|
|
}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
{Object.keys(stationData).map((d) => (
|
|
<TouchableOpacity
|
|
style={{
|
|
flexDirection: "row",
|
|
backgroundColor: selectedLine == d ? "#0099CC33" : "white",
|
|
}}
|
|
onPress={() => {
|
|
SheetManager.hide("TrainMenuLineSelector");
|
|
setSelectedLine(selectedLine == d ? undefined : d);
|
|
}}
|
|
>
|
|
<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 <></>;
|
|
};
|