Merge commit '2ee197a2947872288d2158a0f5e5175e22809dac' into develop
This commit is contained in:
harukin-expo-dev-env
commit
25c0d7ae00
1
assets/StationSign.json
Normal file
1
assets/StationSign.json
Normal file
File diff suppressed because one or more lines are too long
@ -15,7 +15,6 @@ import Sign from "../../components/駅名表/Sign";
|
|||||||
|
|
||||||
import { TicketBox } from "../atom/TicketBox";
|
import { TicketBox } from "../atom/TicketBox";
|
||||||
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
|
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
|
||||||
import lineColorList from "../../assets/originData/lineColorList";
|
|
||||||
import { getPDFViewURL } from "../../lib/getPdfViewURL";
|
import { getPDFViewURL } from "../../lib/getPdfViewURL";
|
||||||
import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
|
import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
|
||||||
import { AS } from "../../storageControl";
|
import { AS } from "../../storageControl";
|
||||||
@ -231,140 +230,6 @@ export const StationDeteilView = (props) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const StationName = (props) => {
|
|
||||||
const { stringData, ss } = props;
|
|
||||||
return (
|
|
||||||
<View style={ss}>
|
|
||||||
<Text style={styleSheet.下枠駅名}>{stringData.Station_JP}</Text>
|
|
||||||
<Text style={styleSheet.下枠駅名}>{stringData.Station_EN}</Text>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const NexPreStationLine = ({ currentStation, originalStationList }) => {
|
|
||||||
const [preStation, setPreStation] = useState();
|
|
||||||
const [nexStation, setNexStation] = useState();
|
|
||||||
const [lineName, setLineName] = useState();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
getPreNextStation(currentStation);
|
|
||||||
}, [currentStation]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!currentStation) return () => {};
|
|
||||||
getPreNextStation(currentStation);
|
|
||||||
}, []);
|
|
||||||
const getPreNextStation = (now) => {
|
|
||||||
const lineList = [
|
|
||||||
"予讃線(高松-松山間)[Y]",
|
|
||||||
"予讃線(松山-宇和島間)[U]",
|
|
||||||
"予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]",
|
|
||||||
"土讃線(多度津-高知間)[D]",
|
|
||||||
"土讃線(高知-窪川間)[K]",
|
|
||||||
"高徳線(高松-徳島間)[T]",
|
|
||||||
"徳島線(徳島-阿波池田間)[B]",
|
|
||||||
"鳴門線(池谷-鳴門間)[N]",
|
|
||||||
"瀬戸大橋線(児島-宇多津間)[M]",
|
|
||||||
];
|
|
||||||
let returnData;
|
|
||||||
lineList.forEach((d) => {
|
|
||||||
let cache = originalStationList[d].findIndex(
|
|
||||||
(data) => data.StationNumber == now.StationNumber
|
|
||||||
);
|
|
||||||
if (cache != -1) {
|
|
||||||
returnData = [
|
|
||||||
originalStationList[d][cache - 1],
|
|
||||||
originalStationList[d][cache + 1],
|
|
||||||
d,
|
|
||||||
];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
setPreStation(returnData[0]);
|
|
||||||
setNexStation(returnData[1]);
|
|
||||||
setLineName(returnData[2]);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: lineName
|
|
||||||
? lineColorList[lineName.split("[")[1].replace("]", "")]
|
|
||||||
: "red",
|
|
||||||
flexDirection: "row",
|
|
||||||
alignContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<View style={styleSheet.下枠フレーム}>
|
|
||||||
{preStation ? (
|
|
||||||
<>
|
|
||||||
<Text style={styleSheet.下枠左右マーク}>◀</Text>
|
|
||||||
{preStation.StationNumber ? (
|
|
||||||
<View style={styleSheet.下枠駅ナンバー}>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontSize: parseInt("10%"),
|
|
||||||
color: "white",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{preStation.StationNumber}
|
|
||||||
</Text>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
<StationName
|
|
||||||
stringData={preStation}
|
|
||||||
ss={{ flex: 1, alignItems: "flex-start" }}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontSize: parseInt("10%"),
|
|
||||||
color: "white",
|
|
||||||
textAlign: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{lineName &&
|
|
||||||
lineName
|
|
||||||
.split("(")
|
|
||||||
.map((d, index) => (index == 1 ? "(" + d : d))
|
|
||||||
.join("\n")}
|
|
||||||
</Text>
|
|
||||||
<View style={styleSheet.下枠フレーム}>
|
|
||||||
{nexStation ? (
|
|
||||||
<>
|
|
||||||
<StationName
|
|
||||||
stringData={nexStation}
|
|
||||||
ss={{ flex: 1, alignItems: "flex-end" }}
|
|
||||||
/>
|
|
||||||
{nexStation.StationNumber ? (
|
|
||||||
<View style={styleSheet.下枠駅ナンバー}>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
<Text style={{ fontSize: parseInt("15%"), color: "white" }}>
|
|
||||||
{nexStation.StationNumber}
|
|
||||||
</Text>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
<Text style={styleSheet.下枠左右マーク}>▶</Text>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const 駅構内図 = (props) => {
|
const 駅構内図 = (props) => {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
@ -440,84 +305,3 @@ const Handler = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
return <></>;
|
return <></>;
|
||||||
};
|
};
|
||||||
const styleSheet = {
|
|
||||||
外枠: {
|
|
||||||
width: wp("80%"),
|
|
||||||
height: (wp("80%") / 20) * 9,
|
|
||||||
borderColor: "#2E94BB",
|
|
||||||
borderWidth: 1,
|
|
||||||
backgroundColor: "white",
|
|
||||||
},
|
|
||||||
下帯: {
|
|
||||||
position: "absolute",
|
|
||||||
bottom: "0%",
|
|
||||||
left: "0%",
|
|
||||||
width: "100%",
|
|
||||||
height: "30%",
|
|
||||||
backgroundColor: "#2E94BB",
|
|
||||||
},
|
|
||||||
JRStyle: {
|
|
||||||
position: "absolute",
|
|
||||||
top: "2%",
|
|
||||||
left: "2%",
|
|
||||||
fontWeight: "bold",
|
|
||||||
fontSize: parseInt("30%"),
|
|
||||||
color: "#2E94BB",
|
|
||||||
},
|
|
||||||
stationNameAreaOverWrap: {
|
|
||||||
position: "absolute",
|
|
||||||
top: "10%",
|
|
||||||
alignContent: "center",
|
|
||||||
flexDirection: "row",
|
|
||||||
},
|
|
||||||
Station_JP: {
|
|
||||||
fontWeight: "bold",
|
|
||||||
fontSize: parseInt("40%"),
|
|
||||||
color: "#005170",
|
|
||||||
},
|
|
||||||
Station_EN: {
|
|
||||||
fontWeight: "bold",
|
|
||||||
fontSize: parseInt("15%"),
|
|
||||||
color: "#005170",
|
|
||||||
},
|
|
||||||
下帯内容: {
|
|
||||||
position: "absolute",
|
|
||||||
bottom: "0%",
|
|
||||||
height: "30%",
|
|
||||||
width: "100%",
|
|
||||||
alignItems: "center",
|
|
||||||
flexDirection: "column",
|
|
||||||
},
|
|
||||||
下枠フレーム: {
|
|
||||||
flex: 1,
|
|
||||||
flexDirection: "row",
|
|
||||||
alignContent: "center",
|
|
||||||
height: wp("10%"),
|
|
||||||
},
|
|
||||||
下枠左右マーク: {
|
|
||||||
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%"),
|
|
||||||
},
|
|
||||||
下枠駅名: {
|
|
||||||
fontWeight: "bold",
|
|
||||||
fontSize: parseInt("15%"),
|
|
||||||
color: "white",
|
|
||||||
flex: 1,
|
|
||||||
paddingHorizontal: 0,
|
|
||||||
marginVertical: 0,
|
|
||||||
textAlignVertical: "center",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|||||||
30
components/駅名表/LottieDelayView.tsx
Normal file
30
components/駅名表/LottieDelayView.tsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import React, { FC, useEffect, useRef, useState } from "react";
|
||||||
|
import LottieView from "lottie-react-native";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
progress: number;
|
||||||
|
};
|
||||||
|
export const LottieDelayView: FC<Props> = ({ progress }) => {
|
||||||
|
const lottieRef = useRef<LottieView>();
|
||||||
|
const [progressState, setProgressState] = useState(undefined);
|
||||||
|
useEffect(() => {
|
||||||
|
if (progress == 0) {
|
||||||
|
lottieRef.current.play(progressState !== undefined ? 35 : 7, 7);
|
||||||
|
} else {
|
||||||
|
lottieRef.current.play(progressState !== undefined ? 7 : 35, 35);
|
||||||
|
}
|
||||||
|
}, [progress]);
|
||||||
|
return (
|
||||||
|
<LottieView
|
||||||
|
progress={progressState}
|
||||||
|
speed={1.4}
|
||||||
|
style={{ width: 80, height: 80 }}
|
||||||
|
loop={false}
|
||||||
|
source={require("../../assets/939-star.json")}
|
||||||
|
ref={lottieRef}
|
||||||
|
onAnimationFinish={(isCanceled) => {
|
||||||
|
setProgressState(progress);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
113
components/駅名表/NextPreStationLine.tsx
Normal file
113
components/駅名表/NextPreStationLine.tsx
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
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";
|
||||||
|
import lineColorList from "../../assets/originData/lineColorList";
|
||||||
|
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 }) => {
|
||||||
|
const lineID = children.slice(0, 1);
|
||||||
|
const lineName = children.slice(1);
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
...(isMatsuyama ? 下枠駅ナンバーB : 下枠駅ナンバー),
|
||||||
|
borderColor: lineColorList[lineID],
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: parseInt("10%"),
|
||||||
|
color: "black",
|
||||||
|
textAlign: "center",
|
||||||
|
fontWeight: "bold",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{lineID + "\n" + lineName}
|
||||||
|
</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%"),
|
||||||
|
backgroundColor: "white",
|
||||||
|
borderWidth: parseInt("3%"),
|
||||||
|
borderRadius: parseInt("100%"),
|
||||||
|
};
|
||||||
|
const 下枠駅ナンバーB: ViewStyle = {
|
||||||
|
alignContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
width: wp("7%"),
|
||||||
|
height: wp("7%"),
|
||||||
|
margin: wp("2%"),
|
||||||
|
backgroundColor: "white",
|
||||||
|
borderWidth: parseInt("3%"),
|
||||||
|
borderRadius: parseInt("100%"),
|
||||||
|
};
|
||||||
@ -7,7 +7,10 @@ import { useInterval } from "../../lib/useInterval";
|
|||||||
import { AS } from "../../storageControl";
|
import { AS } from "../../storageControl";
|
||||||
import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
|
import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
|
||||||
|
|
||||||
import lineColorList from "../../assets/originData/lineColorList";
|
import { StationNameArea } from "./StationNameArea";
|
||||||
|
import { StationNumberMaker } from "./StationNumberMaker";
|
||||||
|
import { NextPreStationLine } from "./NextPreStationLine";
|
||||||
|
import { LottieDelayView } from "./LottieDelayView";
|
||||||
|
|
||||||
export default function Sign(props) {
|
export default function Sign(props) {
|
||||||
const {
|
const {
|
||||||
@ -61,6 +64,8 @@ export default function Sign(props) {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setNexPrePosition(0);
|
setNexPrePosition(0);
|
||||||
getPreNextStation(currentStation[0]);
|
getPreNextStation(currentStation[0]);
|
||||||
|
if(currentStation.length == 1)return ()=>{};
|
||||||
|
getPreNextStation(currentStation[1]);
|
||||||
}, [currentStation]);
|
}, [currentStation]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -91,27 +96,12 @@ export default function Sign(props) {
|
|||||||
];
|
];
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
setPreStation(returnData[0]);
|
if(returnData[0])setPreStation(returnData[0]);
|
||||||
setNexStation(returnData[1]);
|
if(returnData[1])setNexStation(returnData[1]);
|
||||||
};
|
};
|
||||||
const lottieRef = useRef();
|
const isMatsuyama = currentStation[0].StationNumber == "Y55";
|
||||||
return (
|
//const isMatsuyama = true;
|
||||||
<TouchableOpacity style={styleSheet.外枠} onPress={oP} onLongPress={oLP}>
|
const favoliteChanger = () => {
|
||||||
<StationNumberMaker currentStation={currentStation} />
|
|
||||||
<StationNameArea currentStation={currentStation} />
|
|
||||||
{isCurrentStation ? (
|
|
||||||
<TouchableOpacity style={{ position: "absolute", right: 0, top: 0 }}>
|
|
||||||
<MaterialCommunityIcons
|
|
||||||
name="crosshairs-gps"
|
|
||||||
style={{ padding: 5 }}
|
|
||||||
color="#2E94BB"
|
|
||||||
size={30}
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
) : (
|
|
||||||
<TouchableOpacity
|
|
||||||
style={{ position: "absolute", right: -15, top: -20 }}
|
|
||||||
onPress={() => {
|
|
||||||
if (testButtonStatus) {
|
if (testButtonStatus) {
|
||||||
const otherData = favoriteStation.filter((d) => {
|
const otherData = favoriteStation.filter((d) => {
|
||||||
const compare = JSON.stringify(d);
|
const compare = JSON.stringify(d);
|
||||||
@ -131,197 +121,55 @@ export default function Sign(props) {
|
|||||||
setFavoriteStation(ret);
|
setFavoriteStation(ret);
|
||||||
}
|
}
|
||||||
setTestButtonStatus(!testButtonStatus);
|
setTestButtonStatus(!testButtonStatus);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<TouchableOpacity style={styleSheet.外枠} onPress={oP} onLongPress={oLP}>
|
||||||
|
{isMatsuyama && (
|
||||||
|
<LottieView
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
style={{
|
||||||
|
width: wp("80%"),
|
||||||
|
height: (wp("80%") / 20) * 9,
|
||||||
|
backgroundColor: "#fff",
|
||||||
}}
|
}}
|
||||||
>
|
source={require("../../assets/StationSign.json")}
|
||||||
<LottieDelayView
|
|
||||||
progress={testButtonStatus ? 1 : 0}
|
|
||||||
speed={1.4}
|
|
||||||
style={{ width: 80, height: 80 }}
|
|
||||||
source={require("../../assets/939-star.json")}
|
|
||||||
lottieRef={lottieRef}
|
|
||||||
loop={false}
|
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
|
<StationNumberMaker {...{ currentStation, isMatsuyama }} />
|
||||||
|
<StationNameArea {...{ currentStation, isMatsuyama }} />
|
||||||
|
{isCurrentStation ? (
|
||||||
|
<View style={{ position: "absolute", right: 0, top: 0 }}>
|
||||||
|
<MaterialCommunityIcons
|
||||||
|
name="crosshairs-gps"
|
||||||
|
style={{ padding: 5 }}
|
||||||
|
color="#0099CC"
|
||||||
|
size={30}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={{ position: "absolute", right: -15, top: -20 }}
|
||||||
|
onPress={favoliteChanger}
|
||||||
|
>
|
||||||
|
<LottieDelayView progress={testButtonStatus ? 1 : 0} />
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<Text style={styleSheet.JRStyle}>JR</Text>
|
<Text style={styleSheet.JRStyle}>JR</Text>
|
||||||
<View style={styleSheet.下帯} />
|
<View style={styleSheet[isMatsuyama ? "下帯B" : "下帯"]} />
|
||||||
<View style={styleSheet.下帯内容}>
|
<View style={styleSheet[isMatsuyama ? "下帯内容B" : "下帯内容"]}>
|
||||||
<NexPreStationLine preStation={preStation} nexStation={nexStation} />
|
<NextPreStationLine {...{ nexStation, preStation, isMatsuyama }} />
|
||||||
</View>
|
</View>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const LottieDelayView = ({
|
|
||||||
progress,
|
|
||||||
speed,
|
|
||||||
style,
|
|
||||||
source,
|
|
||||||
lottieRef,
|
|
||||||
loop,
|
|
||||||
}) => {
|
|
||||||
const [progressState, setProgressState] = useState(undefined);
|
|
||||||
useEffect(() => {
|
|
||||||
if (progress == 0) {
|
|
||||||
lottieRef.current.play(progressState !== undefined ? 35 : 7, 7);
|
|
||||||
} else {
|
|
||||||
lottieRef.current.play(progressState !== undefined ? 7 : 35, 35);
|
|
||||||
}
|
|
||||||
}, [progress]);
|
|
||||||
return (
|
|
||||||
<LottieView
|
|
||||||
progress={progressState}
|
|
||||||
speed={speed}
|
|
||||||
style={style}
|
|
||||||
source={source}
|
|
||||||
ref={lottieRef}
|
|
||||||
loop={loop}
|
|
||||||
onAnimationFinish={(isCanceled) => {
|
|
||||||
setProgressState(progress);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const NexPreStationLine = ({ nexStation, preStation }) => {
|
|
||||||
return (
|
|
||||||
<View style={styleSheet.下枠フレーム}>
|
|
||||||
<View style={styleSheet.下枠フレーム}>
|
|
||||||
{preStation ? (
|
|
||||||
<>
|
|
||||||
<Text style={styleSheet.下枠左右マーク}>◀</Text>
|
|
||||||
{preStation.StationNumber ? (
|
|
||||||
<View style={styleSheet.下枠駅ナンバー}>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontSize: parseInt("10%"),
|
|
||||||
color: "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={styleSheet.下枠駅ナンバー}>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
<Text style={{ fontSize: parseInt("10%"), color: "white" }}>
|
|
||||||
{nexStation.StationNumber}
|
|
||||||
</Text>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
<Text style={styleSheet.下枠左右マーク}>▶</Text>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const StationNumberMaker = (props) => {
|
|
||||||
const getTop = (array, index) => {
|
|
||||||
if (array.length == 1) return 20;
|
|
||||||
else if (index == 0) return 5;
|
|
||||||
else if (index == 1) return 35;
|
|
||||||
else return 20;
|
|
||||||
};
|
|
||||||
return props.currentStation
|
|
||||||
.filter((d) => (d.StationNumber ? true : false))
|
|
||||||
.map((d, index, array) => {
|
|
||||||
const lineID = d.StationNumber.slice(0, 1);
|
|
||||||
const lineName = d.StationNumber.slice(1);
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
alignContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
top: getTop(array, index) + "%",
|
|
||||||
right: "10%",
|
|
||||||
width: wp("10%"),
|
|
||||||
height: wp("10%"),
|
|
||||||
borderColor: lineColorList[lineID],
|
|
||||||
borderWidth: parseInt("3%"),
|
|
||||||
borderRadius: parseInt("100%"),
|
|
||||||
}}
|
|
||||||
key={array[index].StationNumber}
|
|
||||||
>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontSize: parseInt("13%"),
|
|
||||||
margin: 0,
|
|
||||||
padding: 0,
|
|
||||||
textAlign: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{lineID + "\n" + lineName}
|
|
||||||
</Text>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const StationNameArea = (props) => {
|
|
||||||
const { currentStation } = props;
|
|
||||||
return (
|
|
||||||
<View style={styleSheet.stationNameAreaOverWrap}>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
<View style={{ alignItems: "center" }}>
|
|
||||||
{/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text> */}
|
|
||||||
<Text style={styleSheet.Station_JP}>
|
|
||||||
{currentStation[0].Station_JP}
|
|
||||||
</Text>
|
|
||||||
<Text style={styleSheet.Station_EN}>
|
|
||||||
{currentStation[0].Station_EN}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const StationName = (props) => {
|
|
||||||
const { stringData, ss } = props;
|
|
||||||
return (
|
|
||||||
<View style={ss}>
|
|
||||||
<Text style={styleSheet.下枠駅名}>{stringData.Station_JP}</Text>
|
|
||||||
<Text style={styleSheet.下枠駅名}>{stringData.Station_EN}</Text>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const styleSheet = {
|
const styleSheet = {
|
||||||
外枠: {
|
外枠: {
|
||||||
width: wp("80%"),
|
width: wp("80%"),
|
||||||
height: (wp("80%") / 20) * 9,
|
height: (wp("80%") / 20) * 9,
|
||||||
borderColor: "#2E94BB",
|
borderColor: "#0099CC",
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
},
|
},
|
||||||
@ -331,31 +179,23 @@ const styleSheet = {
|
|||||||
left: "0%",
|
left: "0%",
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "30%",
|
height: "30%",
|
||||||
backgroundColor: "#2E94BB",
|
backgroundColor: "#0099CC",
|
||||||
|
},
|
||||||
|
下帯B: {
|
||||||
|
position: "absolute",
|
||||||
|
bottom: "0%",
|
||||||
|
left: "0%",
|
||||||
|
width: "100%",
|
||||||
|
height: "25%",
|
||||||
|
backgroundColor: "#454545",
|
||||||
},
|
},
|
||||||
JRStyle: {
|
JRStyle: {
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: "2%",
|
top: "2%",
|
||||||
left: "2%",
|
left: "2%",
|
||||||
fontWeight: "bold",
|
fontWeight: "bold",
|
||||||
fontSize: parseInt("30%"),
|
fontSize: parseInt("25%"),
|
||||||
color: "#2E94BB",
|
color: "#0099CC",
|
||||||
},
|
|
||||||
stationNameAreaOverWrap: {
|
|
||||||
position: "absolute",
|
|
||||||
top: "10%",
|
|
||||||
alignContent: "center",
|
|
||||||
flexDirection: "row",
|
|
||||||
},
|
|
||||||
Station_JP: {
|
|
||||||
fontWeight: "bold",
|
|
||||||
fontSize: parseInt("40%"),
|
|
||||||
color: "#005170",
|
|
||||||
},
|
|
||||||
Station_EN: {
|
|
||||||
fontWeight: "bold",
|
|
||||||
fontSize: parseInt("15%"),
|
|
||||||
color: "#005170",
|
|
||||||
},
|
},
|
||||||
下帯内容: {
|
下帯内容: {
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
@ -365,34 +205,12 @@ const styleSheet = {
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
},
|
},
|
||||||
下枠フレーム: {
|
下帯内容B: {
|
||||||
flex: 1,
|
position: "absolute",
|
||||||
flexDirection: "row",
|
bottom: "0%",
|
||||||
alignContent: "center",
|
height: "25%",
|
||||||
|
width: "100%",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
},
|
flexDirection: "column",
|
||||||
下枠左右マーク: {
|
|
||||||
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%"),
|
|
||||||
},
|
|
||||||
下枠駅名: {
|
|
||||||
fontWeight: "bold",
|
|
||||||
fontSize: parseInt("15%"),
|
|
||||||
color: "white",
|
|
||||||
flex: 1,
|
|
||||||
textAlignVertical: "center",
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
22
components/駅名表/StationName.tsx
Normal file
22
components/駅名表/StationName.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import React, { FC } from "react";
|
||||||
|
import { Text, TextStyle, View } from "react-native";
|
||||||
|
export const StationName: FC<{
|
||||||
|
stringData: { Station_JP: string; Station_EN: string };
|
||||||
|
ss: TextStyle;
|
||||||
|
}> = (props) => {
|
||||||
|
const { stringData, ss } = props;
|
||||||
|
return (
|
||||||
|
<View style={ss}>
|
||||||
|
<Text style={styleSheet}>{stringData.Station_JP}</Text>
|
||||||
|
<Text style={styleSheet}>{stringData.Station_EN}</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styleSheet: TextStyle = {
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: parseInt("15%"),
|
||||||
|
color: "white",
|
||||||
|
flex: 1,
|
||||||
|
textAlignVertical: "center",
|
||||||
|
};
|
||||||
40
components/駅名表/StationNameArea.tsx
Normal file
40
components/駅名表/StationNameArea.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import React, { CSSProperties } from "react";
|
||||||
|
import { Text, TextStyle, View, ViewStyle } from "react-native";
|
||||||
|
|
||||||
|
export const StationNameArea = (props) => {
|
||||||
|
const { currentStation, isMatsuyama } = props;
|
||||||
|
|
||||||
|
const stationNameAreaOverWrap: ViewStyle = {
|
||||||
|
position: "absolute",
|
||||||
|
top: "10%",
|
||||||
|
alignContent: "center",
|
||||||
|
flexDirection: "row",
|
||||||
|
height: "50%",
|
||||||
|
width: "100%",
|
||||||
|
};
|
||||||
|
const Station_JP: TextStyle = {
|
||||||
|
letterSpacing: currentStation[0].Station_JP.length < 4 ? 15 : 0,
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: parseInt(currentStation[0].Station_JP.length < 6 ? "40%" : "25%"),
|
||||||
|
|
||||||
|
color: isMatsuyama ? "white" : "#005170",
|
||||||
|
};
|
||||||
|
const Station_EN: TextStyle = {
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: parseInt("15%"),
|
||||||
|
color: isMatsuyama ? "white" : "#005170",
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<View style={stationNameAreaOverWrap}>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<View style={{ alignItems: "center",flexDirection:"column" }}>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
{/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text> */}
|
||||||
|
<Text style={Station_JP}>{currentStation[0].Station_JP}</Text>
|
||||||
|
<Text style={Station_EN}>{currentStation[0].Station_EN}</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
53
components/駅名表/StationNumberMaker.tsx
Normal file
53
components/駅名表/StationNumberMaker.tsx
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Text, View } from "react-native";
|
||||||
|
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
|
||||||
|
import lineColorList from "../../assets/originData/lineColorList";
|
||||||
|
|
||||||
|
export const StationNumberMaker = (props) => {
|
||||||
|
const { currentStation, isMatsuyama } = props;
|
||||||
|
const getTop = (array: number[], index: number) => {
|
||||||
|
if (array.length == 1) return 20;
|
||||||
|
else if (index == 0) return 5;
|
||||||
|
else if (index == 1) return 35;
|
||||||
|
else return 20;
|
||||||
|
};
|
||||||
|
return currentStation
|
||||||
|
.filter((d) => (d.StationNumber ? true : false))
|
||||||
|
.map((d, index, array) => {
|
||||||
|
const lineID = d.StationNumber.slice(0, 1);
|
||||||
|
const lineName = d.StationNumber.slice(1);
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
alignContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
top: `${getTop(array, index)}%`,
|
||||||
|
right: "10%",
|
||||||
|
width: wp("10%"),
|
||||||
|
height: wp("10%"),
|
||||||
|
borderColor: lineColorList[lineID],
|
||||||
|
backgroundColor: "white",
|
||||||
|
borderWidth: parseInt("3%"),
|
||||||
|
borderRadius: parseInt("100%"),
|
||||||
|
}}
|
||||||
|
key={array[index].StationNumber}
|
||||||
|
>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: parseInt("13%"),
|
||||||
|
margin: 0,
|
||||||
|
padding: 0,
|
||||||
|
textAlign: "center",
|
||||||
|
color: "black",
|
||||||
|
fontWeight: "bold",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{lineID + "\n" + lineName}
|
||||||
|
</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user