@easyv/charts 1.3.8 → 1.3.9

package/src/components/Marquee.js

@@ -1,97 +1,97 @@
-import { useEffect, memo, useRef, useState, useCallback } from "react";
-
-/**
- * 文字跑马灯组件
- * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
- */
-
-export default memo((props) => {
-  const {
-    value, // 文本
-    style, // 样式
-    speed = 5, // 动画速度
-  } = props;
-
-  const dom = useRef(null);
-  const target = useRef(null);
-  const observe = useRef(null);
-  const speed_ = useRef(0); //这里必须用一个ref绑定speed，否则animation中获取不到最新的speed
-  const timer = useRef();
-  const [overflow, setOverflow] = useState(false);
-  speed_.current = speed;
-
-  const startAnimation = (lineWidth)=>{
-    const animation = (timestamp) => {
-      let frame = Math.round(((timestamp*speed_.current)%(lineWidth*100))/100);
-      target.current.style.transform = `translate(-${frame}px,0px)`;
-      target.current.nextSibling.style.transform = `translate(-${frame}px,0px)`;
-      timer.current = requestAnimationFrame(animation);
-    };
-    timer.current = requestAnimationFrame(animation);
-  }
-  
-
-  useEffect(() => {
-    //初始化观察器，利用观察器来监视组件可视区域变化
-    observe.current = new IntersectionObserver(
-      function (entries) {
-        let entrie = entries[0];
-
-        if (entrie.boundingClientRect.width < entrie.rootBounds.width >= 1) {
-          //表示文字全部可视
-          cancelAnimationFrame(timer.current);
-          target.current.style.transform = "translate(0px,0px)"; //重置偏移
-          setOverflow(false);
-          return;
-        } else {
-          //否则文本溢出
-          if (!overflow) {
-            cancelAnimationFrame(timer.current);
-            startAnimation(entrie.target.offsetWidth);
-            //startAnimation(entrie.boundingClientRect.width);
-            setOverflow(true);
-          }
-        }
-      },
-      {
-        root: dom.current,
-        rootMargin: "0px 0px 0px 0px",
-        threshold: new Array(101).fill(0).map((d, i) => i / 100), //这里设置了[0-1]之间所有的阈值，保证每一帧的变化都能被观察到
-      }
-    );
-    // start observing
-    observe.current.observe(target.current);
-    return () => {
-      cancelAnimationFrame(timer.current);
-      observe.current.unobserve(target.current);
-      observe.current.disconnect();
-    };
-  }, []);
-
-  let textList = [value, value];
-  return (
-    <div
-      style={{
-        width: "100%",
-        ...style,
-        display: "flex",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        justifyContent: overflow ? "start" : style.justifyContent || "",
-      }}
-      ref={dom}
-    >
-      {textList.map((item, i) => {
-        return (
-          <span
-            key={i}
-            ref={i == 0 ? target : null}
-            style={{ display: i == 1 && !overflow ? "none" : "inline" }}
-          >
-            {item}&nbsp;
-          </span>
-        );
-      })}
-    </div>
-  );
-});
+import { useEffect, memo, useRef, useState, useCallback } from "react";
+
+/**
+ * 文字跑马灯组件
+ * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
+ */
+
+export default memo((props) => {
+  const {
+    value, // 文本
+    style, // 样式
+    speed = 5, // 动画速度
+  } = props;
+
+  const dom = useRef(null);
+  const target = useRef(null);
+  const observe = useRef(null);
+  const speed_ = useRef(0); //这里必须用一个ref绑定speed，否则animation中获取不到最新的speed
+  const timer = useRef();
+  const [overflow, setOverflow] = useState(false);
+  speed_.current = speed;
+
+  const startAnimation = (lineWidth)=>{
+    const animation = (timestamp) => {
+      let frame = Math.round(((timestamp*speed_.current)%(lineWidth*100))/100);
+      target.current.style.transform = `translate(-${frame}px,0px)`;
+      target.current.nextSibling.style.transform = `translate(-${frame}px,0px)`;
+      timer.current = requestAnimationFrame(animation);
+    };
+    timer.current = requestAnimationFrame(animation);
+  }
+  
+
+  useEffect(() => {
+    //初始化观察器，利用观察器来监视组件可视区域变化
+    observe.current = new IntersectionObserver(
+      function (entries) {
+        let entrie = entries[0];
+
+        if (entrie.boundingClientRect.width < entrie.rootBounds.width >= 1) {
+          //表示文字全部可视
+          cancelAnimationFrame(timer.current);
+          target.current.style.transform = "translate(0px,0px)"; //重置偏移
+          setOverflow(false);
+          return;
+        } else {
+          //否则文本溢出
+          if (!overflow) {
+            cancelAnimationFrame(timer.current);
+            startAnimation(entrie.target.offsetWidth);
+            //startAnimation(entrie.boundingClientRect.width);
+            setOverflow(true);
+          }
+        }
+      },
+      {
+        root: dom.current,
+        rootMargin: "0px 0px 0px 0px",
+        threshold: new Array(101).fill(0).map((d, i) => i / 100), //这里设置了[0-1]之间所有的阈值，保证每一帧的变化都能被观察到
+      }
+    );
+    // start observing
+    observe.current.observe(target.current);
+    return () => {
+      cancelAnimationFrame(timer.current);
+      observe.current.unobserve(target.current);
+      observe.current.disconnect();
+    };
+  }, []);
+
+  let textList = [value, value];
+  return (
+    <div
+      style={{
+        width: "100%",
+        ...style,
+        display: "flex",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        justifyContent: overflow ? "start" : style.justifyContent || "",
+      }}
+      ref={dom}
+    >
+      {textList.map((item, i) => {
+        return (
+          <span
+            key={i}
+            ref={i == 0 ? target : null}
+            style={{ display: i == 1 && !overflow ? "none" : "inline" }}
+          >
+            {item}&nbsp;
+          </span>
+        );
+      })}
+    </div>
+  );
+});