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

NextPreStationLineを移動

Browse Source
This commit is contained in:
harukin-expo-dev-env 2024-08-31 08:20:53 +00:00
parent 1d27a80776
commit 6cc5708ce0
2 changed files with 106 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
components/駅名表/NextPreStationLine.tsx Normal file
View File

@ -0,0 +1,104 @@
import React, { CSSProperties, FC } from "react";
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
import { Text, TextStyle, View, ViewStyle } from "react-native";
import { StationName } from "./StationName";
export const NextPreStationLine = ({ nexStation, preStation, isMatsuyama }) => {
return (
<View style={下枠フレーム}>
<View style={下枠フレーム}>
{!!preStation && (
<>
<BottomSideArrow isMatsuyama={isMatsuyama} children={"◀"} />
{!!preStation.StationNumber && (
<BottomStationNumberView
isMatsuyama={isMatsuyama}
children={preStation.StationNumber}
/>
)}
<StationName
stringData={preStation}
ss={{ flex: 1, alignItems: "flex-start" }}
/>
</>
)}
</View>
<View style={下枠フレーム}>
{!!nexStation && (
<>
<StationName
stringData={nexStation}
ss={{ flex: 1, alignItems: "flex-end" }}
/>
{!!nexStation.StationNumber && (
<BottomStationNumberView
isMatsuyama={isMatsuyama}
children={nexStation.StationNumber}
/>
)}
<BottomSideArrow isMatsuyama={isMatsuyama} children={"▶"} />
</>
)}
</View>
</View>
);
};
type FCimport = {
isMatsuyama: boolean;
children: string;
};
const BottomSideArrow: FC<FCimport> = ({ isMatsuyama, children }) => {
return !isMatsuyama && <Text style={下枠左右マーク}>{children}</Text>;
};
const BottomStationNumberView: FC<FCimport> = ({ isMatsuyama, children }) => {
return (
<View style={isMatsuyama ? 下枠駅ナンバーB : 下枠駅ナンバー}>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: parseInt("10%"),
color: isMatsuyama ? "black" : "white",
}}
>
{children}
</Text>
<View style={{ flex: 1 }} />
</View>
);
};
const 下枠フレーム: ViewStyle = {
flex: 1,
flexDirection: "row",
alignContent: "center",
alignItems: "center",
};
const 下枠左右マーク: TextStyle = {
fontWeight: "bold",
fontSize: parseInt("20%"),
color: "white",
paddingHorizontal: 10,
textAlignVertical: "center",
};
const 下枠駅ナンバー: ViewStyle = {
alignContent: "center",
alignItems: "center",
width: wp("8%"),
height: wp("8%"),
margin: wp("1%"),
borderColor: "white",
borderWidth: parseInt("2%"),
borderRadius: parseInt("100%"),
};
const 下枠駅ナンバーB: ViewStyle = {
alignContent: "center",
alignItems: "center",
width: wp("7%"),
height: wp("7%"),
margin: wp("2%"),
borderColor: "black",
backgroundColor: "white",
borderWidth: parseInt("2%"),
borderRadius: parseInt("100%"),
};

117
components/駅名表/Sign.js
View File

@ -10,6 +10,7 @@ import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
import { StationName } from "./StationName";
import { StationNameArea } from "./StationNameArea";
import { StationNumberMaker } from "./StationNumberMaker";
import { NextPreStationLine } from "./NextPreStationLine";
import lineColorList from "../../assets/originData/lineColorList";
@ -173,11 +174,7 @@ export default function Sign(props) {
<Text style={styleSheet.JRStyle}>JR</Text>
<View style={styleSheet[isMatsuyama ? "下帯B" : "下帯"]} />
<View style={styleSheet[isMatsuyama ? "下帯内容B" : "下帯内容"]}>
<NexPreStationLine
preStation={preStation}
nexStation={nexStation}
isMatsuyama={isMatsuyama}
/>
<NextPreStationLine {...{ nexStation, preStation, isMatsuyama }} />
</View>
</TouchableOpacity>
);
@ -213,82 +210,6 @@ const LottieDelayView = ({
/>
);
};
const NexPreStationLine = ({ nexStation, preStation, isMatsuyama }) => {
return (
<View style={styleSheet.下枠フレーム}>
<View style={styleSheet.下枠フレーム}>
{preStation ? (
<>
{!isMatsuyama && <Text style={styleSheet.下枠左右マーク}>◀</Text>}
{preStation.StationNumber ? (
<View
style={
isMatsuyama
? styleSheet.下枠駅ナンバーB
: styleSheet.下枠駅ナンバー
}
>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: parseInt("10%"),
color: isMatsuyama ? "black" : "white",
}}
>
{preStation.StationNumber}
</Text>
<View style={{ flex: 1 }} />
</View>
) : (
<></>
)}
<StationName
stringData={preStation}
ss={{ flex: 1, alignItems: "flex-start" }}
/>
</>
) : (
<></>
)}
</View>
<View style={styleSheet.下枠フレーム}>
{nexStation ? (
<>
<StationName
stringData={nexStation}
ss={{ flex: 1, alignItems: "flex-end" }}
/>
{nexStation.StationNumber ? (
<View
style={
isMatsuyama
? styleSheet.下枠駅ナンバーB
: styleSheet.下枠駅ナンバー
}
>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: parseInt("10%"),
color: isMatsuyama ? "black" : "white",
}}
>
{nexStation.StationNumber}
</Text>
<View style={{ flex: 1 }} />
</View>
) : (
<></>
)}
{!isMatsuyama && <Text style={styleSheet.下枠左右マーク}>▶</Text>}
</>
) : (
<></>
)}
</View>
</View>
);
};
const styleSheet = {
外枠: {
@ -338,38 +259,4 @@ const styleSheet = {
alignItems: "center",
flexDirection: "column",
},
下枠フレーム: {
flex: 1,
flexDirection: "row",
alignContent: "center",
alignItems: "center",
},
下枠左右マーク: {
fontWeight: "bold",
fontSize: parseInt("20%"),
color: "white",
paddingHorizontal: 10,
textAlignVertical: "center",
},
下枠駅ナンバー: {
alignContent: "center",
alignItems: "center",
width: wp("8%"),
height: wp("8%"),
margin: wp("1%"),
borderColor: "white",
borderWidth: parseInt("2%"),
borderRadius: parseInt("100%"),
},
下枠駅ナンバーB: {
alignContent: "center",
alignItems: "center",
width: wp("7%"),
height: wp("7%"),
margin: wp("2%"),
borderColor: "black",
backgroundColor: "white",
borderWidth: parseInt("2%"),
borderRadius: parseInt("100%"),
},
};