harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

EachTrainInfoの可変を実装

Browse Source
This commit is contained in:
harukin-OneMix4 2024-02-07 00:12:27 +09:00
parent 576d9ae222
commit 49e9ed14bc
4 changed files with 444 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

347
components/ActionSheetComponents/EachTrainInfo.js
View File

@ -6,6 +6,7 @@ import {
Text, Text,
TouchableOpacity, TouchableOpacity,
Platform, Platform,
Animated,
} from "react-native"; } from "react-native";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import ActionSheet, { import ActionSheet, {
@ -24,6 +25,7 @@ import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
import { EachStopList } from "./EachTrainInfo/EachStopList"; import { EachStopList } from "./EachTrainInfo/EachStopList";
import { DataFromButton } from "./EachTrainInfo/DataFromButton"; import { DataFromButton } from "./EachTrainInfo/DataFromButton";
import { TrainDataView } from "./EachTrainInfo/TrainDataView"; import { TrainDataView } from "./EachTrainInfo/TrainDataView";
import { DynamicHeader } from "./EachTrainInfo/DynamicHeader";
export const EachTrainInfo = (props) => { export const EachTrainInfo = (props) => {
if (!props.payload) return <></>; if (!props.payload) return <></>;
@ -377,6 +379,8 @@ export const EachTrainInfo = (props) => {
}; };
const actionSheetRef = useRef(null); const actionSheetRef = useRef(null);
const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef); const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
const scrollOffsetY = useRef(new Animated.Value(0)).current;
return ( return (
<ActionSheet <ActionSheet
gestureEnabled={true} gestureEnabled={true}
@ -446,192 +450,102 @@ export const EachTrainInfo = (props) => {
/> />
)} )}
</View> </View>
{from == "AllTrainDiagramView" || ( <View style={{ maxHeight: heightPercentageToDP("70%") }}>
<ScrollView {from == "AllTrainDiagramView" || (
//onTouchStart={() => setActionSheetHorizonalScroll(true)} <DynamicHeader
//onScrollEndDrag={() => setActionSheetHorizonalScroll(false)} animHeaderValue={scrollOffsetY}
//onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
style={{
flexDirection: "row",
//width: widthPercentageToDP("200%"),
minHeight: 200,
height: heightPercentageToDP("20%"),
}}
horizontal
pagingEnabled
>
<TrainDataView
currentTrainData={currentTrainData} currentTrainData={currentTrainData}
currentPosition={currentPosition} currentPosition={currentPosition}
nearTrainIDList={nearTrainIDList} nearTrainIDList={nearTrainIDList}
openTrainInfo={openTrainInfo} openTrainInfo={openTrainInfo}
/> />
{/* <View )}
style={{
flexDirection: "column",
height: heightPercentageToDP("20%"),
flex: 1,
width: widthPercentageToDP("100%"),
}}
>
<View style={{ flex: 1, flexDirection: "row" }}>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "right",
}}
>
岡山
</Text>
</View>
<View <ScrollView
style={{ {...scrollHandlers}
flex: 3,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>
車両案内
</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "right",
}}
>
宇多津でうずしお号と連結
</Text>
</View>
</View>
<View style={{ flex: 1, flexDirection: "row" }}>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>
編成(使用車両：2700系)
</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "left",
}}
>
{"[<自][自>][アン自|指>][アン指|G>]"}
</Text>
</View>
</View>
</View> */}
</ScrollView>
)}
<ScrollView
{...scrollHandlers}
style={{
maxHeight: heightPercentageToDP(
from == "AllTrainDiagramView" ? "70%" : "50%"
),
backgroundColor: "white",
}}
stickyHeaderIndices={[0]}
>
<View
style={{ style={{
alignItems: "center",
backgroundColor: "white", backgroundColor: "white",
flexDirection: "row",
}} }}
index={0} stickyHeaderIndices={[0]}
scrollEventThrottle={16}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
{ useNativeDriver: false }
)}
> >
<View <View
style={{ style={{
padding: 8, alignItems: "center",
backgroundColor: "white",
flexDirection: "row", flexDirection: "row",
borderBottomWidth: 1,
borderBottomColor: "#f0f0f0",
flex: 1,
}} }}
index={0}
> >
<Text style={{ fontSize: 20 }}>停車駅</Text> <View
<View style={{ flex: 1 }} /> style={{
<View style={{ flexDirection: "row" }}> padding: 8,
{!isNaN(currentTrainData?.delay) && flexDirection: "row",
currentTrainData?.delay != 0 && ( borderBottomWidth: 1,
<Text borderBottomColor: "#f0f0f0",
style={{ flex: 1,
fontSize: 15, }}
color: "black", >
position: "absolute", <Text style={{ fontSize: 20 }}>停車駅</Text>
right: 110, <View style={{ flex: 1 }} />
textAlign: "right", <View style={{ flexDirection: "row" }}>
textDecorationLine: "line-through", {!isNaN(currentTrainData?.delay) &&
}} currentTrainData?.delay != 0 && (
> <Text
(定刻) style={{
</Text> fontSize: 15,
)} color: "black",
<Text position: "absolute",
style={{ right: 110,
fontSize: 20, textAlign: "right",
color: isNaN(currentTrainData?.delay) textDecorationLine: "line-through",
? "black" }}
: currentTrainData?.delay == 0 >
? "black" (定刻)
: "red", </Text>
width: 60, )}
}} <Text
> style={{
見込 fontSize: 20,
</Text> color: isNaN(currentTrainData?.delay)
<Text style={{ fontSize: 20, width: 50 }}></Text> ? "black"
: currentTrainData?.delay == 0
? "black"
: "red",
width: 60,
}}
>
見込
</Text>
<Text style={{ fontSize: 20, width: 50 }}></Text>
</View>
</View> </View>
</View> </View>
</View> {headStation && !isConcatNear && (
{headStation && !isConcatNear && ( <TouchableOpacity
<TouchableOpacity onPress={() => openBackTrainInfo(headStation)}
onPress={() => openBackTrainInfo(headStation)} style={{
style={{ padding: 10,
padding: 10, flexDirection: "row",
flexDirection: "row", borderColor: "blue",
borderColor: "blue", borderWidth: 1,
borderWidth: 1, margin: 10,
margin: 10, borderRadius: 5,
borderRadius: 5, alignItems: "center",
alignItems: "center", }}
}}
>
<Text
style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
> >
「本当の始発駅」を表示 <Text
</Text> style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
</TouchableOpacity> >
)} 「本当の始発駅」を表示
{/* <LottieView </Text>
</TouchableOpacity>
)}
{/* <LottieView
autoPlay autoPlay
loop loop
style={{ width: 150, height: 150, backgroundColor: "#fff" }} style={{ width: 150, height: 150, backgroundColor: "#fff" }}
@ -639,56 +553,59 @@ export const EachTrainInfo = (props) => {
/> />
<Text>ほげほげふがふが</Text> */} <Text>ほげほげふがふが</Text> */}
{trainData.map((i, index) => {trainData.map((i, index) =>
i.split(",")[1] == "提" ? ( i.split(",")[1] == "提" ? (
<DataFromButton i={i} /> <DataFromButton i={i} />
) : ( ) : (
<EachStopList <EachStopList
i={i} i={i}
index={index} index={index}
stationList={stationList} stationList={stationList}
points={points} points={points}
currentTrainData={currentTrainData} currentTrainData={currentTrainData}
openStationACFromEachTrainInfo={openStationACFromEachTrainInfo} openStationACFromEachTrainInfo={
/> openStationACFromEachTrainInfo
) }
)} />
{tailStation && !isConcatNear && ( )
<TouchableOpacity )}
onPress={() => openBackTrainInfo(tailStation)} {tailStation && !isConcatNear && (
style={{ <TouchableOpacity
padding: 10, onPress={() => openBackTrainInfo(tailStation)}
flexDirection: "row", style={{
borderColor: "blue", padding: 10,
borderWidth: 1, flexDirection: "row",
margin: 10, borderColor: "blue",
borderRadius: 5, borderWidth: 1,
alignItems: "center", margin: 10,
}} borderRadius: 5,
> alignItems: "center",
<Text }}
style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
> >
「本当の終着駅」を表示 <Text
</Text> style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
</TouchableOpacity> >
)} 「本当の終着駅」を表示
</Text>
</TouchableOpacity>
)}
<View style={{ flexDirection: "row" }}> <View style={{ flexDirection: "row" }}>
<View <View
style={{ style={{
padding: 8, padding: 8,
flexDirection: "row", flexDirection: "row",
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: "#f0f0f0", borderBottomColor: "#f0f0f0",
flex: 1, flex: 1,
}} }}
> >
<Text style={{ fontSize: 20 }}> </Text> <Text style={{ fontSize: 20 }}> </Text>
<View style={{ flex: 1 }} /> <View style={{ flex: 1 }} />
</View>
</View> </View>
</View> </ScrollView>
</ScrollView> </View>
</View> </View>
</ActionSheet> </ActionSheet>
); );

