SpecialTrainInfoをActionSheetに
This commit is contained in:
parent
27dde29010
commit
b108029868
51
components/ActionSheetComponents/SpecialTrainInfo.tsx
Normal file
51
components/ActionSheetComponents/SpecialTrainInfo.tsx
Normal 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>
|
||||
);
|
||||
};
|
@ -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 {};
|
||||
|
@ -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 }}>
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user