112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
import React from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
ScrollView,
|
|
StyleProp,
|
|
ViewStyle,
|
|
} from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { SheetManager } from "react-native-actions-sheet";
|
|
import LottieView from "lottie-react-native";
|
|
import { useTrainDelayData } from "@/stateBox/useTrainDelayData";
|
|
import dayjs from "dayjs";
|
|
export const JRSTraInfoBox = () => {
|
|
const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
|
|
useTrainDelayData();
|
|
const styles: { [key: string]: StyleProp<ViewStyle> } = {
|
|
touch: {
|
|
backgroundColor: "#0099CC",
|
|
borderRadius: 5,
|
|
margin: 10,
|
|
borderColor: "black",
|
|
borderWidth: 2,
|
|
overflow: "hidden",
|
|
},
|
|
scroll: {
|
|
backgroundColor: "#0099CC",
|
|
borderRadius: 5,
|
|
maxHeight: 300,
|
|
},
|
|
bottom: {
|
|
position: "absolute",
|
|
top: 250,
|
|
alignItems: "center",
|
|
width: "100%",
|
|
height: 50,
|
|
backgroundColor: "#007FCC88",
|
|
},
|
|
box: {
|
|
padding: 10,
|
|
backgroundColor: "white",
|
|
borderBottomLeftRadius: 5,
|
|
borderBottomRightRadius: 5,
|
|
},
|
|
};
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={() => SheetManager.show("JRSTraInfo")}
|
|
style={styles.touch}
|
|
>
|
|
<ScrollView scrollEnabled={false} style={styles.scroll}>
|
|
<View
|
|
style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
|
|
>
|
|
<Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
|
|
列車遅延速報EX
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
<Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
|
|
{getTime ? dayjs(getTime).format("HH:mm") : NaN}
|
|
</Text>
|
|
<Ionicons
|
|
name="reload"
|
|
color="white"
|
|
size={30}
|
|
style={{ margin: 5 }}
|
|
onPress={() => setLoadingDelayData(true)}
|
|
/>
|
|
</View>
|
|
<View style={styles.box}>
|
|
{loadingDelayData ? (
|
|
<View style={{ alignItems: "center" }}>
|
|
<LottieView
|
|
autoPlay
|
|
loop
|
|
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
|
|
source={require("@/assets/51690-loading-diamonds.json")}
|
|
/>
|
|
</View>
|
|
) : delayData ? (
|
|
delayData.map((d, index, array) => {
|
|
let data = d.split(" ");
|
|
return (
|
|
<View
|
|
style={{ flexDirection: "row" }}
|
|
key={data[1] + "key" + index}
|
|
>
|
|
<Text style={{ flex: 15, fontSize: 18 }}>
|
|
{data[0].replace("\n", "")}
|
|
</Text>
|
|
<Text style={{ flex: 5, fontSize: 18 }}>{data[1]}</Text>
|
|
<Text style={{ flex: 6, fontSize: 18 }}>{data[3]}</Text>
|
|
</View>
|
|
);
|
|
})
|
|
) : (
|
|
<Text>現在、5分以上の遅れはありません。</Text>
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
<View style={styles.bottom}>
|
|
<View style={{ flex: 1 }} />
|
|
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
|
詳細を見る
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|