LottieDelayViewを移動

components/駅名表/LottieDelayView.tsx

@@ -0,0 +1,36 @@
+import React, { CSSProperties, FC, useEffect, useState } from "react";
+import LottieView, { AnimationObject } from "lottie-react-native";
+import { ViewStyle } from "react-native";
+
+type Props = {
+  progress: number;
+  speed: number;
+  style: ViewStyle;
+  source: AnimationObject;
+  lottieRef: React.RefObject<LottieView>;
+  loop: boolean;
+};
+export const LottieDelayView: FC<Props> = (props) => {
+  const { progress, speed, style, source, lottieRef, loop } = props;
+  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);
+      }}
+    />
+  );
+};

components/駅名表/Sign.js

@@ -7,12 +7,10 @@ import { useInterval } from "../../lib/useInterval";
 import { AS } from "../../storageControl";
 import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
 
-import { StationName } from "./StationName";
 import { StationNameArea } from "./StationNameArea";
 import { StationNumberMaker } from "./StationNumberMaker";
 import { NextPreStationLine } from "./NextPreStationLine";
-
+import { LottieDelayView } from "./LottieDelayView";
-import lineColorList from "../../assets/originData/lineColorList";
 
 export default function Sign(props) {
   const {
@@ -102,6 +100,27 @@ export default function Sign(props) {
   const lottieRef = useRef();
   const isMatsuyama = currentStation[0].StationNumber == "Y55";
   //const isMatsuyama = true;
+  const favoliteChanger = () => {
+    if (testButtonStatus) {
+      const otherData = favoriteStation.filter((d) => {
+        const compare = JSON.stringify(d);
+        const current = JSON.stringify(currentStation);
+        if (compare !== current) {
+          return true;
+        } else {
+          return false;
+        }
+      });
+      AS.setItem("favoriteStation", JSON.stringify(otherData));
+      setFavoriteStation(otherData);
+    } else {
+      let ret = favoriteStation;
+      ret.push(currentStation);
+      AS.setItem("favoriteStation", JSON.stringify(ret));
+      setFavoriteStation(ret);
+    }
+    setTestButtonStatus(!testButtonStatus);
+  };
   return (
     <TouchableOpacity style={styleSheet.外枠} onPress={oP} onLongPress={oLP}>
       {isMatsuyama && (
@@ -127,38 +146,18 @@ export default function Sign(props) {
         isMatsuyama={isMatsuyama}
       />
       {isCurrentStation ? (
-        <TouchableOpacity style={{ position: "absolute", right: 0, top: 0 }}>
+        <View style={{ position: "absolute", right: 0, top: 0 }}>
           <MaterialCommunityIcons
             name="crosshairs-gps"
             style={{ padding: 5 }}
             color="#2E94BB"
             size={30}
           />
-        </TouchableOpacity>
+        </View>
       ) : (
         <TouchableOpacity
           style={{ position: "absolute", right: -15, top: -20 }}
-          onPress={() => {
+          onPress={favoliteChanger}
-            if (testButtonStatus) {
-              const otherData = favoriteStation.filter((d) => {
-                const compare = JSON.stringify(d);
-                const current = JSON.stringify(currentStation);
-                if (compare !== current) {
-                  return true;
-                } else {
-                  return false;
-                }
-              });
-              AS.setItem("favoriteStation", JSON.stringify(otherData));
-              setFavoriteStation(otherData);
-            } else {
-              let ret = favoriteStation;
-              ret.push(currentStation);
-              AS.setItem("favoriteStation", JSON.stringify(ret));
-              setFavoriteStation(ret);
-            }
-            setTestButtonStatus(!testButtonStatus);
-          }}
         >
           <LottieDelayView
             progress={testButtonStatus ? 1 : 0}
@@ -180,36 +179,6 @@ export default function Sign(props) {
   );
 }
 
-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 styleSheet = {
   外枠: {