SpecialTrainInfoをActionSheetに

This commit is contained in:
harukin-expo-dev-env 2025-04-11 10:22:40 +00:00
parent 27dde29010
commit b108029868
4 changed files with 65 additions and 13 deletions

View File

@ -0,0 +1,51 @@
import React, { useRef } from "react";
import { View, Platform } from "react-native";
import ActionSheet from "react-native-actions-sheet";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { SpecialTrainInfoBox } from "../Menu/SpecialTrainInfoBox";
export const SpecialTrainInfo = ({ payload }) => {
const { navigate } = payload;
const actionSheetRef = useRef(null);
const insets = useSafeAreaInsets();
return (
<ActionSheet
gestureEnabled
CustomHeaderComponent={<></>}
ref={actionSheetRef}
isModal={Platform.OS == "ios"}
containerStyle={
Platform.OS == "android"
? {
paddingBottom: insets.bottom,
}
: {}
}
useBottomSafeAreaPadding={Platform.OS == "android"}
>
<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>
<SpecialTrainInfoBox navigate={navigate} />
</View>
</ActionSheet>
);
};

View File

@ -4,11 +4,13 @@ import { JRSTraInfo } from "./JRSTraInfo";
import { StationDeteilView } from "./StationDeteilView";
import { TrainMenuLineSelector } from "./TrainMenuLineSelector";
import { TrainIconUpdate } from "./TrainIconUpdate";
import { SpecialTrainInfo } from "./SpecialTrainInfo";
registerSheet("EachTrainInfo", EachTrainInfo);
registerSheet("JRSTraInfo", JRSTraInfo);
registerSheet("StationDetailView", StationDeteilView);
registerSheet("TrainMenuLineSelector", TrainMenuLineSelector);
registerSheet("TrainIconUpdate", TrainIconUpdate);
registerSheet("SpecialTrainInfo", SpecialTrainInfo);
export {};

View File

@ -11,6 +11,7 @@ import Icon from "react-native-vector-icons/Entypo";
import { TextBox } from "../atom/TextBox";
import { TicketBox } from "../atom/TicketBox";
import { SpecialTrainInfoBox } from "./SpecialTrainInfoBox";
import { SheetManager } from "react-native-actions-sheet";
export const FixedContentBottom = (props) => {
return (
@ -51,7 +52,6 @@ export const FixedContentBottom = (props) => {
旅行ツアー
</TicketBox>
</View>
<SpecialTrainInfoBox navigate={props.navigate} />
<TextBox
backgroundColor="red"
flex={1}
@ -86,7 +86,9 @@ export const FixedContentBottom = (props) => {
backgroundColor="#0099CC"
flex={1}
onPressButton={() =>
Linking.openURL("https://www.jr-shikoku.co.jp/sp/index.html#menu-box")
SheetManager.show("SpecialTrainInfo", {
payload: { navigate: props.navigate },
})
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>

View File

@ -1,13 +1,14 @@
import { FC, useEffect, useState } from "react";
import { FC, useEffect, 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;
};
export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
const [specialData, setSpecialData] = useState([]);
useEffect(() => {
useLayoutEffect(() => {
fetch("https://n8n.haruk.in/webhook/sptrainfo")
.then((res) => res.json())
.then((data) => setSpecialData(data.data))
@ -17,10 +18,6 @@ export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
<View
style={{
backgroundColor: "#0099CC",
borderRadius: 10,
margin: 5,
borderWidth: 1,
borderColor: "black",
}}
>
<View style={{ flexDirection: "row", alignItems: "center" }}>
@ -29,17 +26,16 @@ export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
fontSize: 30,
fontWeight: "bold",
color: "white",
padding: 10,
paddingHorizontal: 10,
paddingVertical: 5,
}}
>
</Text>
</View>
<View
<ScrollView
style={{
backgroundColor: "white",
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
}}
>
{specialData.map((d) => (
@ -49,6 +45,7 @@ export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
info: getPDFViewURL("https://www.jr-shikoku.co.jp" + d.address),
goTo: "menu",
});
SheetManager.hide("SpecialTrainInfo");
}}
onLongPress={() => alert(d.description)}
key={d.address}
@ -63,7 +60,7 @@ export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
<Text style={{ color: "black", fontSize: 20 }}>{d.text}</Text>
</TouchableOpacity>
))}
</View>
</ScrollView>
</View>
);
};