274
components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js Normal file
View File

@ -0,0 +1,274 @@
import * as React from "react";
import { Text, View, StyleSheet, Animated, ScrollView } from "react-native";
import { TrainDataView } from "./TrainDataView";
const Max_Header_Height = 200;
const Min_Header_Height = 80;
const Scroll_Distance = Max_Header_Height - Min_Header_Height;
export const DynamicHeader = ({
animHeaderValue,
currentTrainData,
currentPosition,
nearTrainIDList,
openTrainInfo,
}) => {
const animatedHeaderHeight = animHeaderValue.interpolate({
inputRange: [0, Scroll_Distance],
outputRange: [Max_Header_Height, 0],
extrapolate: "clamp",
});
const animatedHeaderHeight2 = animHeaderValue.interpolate({
inputRange: [0, Scroll_Distance],
outputRange: [0, Min_Header_Height],
extrapolate: "clamp",
});
const animateHeaderBackgroundColor = animHeaderValue.interpolate({
inputRange: [0, Max_Header_Height - Min_Header_Height],
outputRange: ["blue", "red"],
extrapolate: "clamp",
});
return (
<>
<Animated.View
style={[
styles.header,
{
height: animatedHeaderHeight,
// backgroundColor: animateHeaderBackgroundColor,
},
]}
>
<ScrollView
//onTouchStart={() => setActionSheetHorizonalScroll(true)}
//onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
//onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
style={{
flexDirection: "row",
//width: widthPercentageToDP("200%"),
// minHeight: 200,
//height: heightPercentageToDP("20%"),
}}
horizontal
pagingEnabled
>
<TrainDataView
currentTrainData={currentTrainData}
currentPosition={currentPosition}
nearTrainIDList={nearTrainIDList}
openTrainInfo={openTrainInfo}
/>
{/* <View
style={{
flexDirection: "column",
height: heightPercentageToDP("20%"),
flex: 1,
width: widthPercentageToDP("100%"),
}}
>
<View style={{ flex: 1, flexDirection: "row" }}>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "right",
}}
>
岡山
</Text>
</View>
<View
style={{
flex: 3,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>
車両案内
</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "right",
}}
>
宇多津でうずしお号と連結
</Text>
</View>
</View>
<View style={{ flex: 1, flexDirection: "row" }}>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>
編成(使用車両：2700系)
</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "left",
}}
>
{"[<自][自>][アン自|指>][アン指|G>]"}
</Text>
</View>
</View>
</View> */}
</ScrollView>
</Animated.View>
<Animated.View
style={[
styles.header,
{
height: animatedHeaderHeight2,
//backgroundColor: animateHeaderBackgroundColor,
margin: 0,
},
]}
>
<ScrollView
//onTouchStart={() => setActionSheetHorizonalScroll(true)}
//onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
//onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
style={{
flexDirection: "row",
flex: 1,
//width: widthPercentageToDP("200%"),
// minHeight: 200,
//height: heightPercentageToDP("20%"),
}}
horizontal
pagingEnabled
>
<TrainDataView
mode={2}
currentTrainData={currentTrainData}
currentPosition={currentPosition}
nearTrainIDList={nearTrainIDList}
openTrainInfo={openTrainInfo}
/>
{/* <View
style={{
flexDirection: "column",
height: heightPercentageToDP("20%"),
flex: 1,
width: widthPercentageToDP("100%"),
}}
>
<View style={{ flex: 1, flexDirection: "row" }}>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "right",
}}
>
岡山
</Text>
</View>
<View
style={{
flex: 3,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>
車両案内
</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "right",
}}
>
宇多津でうずしお号と連結
</Text>
</View>
</View>
<View style={{ flex: 1, flexDirection: "row" }}>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>
編成(使用車両：2700系)
</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "left",
}}
>
{"[<自][自>][アン自|指>][アン指|G>]"}
</Text>
</View>
</View>
</View> */}
</ScrollView>
</Animated.View>
</>
);
};
const styles = StyleSheet.create({
header: {
justifyContent: "center",
alignItems: "center",
left: 0,
right: 0,
//paddingTop: 10,
},
headerText: {
color: "#fff",
fontSize: 25,
fontWeight: "bold",
textAlign: "center",
},
});

