126 lines
3.7 KiB
TypeScript
126 lines
3.7 KiB
TypeScript
import Sign from "@/components/駅名表/Sign";
|
|
import React, { useEffect, useState } from "react";
|
|
import { AS } from "@/storageControl";
|
|
import { useWindowDimensions, View, LayoutAnimation } from "react-native";
|
|
import Carousel from "react-native-reanimated-carousel";
|
|
import { SheetManager } from "react-native-actions-sheet";
|
|
import { StationNumber } from "../StationPagination";
|
|
import { SimpleDot } from "../SimpleDot";
|
|
export const CarouselBox = ({
|
|
originalStationList,
|
|
allStationData,
|
|
currentStation,
|
|
setSelectedCurrentStation,
|
|
carouselRef,
|
|
selectedCurrentStation,
|
|
navigate,
|
|
}) => {
|
|
const { height, width } = useWindowDimensions();
|
|
const [dotButton, setDotButton] = useState(false);
|
|
const oPSign = () => {
|
|
const payload = {
|
|
currentStation: allStationData[selectedCurrentStation],
|
|
navigate,
|
|
goTo: "menu",
|
|
//@ts-ignore
|
|
useShow: () => SheetManager.show("StationDetailView", { payload }),
|
|
onExit: () => SheetManager.hide("StationDetailView"),
|
|
};
|
|
//@ts-ignore
|
|
SheetManager.show("StationDetailView", { payload });
|
|
};
|
|
const oLPSign = () => {
|
|
LayoutAnimation.configureNext({
|
|
duration: 600,
|
|
update: { type: "spring", springDamping: 0.5 },
|
|
});
|
|
AS.setItem(
|
|
"CarouselSettings/activeDotSettings",
|
|
!dotButton ? "true" : "false"
|
|
);
|
|
setDotButton(!dotButton);
|
|
};
|
|
|
|
useEffect(() => {
|
|
AS.getItem("CarouselSettings/activeDotSettings").then((data) => {
|
|
setDotButton(data === "true");
|
|
});
|
|
}, []);
|
|
return (
|
|
<View style={{ flex: 1, paddingTop: 10 }}>
|
|
<Carousel
|
|
ref={carouselRef}
|
|
data={allStationData}
|
|
height={(((width / 100) * 80) / 20) * 9 + 10}
|
|
pagingEnabled={true}
|
|
snapEnabled={true}
|
|
loop={false}
|
|
width={width}
|
|
style={{ width: width, alignContent: "center" }}
|
|
mode="parallax"
|
|
modeConfig={{
|
|
parallaxScrollingScale: 1,
|
|
parallaxScrollingOffset: 100,
|
|
parallaxAdjacentItemScale: 0.8,
|
|
}}
|
|
onSnapToItem={setSelectedCurrentStation}
|
|
renderItem={({ item, index }) => {
|
|
return (
|
|
<View
|
|
style={{
|
|
backgroundColor: "#0000",
|
|
width,
|
|
flexDirection: "row",
|
|
marginLeft: 0,
|
|
marginRight: 0,
|
|
}}
|
|
key={item[0].StationNumber}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Sign
|
|
stationID={item[0].StationNumber}
|
|
isCurrentStation={item == currentStation}
|
|
oP={oPSign}
|
|
oLP={oLPSign}
|
|
/>
|
|
<View style={{ flex: 1 }} />
|
|
</View>
|
|
);
|
|
}}
|
|
/>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
{originalStationList &&
|
|
allStationData.map((d, index) => {
|
|
const active = index == selectedCurrentStation;
|
|
const numberIndex = d[0].StationNumber;
|
|
if (dotButton) {
|
|
return (
|
|
<StationNumber
|
|
onPress={() => setSelectedCurrentStation(index)}
|
|
currentStation={d}
|
|
active={active}
|
|
key={numberIndex}
|
|
/>
|
|
);
|
|
} else {
|
|
return (
|
|
<SimpleDot
|
|
onPress={() => setSelectedCurrentStation(index)}
|
|
active={active}
|
|
key={numberIndex}
|
|
/>
|
|
);
|
|
}
|
|
})}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|