@easyv/charts 1.2.2 → 1.2.3

package/lib/components/Marquee.js

@@ -72,8 +72,9 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
     }
   }, []);
   return /*#__PURE__*/React.createElement("span", {
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      width: "100%",
+    style: _objectSpread(_objectSpread({
+      width: "100%"
+    }, style), {}, {
       display: "flex",
       whiteSpace: "nowrap",
       overflow: "hidden"

package/lib/components/index.js

@@ -143,6 +143,12 @@ Object.defineProperty(exports, "PieChart", {
     return _PieChart["default"];
   }
 });
+Object.defineProperty(exports, "Marquee", {
+  enumerable: true,
+  get: function get() {
+    return _Marquee["default"];
+  }
+});
 exports.Area = void 0;
 
 var _Mapping = _interopRequireDefault(require("./Mapping"));
@@ -191,5 +197,7 @@ var _CartesianChart = _interopRequireDefault(require("./CartesianChart"));
 
 var _PieChart = _interopRequireDefault(require("./PieChart"));
 
+var _Marquee = _interopRequireDefault(require("./Marquee"));
+
 var Area = _Line["default"];
 exports.Area = Area;

package/package.json

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

package/src/components/Marquee.js

@@ -1,74 +1,93 @@
-import { useState, useEffect, memo, useRef } from "react";
+import { useState, useEffect, memo, useRef } from 'react';
 
 /**
  * 文字跑马灯组件
  * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
 
-export default memo((props)=>{
-    const {
-        value,          // 文本
-        style,          // 样式
-        speed = 5       // 动画速度
-    } = props;
+export default memo((props) => {
+  const {
+    value, // 文本
+    style, // 样式
+    speed = 5, // 动画速度
+  } = props;
 
-    const dom = useRef(null);
-    const content = useRef(null);
-    const duration = useRef(1);
-    //dom和content盒子对象，避免speed变化时重新获取盒子对象
-    const domRect = useRef(null);
-    const contentRect = useRef(null);   
+  const dom = useRef(null);
+  const content = useRef(null);
+  const duration = useRef(1);
+  //dom和content盒子对象，避免speed变化时重新获取盒子对象
+  const domRect = useRef(null);
+  const contentRect = useRef(null);
 
-    const [textList, setTextList] = useState([value]);
+  const [textList, setTextList] = useState([value]);
 
-    //文本变化时，需要重新计算dom和content的宽高
-    useEffect(()=>{
-        const dom_ = dom.current;
-        domRect.current = dom_.getBoundingClientRect();
-        let content_ = content.current;
-        contentRect.current = content_.getBoundingClientRect();
-        if(domRect.current.width < contentRect.current.width){
-            setTextList([value,value]);
-        }
-    },[value]);
-    //value和speed变化时，直接更新duration
-    useEffect(()=>{
-        if(domRect.current.width < contentRect.current.width){
-            duration.current = (contentRect.current.width/domRect.current.width/speed)*10;
-        }
-    },[speed]);
-    //在head标签中注入keyframes动画
-    useEffect(()=>{
-        let md_marquee = document.getElementById("md_marquee");     //先查找是否已经存在md_marquee
-        if(!md_marquee){        //不存在时再注入style标签
-            const keyframes = `@keyframes md_marquee {0%{
+  //文本变化时，需要重新计算dom和content的宽高
+  useEffect(() => {
+    const dom_ = dom.current;
+    domRect.current = dom_.getBoundingClientRect();
+    let content_ = content.current;
+    contentRect.current = content_.getBoundingClientRect();
+    if (domRect.current.width < contentRect.current.width) {
+      setTextList([value, value]);
+    }
+  }, [value]);
+  //value和speed变化时，直接更新duration
+  useEffect(() => {
+    if (domRect.current.width < contentRect.current.width) {
+      duration.current =
+        (contentRect.current.width / domRect.current.width / speed) * 10;
+    }
+  }, [speed]);
+  //在head标签中注入keyframes动画
+  useEffect(() => {
+    let md_marquee = document.getElementById('md_marquee'); //先查找是否已经存在md_marquee
+    if (!md_marquee) {
+      //不存在时再注入style标签
+      const keyframes = `@keyframes md_marquee {0%{
                 transform: translate(0,0);
             }
             100%{
                 transform: translate(-100%,0);
             }}`;
-            const style = document.createElement('style');
-            style.id = 'md_marquee';
-            style.innerHTML = keyframes;
-            // 将style样式存放到head标签
-            document.getElementsByTagName('head')[0].appendChild(style);
-        }
-    },[]);
-    return <span style={{...style,width:"100%",display:"flex",whiteSpace:"nowrap",overflow:"hidden"}} ref={dom}>
-    {
-      textList.map((item, itemIndex) => {
+      const style = document.createElement('style');
+      style.id = 'md_marquee';
+      style.innerHTML = keyframes;
+      // 将style样式存放到head标签
+      document.getElementsByTagName('head')[0].appendChild(style);
+    }
+  }, []);
+  return (
+    <span
+      style={{
+        width: '100%',
+        ...style,
+        display: 'flex',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+      }}
+      ref={dom}
+    >
+      {textList.map((item, itemIndex) => {
         return (
-          <span key={itemIndex} 
-            style={textList.length==2?{         //如果文本数量为2，则需要滚动
-                animationName:"md_marquee",
-                animationTimingFunction:"linear",
-                animationIterationCount:"infinite",
-                animationDuration: duration.current + "s" 
-            }:{}} 
-            ref={itemIndex==0?content:null}>
+          <span
+            key={itemIndex}
+            style={
+              textList.length == 2
+                ? {
+                    //如果文本数量为2，则需要滚动
+                    animationName: 'md_marquee',
+                    animationTimingFunction: 'linear',
+                    animationIterationCount: 'infinite',
+                    animationDuration: duration.current + 's',
+                  }
+                : {}
+            }
+            ref={itemIndex == 0 ? content : null}
+          >
             &nbsp;{item}
-          </span>)
-      })
-    }
-  </span>;
-})
+          </span>
+        );
+      })}
+    </span>
+  );
+});

package/src/components/index.js

@@ -21,6 +21,7 @@ import Chart from './Chart';
 import ConicalGradient from './ConicalGradient';
 import CartesianChart from './CartesianChart';
 import PieChart from './PieChart';
+import Marquee from './Marquee';
 
 const Area = Line;
 export {
@@ -46,6 +47,7 @@ export {
   Carousel,
   CartesianChart,
   PieChart,
+  Marquee,
   Chart,
   ConicalGradient,
 };