@easyv/charts 1.3.22 → 1.3.23

package/lib/components/Marquee.js

@@ -21,12 +21,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * 文字跑马灯组件
  * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
-var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var value = props.value,
       style = props.style,
       _props$speed = props.speed,
       speed = _props$speed === void 0 ? 5 : _props$speed;
-  var dom = (0, _react.useRef)(null);
   var target = (0, _react.useRef)(null);
   var observe = (0, _react.useRef)(null);
   var speed_ = (0, _react.useRef)(0); //这里必须用一个ref绑定speed，否则animation中获取不到最新的speed
@@ -73,7 +72,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
         }
       }
     }, {
-      root: dom.current,
+      root: ref.current,
       rootMargin: "0px 0px 0px 0px",
       threshold: new Array(101).fill(0).map(function (d, i) {
         return i / 100;
@@ -98,7 +97,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
       overflow: "hidden",
       justifyContent: overflow ? "start" : style.justifyContent || ""
     }),
-    ref: dom
+    ref: ref
   }, textList.map(function (item, i) {
     return /*#__PURE__*/React.createElement("span", {
       key: i,
@@ -106,8 +105,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
       style: {
         display: i == 1 && !overflow ? "none" : "inline"
       }
-    }, item, "\xA0");
+    }, item, overflow && /*#__PURE__*/React.createElement("span", null, "\xA0"));
   }));
-});
+}));
 
 exports["default"] = _default;

package/lib/components/TextOverflow.js

@@ -21,7 +21,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * 文本溢出组件
  * eg: <TextOverflow  type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
-var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var type = props.type,
       value = props.value,
       style = props.style,
@@ -55,11 +55,13 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
   return type == 'marquee' ? /*#__PURE__*/React.createElement(_Marquee["default"], {
     value: value,
     speed: speed,
-    style: styles
+    style: styles,
+    ref: ref
   }) : /*#__PURE__*/React.createElement("div", {
     style: styles,
+    ref: ref,
     title: value || null
   }, " ", value);
-});
+}));
 
 exports["default"] = _default;

package/package.json

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

package/src/components/Marquee.js

@@ -1,18 +1,17 @@
-import { useEffect, memo, useRef, useState, useCallback } from "react";
+import { useEffect, memo, useRef, useState, forwardRef } from "react";
 
 /**
  * 文字跑马灯组件
  * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
 
-export default memo((props) => {
+export default memo(forwardRef((props, ref) => {
   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
@@ -54,7 +53,7 @@ export default memo((props) => {
         }
       },
       {
-        root: dom.current,
+        root: ref.current,
         rootMargin: "0px 0px 0px 0px",
         threshold: new Array(101).fill(0).map((d, i) => i / 100), //这里设置了[0-1]之间所有的阈值，保证每一帧的变化都能被观察到
       }
@@ -79,7 +78,7 @@ export default memo((props) => {
         overflow: "hidden",
         justifyContent: overflow ? "start" : style.justifyContent || "",
       }}
-      ref={dom}
+      ref={ref}
     >
       {textList.map((item, i) => {
         return (
@@ -88,10 +87,11 @@ export default memo((props) => {
             ref={i == 0 ? target : null}
             style={{ display: i == 1 && !overflow ? "none" : "inline" }}
           >
-            {item}&nbsp;
+            {item}
+            {overflow && <span>&nbsp;</span>}
           </span>
         );
       })}
     </div>
   );
-});
+}));

package/src/components/TextOverflow.js

@@ -1,11 +1,11 @@
-import { memo } from 'react';
+import { memo, forwardRef } from 'react';
 import Marquee from './Marquee'
 /**
  * 文本溢出组件
  * eg: <TextOverflow  type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
 
-export default memo((props) => {
+export default memo(forwardRef((props, ref) => {
   const {
     type, //形式：跑马灯marquee /省略号 ellipsis/换行 break-word
     value, // 文本
@@ -42,8 +42,9 @@ export default memo((props) => {
     <Marquee
       value={value}
       speed={speed}
-      style={styles} />
+      style={styles}
+      ref={ref} />
   ) : (
-    <div style={styles} title={value || null}> {value}</div>
+    <div style={styles} ref={ref} title={value || null}> {value}</div>
   );
-});
+}));