@easyv/charts 1.2.12 → 1.2.14

package/lib/components/Marquee.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = require("react");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -25,33 +27,27 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
       _props$speed = props.speed,
       speed = _props$speed === void 0 ? 5 : _props$speed;
   var dom = (0, _react.useRef)(null);
-  var content = (0, _react.useRef)(null); //dom和content盒子对象，避免speed变化时重新获取盒子对象
+  var content = (0, _react.useRef)(null);
 
-  var domRect = (0, _react.useRef)(null);
-  var contentRect = (0, _react.useRef)(null); //文本变化时，需要重新计算dom和content的宽高
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      fresh = _useState2[0],
+      setFresh = _useState2[1];
 
-  var textList = (0, _react.useMemo)(function () {
+  var textList = (0, _react.useRef)([value]);
+  var duration = (0, _react.useRef)(10 / speed);
+  (0, _react.useEffect)(function () {
     if (dom.current && content.current) {
-      var dom_ = dom.current;
-      domRect.current = dom_.getBoundingClientRect();
-      var content_ = content.current;
-      contentRect.current = content_.getBoundingClientRect();
+      var domRectWidth = dom.current.getBoundingClientRect().width;
+      var contentRectWidth = content.current.getBoundingClientRect().width;
 
-      if (domRect.current.width < contentRect.current.width) {
-        return [value, value];
+      if (domRectWidth < contentRectWidth) {
+        textList.current = [value, value];
+        duration.current = contentRectWidth / domRectWidth / speed * 10;
+        setFresh(!fresh);
       }
     }
-
-    return [value];
-  }, [value]); //value和speed变化时，直接更新duration
-
-  var duration = (0, _react.useMemo)(function () {
-    if (domRect.current && contentRect.current && domRect.current.width < contentRect.current.width) {
-      return contentRect.current.width / domRect.current.width / speed * 10;
-    }
-
-    return 5;
-  }, [speed]); //在head标签中注入keyframes动画
+  }, [value, speed]); //在head标签中注入keyframes动画
 
   (0, _react.useEffect)(function () {
     var md_marquee = document.getElementById('md_marquee'); //先查找是否已经存在md_marquee
@@ -68,24 +64,26 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
       document.getElementsByTagName('head')[0].appendChild(_style);
     }
   }, []);
+  var overflow = textList.current.length == 2;
   return /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({
       width: '100%'
     }, style), {}, {
       display: 'flex',
       whiteSpace: 'nowrap',
-      overflow: 'hidden'
+      overflow: 'hidden',
+      justifyContent: overflow ? "start" : style.justifyContent || ""
     }),
     ref: dom
-  }, textList.map(function (item, itemIndex) {
+  }, textList.current.map(function (item, itemIndex) {
     return /*#__PURE__*/React.createElement("span", {
       key: itemIndex,
-      style: textList.length == 2 ? {
+      style: overflow ? {
         //如果文本数量为2，则需要滚动
         animationName: 'md_marquee',
         animationTimingFunction: 'linear',
         animationIterationCount: 'infinite',
-        animationDuration: duration + 's'
+        animationDuration: duration.current + 's'
       } : {},
       ref: itemIndex == 0 ? content : null
     }, "\xA0", item);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.2.12",
+  "version": "1.2.14",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Marquee.js

@@ -1,4 +1,4 @@
-import { useEffect, memo, useRef, useMemo } from 'react';
+import { useEffect, memo, useRef, useState } from 'react';
 
 /**
  * 文字跑马灯组件
@@ -14,31 +14,23 @@ export default memo((props) => {
 
   const dom = useRef(null);
   const content = useRef(null);
-  //dom和content盒子对象，避免speed变化时重新获取盒子对象
-  const domRect = useRef(null);
-  const contentRect = useRef(null);
 
-  //文本变化时，需要重新计算dom和content的宽高
-  const textList = useMemo(()=>{
+  const [fresh,setFresh] = useState(false);
+  let textList = useRef([value]);
+  let duration = useRef(10/speed);
+
+  useEffect(() => {
     if(dom.current && content.current){
-      const dom_ = dom.current;
-      domRect.current = dom_.getBoundingClientRect();
-      let content_ = content.current;
-      contentRect.current = content_.getBoundingClientRect();
-      if (domRect.current.width < contentRect.current.width) {
-        return [value, value];
+      let domRectWidth =  dom.current.getBoundingClientRect().width;
+      let contentRectWidth = content.current.getBoundingClientRect().width;
+      if (domRectWidth < contentRectWidth) {
+        textList.current = [value,value];
+        duration.current = contentRectWidth / domRectWidth / speed * 10;
+        setFresh(!fresh);
       }
     }
-    return [value];
-  },[value])
-  
-  //value和speed变化时，直接更新duration
-  const duration = useMemo(() => {
-    if (domRect.current && contentRect.current && domRect.current.width < contentRect.current.width) {
-      return (contentRect.current.width / domRect.current.width / speed) * 10;
-    }
-    return 5
-  }, [speed]);
+  }, [value,speed]);
+ 
   //在head标签中注入keyframes动画
   useEffect(() => {
     let md_marquee = document.getElementById('md_marquee'); //先查找是否已经存在md_marquee
@@ -57,6 +49,7 @@ export default memo((props) => {
       document.getElementsByTagName('head')[0].appendChild(style);
     }
   }, []);
+  let overflow = textList.current.length==2;
   return (
     <span
       style={{
@@ -65,21 +58,22 @@ export default memo((props) => {
         display: 'flex',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
+        justifyContent:overflow?"start":(style.justifyContent || "")
       }}
       ref={dom}
     >
-      {textList.map((item, itemIndex) => {
+      {textList.current.map((item, itemIndex) => {
         return (
           <span
             key={itemIndex}
             style={
-              textList.length == 2
+              overflow
                 ? {
                     //如果文本数量为2，则需要滚动
                     animationName: 'md_marquee',
                     animationTimingFunction: 'linear',
                     animationIterationCount: 'infinite',
-                    animationDuration: duration + 's',
+                    animationDuration: duration.current + 's',
                   }
                 : {}
             }