64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import { FC, useLayoutEffect, useState } from "react";
|
|
import { View, Text, TouchableOpacity } from "react-native";
|
|
import { getPDFViewURL } from "@/lib/getPdfViewURL";
|
|
import { ScrollView, SheetManager } from "react-native-actions-sheet";
|
|
|
|
type props = {
|
|
navigate: (screen: string, params?: object) => void;
|
|
};
|
|
type specialDataType = { address: string; text: string; description: string };
|
|
|
|
export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
|
|
const [specialData, setSpecialData] = useState<specialDataType[]>([]);
|
|
useLayoutEffect(() => {
|
|
fetch("https://n8n.haruk.in/webhook/sptrainfo")
|
|
.then((res) => res.json())
|
|
.then((data) => setSpecialData(data.data))
|
|
.catch((err) => console.log(err));
|
|
}, []);
|
|
|
|
const onPressItem: (d: specialDataType) => void = (d) => {
|
|
navigate("howto", {
|
|
info: getPDFViewURL("https://www.jr-shikoku.co.jp" + d.address),
|
|
goTo: "menu",
|
|
});
|
|
SheetManager.hide("SpecialTrainInfo");
|
|
};
|
|
|
|
return (
|
|
<View style={{ backgroundColor: "#0099CC" }}>
|
|
<View style={{ flexDirection: "row", alignItems: "center" }}>
|
|
<Text
|
|
style={{
|
|
fontSize: 30,
|
|
fontWeight: "bold",
|
|
color: "white",
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 5,
|
|
}}
|
|
>
|
|
臨時列車情報
|
|
</Text>
|
|
</View>
|
|
<ScrollView style={{ backgroundColor: "white" }}>
|
|
{specialData.map((d) => (
|
|
<TouchableOpacity
|
|
onPress={() => onPressItem(d)}
|
|
onLongPress={() => alert(d.description)}
|
|
key={d.address}
|
|
style={{
|
|
padding: 10,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: "#ccc",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Text style={{ color: "black", fontSize: 20 }}>{d.text}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|