Merge commit '5b1b5a029b1680900de0944ec599a8fd65a30913' into patch/5.0.x

components/Menu/StationPagination.tsx

@@ -0,0 +1,166 @@
+import React, { FC, useState } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { Pagination } from "react-native-snap-carousel";
+import { useInterval } from "../../lib/useInterval";
+
+import lineColorList from "../../assets/originData/lineColorList";
+
+type StationProps = {
+  DispNum: string;
+  JrHpUrl: string;
+  MyStation: string;
+  StationMap: string;
+  StationNumber: string | null;
+  StationTimeTable: string;
+  Station_EN: string;
+  Station_JP: string;
+  jslodApi: string;
+  lat: number;
+  lng: number;
+};
+type StationPaginationProps = {
+  entries: StationProps[][];
+  activeSlide: number;
+  carouselRef: any;
+  setSelectedCurrentStation: React.Dispatch<React.SetStateAction<number>>;
+  dotButton: boolean;
+};
+
+export const Paginations: FC<StationPaginationProps> = (props) => {
+  const {
+    entries,
+    activeSlide,
+    carouselRef,
+    setSelectedCurrentStation,
+    dotButton,
+  } = props;
+  return (
+    <Pagination
+      dotsLength={entries.length}
+      activeDotIndex={activeSlide}
+      carouselRef={carouselRef}
+      containerStyle={{ paddingVertical: 0 }}
+      dotStyle={{
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        backgroundColor: "#0099CC",
+      }}
+      inactiveDotStyle={
+        {
+          // Define styles for inactive dots here
+        }
+      }
+      tappableDots={true}
+      inactiveDotOpacity={0.4}
+      inactiveDotScale={0.8}
+      inactiveDotElement={
+        dotButton && (
+          <StationNumberMaker
+            currentStations={entries}
+            setSelectedCurrentStation={setSelectedCurrentStation}
+          />
+        )
+      }
+      dotElement={
+        dotButton && (
+          <StationNumberMaker
+            currentStations={entries}
+            setSelectedCurrentStation={setSelectedCurrentStation}
+          />
+        )
+      }
+    />
+  );
+};
+type StationNumberMakerProps = {
+  currentStations: StationProps[][];
+  setSelectedCurrentStation: React.Dispatch<React.SetStateAction<number>>;
+  active?: boolean;
+  index?: number;
+};
+export const StationNumberMaker: FC<StationNumberMakerProps> = (props) => {
+  const { currentStations, active, index, setSelectedCurrentStation } = props;
+  return (
+    <StationNumber
+      currentStation={currentStations[index]}
+      active={active}
+      onPress={() => setSelectedCurrentStation(index)}
+    />
+  );
+};
+type StationNumberProps = {
+  currentStation: StationProps[];
+  active: boolean;
+  onPress: () => void;
+};
+export const StationNumber: FC<StationNumberProps> = (props) => {
+  const { currentStation, active, onPress } = props;
+  const [animation, setAnimation] = useState(0);
+  const data = currentStation.filter((d) => (d.StationNumber ? true : false));
+  useInterval(() => {
+    if (!data) return;
+    setAnimation(animation + 1 < data.length ? animation + 1 : 0);
+  }, 2000);
+
+  const lineID = data[animation].StationNumber.slice(0, 1);
+  const lineName = data[animation].StationNumber.slice(1);
+  const size = active ? 24 : 18;
+  const margin = active ? 3 : 6;
+  const border = active ? 2 : 1;
+  return (
+    <>
+      {active && (
+        <View style={{ position: "relative", width: 0, height: 0 }}>
+          <View
+            style={{
+              flex: 1,
+              position: "absolute",
+              width: 28,
+              height: 28,
+              marginLeft: 1,
+              marginRight: 1,
+              borderRadius: 22,
+              borderColor: "black",
+              borderWidth: 2,
+              left: 0,
+              top: -14,
+            }}
+          />
+        </View>
+      )}
+      <TouchableOpacity
+        onPress={onPress}
+        style={{
+          alignContent: "center",
+          alignItems: "center",
+          width: size,
+          height: size,
+          marginLeft: margin,
+          marginRight: margin,
+          borderColor: lineColorList[lineID],
+          backgroundColor: "white",
+          borderWidth: border,
+          borderRadius: 22,
+        }}
+        key={currentStation[0].StationNumber + lineID}
+      >
+        <View style={{ flex: 1 }} />
+        <Text
+          style={{
+            fontSize: active ? 8 : 6,
+            margin: 0,
+            padding: 0,
+            textAlign: "center",
+            color: "black",
+            fontWeight: active ? "bold" : "normal",
+            textAlignVertical: "center",
+          }}
+        >
+          {lineID + "\n" + lineName}
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+    </>
+  );
+};

menu.js

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
-import Carousel from "react-native-snap-carousel";
+import Carousel, { Pagination } from "react-native-snap-carousel";
 import {
   Platform,
   View,
@@ -7,6 +7,7 @@ import {
   Linking,
   Text,
   TouchableOpacity,
+  LayoutAnimation,
 } from "react-native";
 import Constants from "expo-constants";
 import * as Location from "expo-location";
@@ -31,6 +32,9 @@ import { SheetManager } from "react-native-actions-sheet";
 import { useTrainDelayData } from "./stateBox/useTrainDelayData";
 import { useNavigation } from "@react-navigation/native";
 import { useStationList } from "./stateBox/useStationList";
+import { Paginations } from "./components/Menu/StationPagination";
+import lineColorList from "./assets/originData/lineColorList";
+import { AS } from "./storageControl";
 
 export default function Menu({ getCurrentTrain }) {
   const { navigate } = useNavigation();
@@ -110,6 +114,7 @@ export default function Menu({ getCurrentTrain }) {
       setSelectedCurrentStation(0);
       return;
     }
+    console.log(allStationData)
     if (allStationData[selectedCurrentStation] == undefined) {
       const count = selectedCurrentStation - 1;
       setSelectedCurrentStation(count);
@@ -156,6 +161,24 @@ export default function Menu({ getCurrentTrain }) {
     SheetManager.show("StationDetailView", { payload });
   };
 
+  const [dotButton, setDotButton] = useState(false);
+
+  useEffect(() => {
+    AS.getItem("CarouselSettings/activeDotSettings").then((data) => {
+      setDotButton(data === "true");
+    });
+  }, []);
+  const oLPSign = () => {
+    LayoutAnimation.configureNext({
+      duration: 600,
+      update: { type: "spring", springDamping: 0.5 },
+    });
+    AS.setItem(
+      "CarouselSettings/activeDotSettings",
+      !dotButton ? "true": "false"
+    );
+    setDotButton(!dotButton);
+  }
   return (
     <View
       style={{
@@ -169,6 +192,7 @@ export default function Menu({ getCurrentTrain }) {
       <ScrollView>
         <TopMenuButton />
         {originalStationList.length != 0 && allStationData.length != 0 && (
+          <>
             <Carousel
               ref={carouselRef}
               layout={"default"}
@@ -189,11 +213,20 @@ export default function Menu({ getCurrentTrain }) {
                       currentStation={item}
                       isCurrentStation={item == currentStation}
                       oP={oPSign}
+                      oLP={oLPSign}
                     />
                   </View>
                 );
               }}
             />
+            <Paginations
+              entries={allStationData}
+              activeSlide={selectedCurrentStation}
+              carouselRef={carouselRef}
+              setSelectedCurrentStation={setSelectedCurrentStation}
+              dotButton={dotButton}
+            />
+          </>
         )}
         {allStationData.length != 0 &&
           originalStationList.length != 0 &&