35
components/ActionSheetComponents/EachTrainInfo/StateBox.js
View File

@ -1,19 +1,29 @@
import React from "react"; import React from "react";
import { View, Text } from "react-native"; import { View, Text } from "react-native";
export const StateBox = ({ text, title, style }) => ( export const StateBox = ({ text, title, style, mode }) => (
<View style={{ ...boxStyle, ...style }}> <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
<Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text> <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
<View style={{ flex: 1 }} /> <View style={{ flex: 1 }} />
<View style={{ fontSize: 25, color: "#0099CC", textAlign: "right" }}> <View
style={{
color: "#0099CC",
textAlign: "right",
flexDirection: mode == 2 ? "row" : "column",
}}
>
{text?.match("～") ? ( {text?.match("～") ? (
<> <>
<Text style={boxTextStyle}>{text.split("～")[0]}</Text> <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
{text.split("～")[0]}
</Text>
<Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text> <Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
<Text style={boxTextStyle}>{text.split("～")[1]}</Text> <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
{text.split("～")[1]}
</Text>
</> </>
) : ( ) : (
<Text style={boxTextStyle}>{text}</Text> <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
)} )}
</View> </View>
</View> </View>
@ -25,6 +35,19 @@ const boxStyle = {
padding: 10, padding: 10,
margin: 10, margin: 10,
}; };
const boxStyle2 = {
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 5,
margin: 5,
};
const boxTextStyle2 = {
fontSize: 18,
color: "#0099CC",
textAlign: "right",
};
const boxTextStyle = { const boxTextStyle = {
fontSize: 25, fontSize: 25,
color: "#0099CC", color: "#0099CC",

13
components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
View File

@ -11,17 +11,20 @@ export const TrainDataView = ({
currentPosition, currentPosition,
nearTrainIDList, nearTrainIDList,
openTrainInfo, openTrainInfo,
mode = 0,
}) => { }) => {
return ( return (
<View <View
style={{ style={{
flexDirection: "row", flexDirection: "row",
minHeight: 200, //minHeight: 200,
height: heightPercentageToDP("20%"), //height: heightPercentageToDP("20%"),
width: widthPercentageToDP("100%"), width: widthPercentageToDP("100%"),
flex: 1,
}} }}
> >
<StateBox <StateBox
mode={mode}
title={`現在地 ${currentPosition.toString()}`} title={`現在地 ${currentPosition.toString()}`}
text={ text={
currentTrainData?.Pos.match("～") currentTrainData?.Pos.match("～")
@ -37,9 +40,10 @@ export const TrainDataView = ({
: currentTrainData?.Pos : currentTrainData?.Pos
} }
/> />
<View style={{ flex: 1, flexDirection: "column" }}> <View style={{ flex: 1, flexDirection: mode == 2 ? "row" : "column" }}>
<View style={{ flex: 1, flexDirection: "row" }}> <View style={{ flex: 1, flexDirection: "row" }}>
<StateBox <StateBox
mode={mode}
title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"} title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
text={`${currentTrainData?.delay}${ text={`${currentTrainData?.delay}${
isNaN(currentTrainData?.delay) ? "" : "分" isNaN(currentTrainData?.delay) ? "" : "分"
@ -55,9 +59,10 @@ export const TrainDataView = ({
}} }}
> >
{nearTrainIDList.length == 0 ? ( {nearTrainIDList.length == 0 ? (
<StateBox title="列番" text={currentTrainData?.num} /> <StateBox mode={mode} title="列番" text={currentTrainData?.num} />
) : ( ) : (
<StateBox <StateBox
mode={mode}
title="増解結相手を表示▶️" title="増解結相手を表示▶️"
text={`${nearTrainIDList}`} text={`${nearTrainIDList}`}
style={{ style={{