Carouselと切り替えボタンを変更

2025-04-13 12:41:33 +00:00
parent 934938287d
commit 97a6bbc619
4 changed files with 221 additions and 203 deletions
--- a/components/Menu/Carousel/CarouselBox.tsx
+++ b/components/Menu/Carousel/CarouselBox.tsx
@@ -0,0 +1,125 @@
+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
+                currentStation={item}
+                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>
+  );
+};