@easyv/charts 1.3.25 → 1.3.26

package/lib/components/Axis.js

@@ -23,6 +23,8 @@ var _context = require("../context");
 
 var _element = require("../element");
 
+var _TextOverflow = _interopRequireDefault(require("./TextOverflow"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -33,6 +35,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var defaultEvent = function defaultEvent() {};
 
+var defaultAppearance = {
+  angle: 0,
+  count: 6,
+  speed: 5,
+  width: "fit-content",
+  textOverflow: "ellipsis"
+};
 var defaultAlign = {
   textAnchor: 'middle',
   dominantBaseline: 'middle'
@@ -64,8 +73,7 @@ var getAxesPath = function getAxesPath(orientation, _ref2) {
  * @param orientation 坐标轴位置
  * @param rotate 旋转角度
  * @returns {
- *    dominantBaseline,
- *    textAnchor,
+ *    transform
  *    directionX,
  *    directionY
  * }
@@ -76,32 +84,28 @@ var getLayout = function getLayout(orientation, rotate) {
   switch (orientation) {
     case 'top':
       return {
-        dominantBaseline: 'text-after-edge',
-        textAnchor: rotate ? 'end' : 'middle',
+        transform: "translate(-50%,-100%) rotate(".concat(rotate, "deg)"),
         directionX: 1,
         directionY: -1
       };
 
     case 'bottom':
       return {
-        dominantBaseline: 'text-before-edge',
-        textAnchor: rotate ? 'start' : 'middle',
+        transform: "translate(-50%,0) rotate(".concat(rotate, "deg)"),
         directionX: 1,
         directionY: 1
       };
 
     case 'left':
       return {
-        dominantBaseline: 'middle',
-        textAnchor: 'end',
+        transform: "translate(-100%,-50%) rotate(".concat(rotate, "deg)"),
         directionX: -1,
         directionY: 1
       };
 
     case 'right':
       return {
-        dominantBaseline: 'middle',
-        textAnchor: 'start',
+        transform: "translate(0,-50%) rotate(".concat(rotate, "deg)"),
         directionX: 1,
         directionY: 1
       };
@@ -175,57 +179,54 @@ var Label = function Label(_ref5) {
       _ref5$config$translat = _ref5$config.translate,
       translateX = _ref5$config$translat.x,
       translateY = _ref5$config$translat.y,
-      _ref5$config$font = _ref5$config.font,
-      fontFamily = _ref5$config$font.fontFamily,
-      fontSize = _ref5$config$font.fontSize,
-      color = _ref5$config$font.color,
-      bold = _ref5$config$font.bold,
-      italic = _ref5$config$font.italic,
-      letterSpacing = _ref5$config$font.letterSpacing;
+      font = _ref5$config.font,
+      _ref5$config$appearan = _ref5$config.appearance;
+  _ref5$config$appearan = _ref5$config$appearan === void 0 ? defaultAppearance : _ref5$config$appearan;
+  var width = _ref5$config$appearan.width,
+      speed = _ref5$config$appearan.speed,
+      textOverflow = _ref5$config$appearan.textOverflow;
   if (!show) return null;
 
   var _label = formatter(label, config);
 
   var _getLayout = getLayout(orientation, rotate),
-      dominantBaseline = _getLayout.dominantBaseline,
-      textAnchor = _getLayout.textAnchor,
+      transform = _getLayout.transform,
       directionX = _getLayout.directionX,
       directionY = _getLayout.directionY;
 
   var isVertical = orientation == 'left' || orientation == 'right';
   var x = (isVertical ? tickSize * directionX : coordinate) + translateX * directionX;
   var y = (isVertical ? coordinate : tickSize * directionY) + translateY * directionY;
-  var translateText = 'translate(' + x + ', ' + y + ')';
 
   var _style = style && ((0, _typeof2["default"])(style) == 'object' ? style : style(_label));
 
-  return /*#__PURE__*/_react["default"].createElement("text", {
+  return /*#__PURE__*/_react["default"].createElement("foreignObject", {
+    width: "1",
+    height: "1",
+    x: x,
+    y: y,
+    style: {
+      overflow: "visible"
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     className: className,
-    style: _objectSpread(_objectSpread({}, _style), {}, {
-      whiteSpace: 'pre'
-    }),
     onClick: onClick,
     "data-data": JSON.stringify({
       x: label
     }),
-    dominantBaseline: dominantBaseline,
-    textAnchor: textAnchor,
-    fontFamily: fontFamily,
-    fontSize: fontSize,
-    fill: color,
-    fontWeight: bold ? 'bold' : 'normal',
-    fontStyle: italic ? 'italic' : 'normal',
-    letterSpacing: letterSpacing,
-    dx: "0",
-    dy: "0",
-    transform: Array.isArray(_label) ? rotate !== 0 ? isVertical ? translateText + ' rotate(' + rotate + ')' : 'rotate(' + rotate + ', ' + x + ', ' + y + ')' : isVertical ? translateText : 'translate(' + translateX + ', ' + translateY + ')' : translateText + ' rotate(' + rotate + ')'
-  }, !!Array.isArray(_label) ? _label.map(function (item, index) {
-    return /*#__PURE__*/_react["default"].createElement("tspan", {
-      key: index,
-      x: x,
-      dy: index != 0 ? '1em' : '0'
-    }, item);
-  }) : _label);
+    style: _objectSpread(_objectSpread(_objectSpread({}, _style), (0, _utils.getFontStyle)(font)), {}, {
+      whiteSpace: "pre"
+    })
+  }, /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
+    type: textOverflow,
+    speed: speed,
+    value: _label,
+    style: {
+      width: width,
+      transform: transform,
+      textAlign: "center"
+    }
+  })));
 };
 
 var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {

package/lib/components/Marquee.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,16 +13,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 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; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-/**
- * 文字跑马灯组件
- * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
- */
 var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var value = props.value,
       style = props.style,
@@ -58,7 +60,7 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
 
       if (entrie.boundingClientRect.width < entrie.rootBounds.width) {
         //表示文字全部可视
-        cancelAnimationFrame(timer.current);
+        cancelAnimationFrame(timer.current || 0);
         target.current.style.transform = "translate(0px,0px)"; //重置偏移
 
         setOverflow(false);
@@ -66,7 +68,7 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       } else {
         //否则文本溢出
         if (!overflow) {
-          cancelAnimationFrame(timer.current);
+          cancelAnimationFrame(timer.current || 0);
           startAnimation(entrie.target.offsetWidth); //startAnimation(entrie.boundingClientRect.width);
 
           setOverflow(true);
@@ -83,13 +85,13 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
 
     observe.current.observe(target.current);
     return function () {
-      cancelAnimationFrame(timer.current);
+      cancelAnimationFrame(timer.current || 0);
       observe.current.unobserve(target.current);
       observe.current.disconnect();
     };
   }, []);
   var textList = [value, value];
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
     style: _objectSpread(_objectSpread({
       width: "100%"
     }, style), {}, {
@@ -100,13 +102,13 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     }),
     ref: rootRef
   }, textList.map(function (item, i) {
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/_react["default"].createElement("span", {
       key: i,
       ref: i == 0 ? target : null,
       style: {
         display: i == 1 && !overflow ? "none" : "inline"
       }
-    }, item, overflow && /*#__PURE__*/React.createElement("span", null, "\xA0"));
+    }, item, overflow && /*#__PURE__*/_react["default"].createElement("span", null, "\xA0"));
   }));
 }));
 

package/lib/components/TextOverflow.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,18 +11,18 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _Marquee = _interopRequireDefault(require("./Marquee"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-/**
- * 文本溢出组件
- * eg: <TextOverflow  type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
- */
 var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var type = props.type,
       value = props.value,
@@ -47,20 +49,23 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
         return {
           whiteSpace: 'nowrap'
         };
+
+      default:
+        return {};
     }
   };
 
   var styles = _objectSpread(_objectSpread({}, getTextOverflow(type)), style);
 
-  return type == 'marquee' ? /*#__PURE__*/React.createElement(_Marquee["default"], {
+  return type == 'marquee' ? /*#__PURE__*/_react["default"].createElement(_Marquee["default"], {
     value: value,
     speed: speed,
     style: styles,
     ref: ref
-  }) : /*#__PURE__*/React.createElement("div", {
+  }) : /*#__PURE__*/_react["default"].createElement("div", {
     style: styles,
     ref: ref,
-    title: value || null
+    title: value || undefined
   }, " ", value);
 }));
 

package/package.json

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

package/src/components/Axis.tsx

@@ -9,10 +9,18 @@ import React, {
   CSSProperties,
   MouseEventHandler,
 } from 'react';
-import { getTickCoord, getGridCoord } from '../utils';
+import { getTickCoord, getGridCoord, getFontStyle } from '../utils';
 import { chartContext } from '../context';
 import { Line } from '../element';
+import TextOverflow from './TextOverflow';
 const defaultEvent = () => {};
+const defaultAppearance = {
+  angle:0,
+  count:6,
+  speed:5,
+  width:"fit-content",
+  textOverflow:"ellipsis"
+};
 const defaultAlign: Align = {
   textAnchor: 'middle',
   dominantBaseline: 'middle',
@@ -42,8 +50,7 @@ const getAxesPath: (
  * @param orientation 坐标轴位置
  * @param rotate 旋转角度
  * @returns {
- *    dominantBaseline,
- *    textAnchor,
+ *    transform
  *    directionX,
  *    directionY
  * }
@@ -52,37 +59,32 @@ const getLayout: (
   orientation: Orientation,
   rotate: number
 ) => {
-  dominantBaseline: string;
-  textAnchor: string;
+  transform:string,
   directionX: number;
   directionY: number;
 } = (orientation, rotate) => {
   switch (orientation) {
     case 'top':
       return {
-        dominantBaseline: 'text-after-edge',
-        textAnchor: rotate ? 'end' : 'middle',
+        transform:`translate(-50%,-100%) rotate(${rotate}deg)`,
         directionX: 1,
         directionY: -1,
       };
     case 'bottom':
       return {
-        dominantBaseline: 'text-before-edge',
-        textAnchor: rotate ? 'start' : 'middle',
+        transform:`translate(-50%,0) rotate(${rotate}deg)`,
         directionX: 1,
         directionY: 1,
       };
     case 'left':
       return {
-        dominantBaseline: 'middle',
-        textAnchor: 'end',
+        transform:`translate(-100%,-50%) rotate(${rotate}deg)`,
         directionX: -1,
         directionY: 1,
       };
     case 'right':
       return {
-        dominantBaseline: 'middle',
-        textAnchor: 'start',
+        transform:`translate(0,-50%) rotate(${rotate}deg)`,
         directionX: 1,
         directionY: 1,
       };
@@ -141,6 +143,13 @@ const Unit: ({
   );
 };
 
+type appearance = {
+  angle:number,
+  count:number,
+  speed:number,
+  width:number | string,
+  textOverflow:string
+}
 type LabelType = {
   className: string;
   orientation: Orientation;
@@ -155,6 +164,7 @@ type LabelType = {
     translate: Translate;
     font: Font;
     style: CSSProperties | Function;
+    appearance?:appearance
   };
 };
 
@@ -174,15 +184,17 @@ const Label: (
     show,
     style,
     translate: { x: translateX, y: translateY },
-    font: { fontFamily, fontSize, color, bold, italic, letterSpacing },
+    font,
+    appearance :{
+      width,
+      speed,
+      textOverflow
+    } = defaultAppearance
   },
 }) => {
   if (!show) return null;
   const _label = formatter(label, config);
-  const { dominantBaseline, textAnchor, directionX, directionY } = getLayout(
-    orientation,
-    rotate
-  );
+  const { transform, directionX, directionY } = getLayout(orientation, rotate);
   const isVertical = orientation == 'left' || orientation == 'right';
 
   const x =
@@ -190,50 +202,21 @@ const Label: (
   const y =
     (isVertical ? coordinate : tickSize * directionY) + translateY * directionY;
 
-  const translateText = 'translate(' + x + ', ' + y + ')';
-
   const _style = style && (typeof style == 'object' ? style : style(_label));
 
-  return (
-    <text
+  return <foreignObject width="1" height="1" x={x} y={y} style={{overflow:"visible"}}>
+    <div 
       className={className}
-      style={{
-        ..._style,
-        whiteSpace: 'pre',
-      }}
       onClick={onClick}
       data-data={JSON.stringify({ x: label })}
-      dominantBaseline={dominantBaseline}
-      textAnchor={textAnchor}
-      fontFamily={fontFamily}
-      fontSize={fontSize}
-      fill={color}
-      fontWeight={bold ? 'bold' : 'normal'}
-      fontStyle={italic ? 'italic' : 'normal'}
-      letterSpacing={letterSpacing}
-      dx='0'
-      dy='0'
-      transform={
-        Array.isArray(_label)
-          ? rotate !== 0
-            ? isVertical
-              ? translateText + ' rotate(' + rotate + ')'
-              : 'rotate(' + rotate + ', ' + x + ', ' + y + ')'
-            : isVertical
-            ? translateText
-            : 'translate(' + translateX + ', ' + translateY + ')'
-          : translateText + ' rotate(' + rotate + ')'
-      }
-    >
-      {!!Array.isArray(_label)
-        ? _label.map((item, index) => (
-            <tspan key={index} x={x} dy={index!=0?'1em':'0'}>
-              {item}
-            </tspan>
-          ))
-        : _label}
-    </text>
-  );
+      style={{
+        ..._style,
+        ...getFontStyle(font),
+        whiteSpace:"pre"
+      }}>
+      <TextOverflow type={textOverflow} speed={speed} value={_label} style={{width,transform,textAlign:"center"}}></TextOverflow>
+    </div>
+  </foreignObject>
 };
 
 export default memo(
@@ -252,7 +235,6 @@ export default memo(
     const { width, height } = useContext(chartContext);
     const x = orientation == 'right' ? width : 0;
     const y = orientation == 'bottom' ? height : 0;
-
     return (
       <>
         {axisLine && tickLine && (

package/src/components/{Marquee.js → Marquee.tsx}

@@ -1,11 +1,16 @@
-import { useEffect, memo, useRef, useState, forwardRef } from "react";
+import React, { useEffect, memo, useRef, useState, forwardRef, CSSProperties } from "react";
 
 /**
  * 文字跑马灯组件
  * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
+interface marquee{
+  value:string,
+  style:CSSProperties,
+  speed:number
+}
 
-export default memo(forwardRef((props, ref) => {
+export default memo(forwardRef((props:marquee, ref:any) => {
   const {
     value, // 文本
     style, // 样式
@@ -13,15 +18,15 @@ export default memo(forwardRef((props, ref) => {
   } = props;
 
   const rootRef = ref || useRef();
-  const target = useRef(null);
-  const observe = useRef(null);
-  const speed_ = useRef(0); //这里必须用一个ref绑定speed，否则animation中获取不到最新的speed
-  const timer = useRef();
-  const [overflow, setOverflow] = useState(false);
+  const target = useRef<any>(null);
+  const observe = useRef<any>(null);
+  const speed_ = useRef<number>(0); //这里必须用一个ref绑定speed，否则animation中获取不到最新的speed
+  const timer = useRef<number>();
+  const [overflow, setOverflow] = useState<boolean>(false);
   speed_.current = speed;
 
-  const startAnimation = (lineWidth)=>{
-    const animation = (timestamp) => {
+  const startAnimation = (lineWidth:number)=>{
+    const animation = (timestamp:number) => {
       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)`;
@@ -33,18 +38,18 @@ export default memo(forwardRef((props, ref) => {
   useEffect(() => {
     //初始化观察器，利用观察器来监视组件可视区域变化
     observe.current = new IntersectionObserver(
-      function (entries) {
+      function (entries:any) {
         let entrie = entries[0];
         if (entrie.boundingClientRect.width < entrie.rootBounds.width) {
           //表示文字全部可视
-          cancelAnimationFrame(timer.current);
-          target.current.style.transform = "translate(0px,0px)"; //重置偏移
+          cancelAnimationFrame(timer.current||0);
+          target.current!.style.transform = "translate(0px,0px)"; //重置偏移
           setOverflow(false);
           return;
         } else {
           //否则文本溢出
           if (!overflow) {
-            cancelAnimationFrame(timer.current);
+            cancelAnimationFrame(timer.current || 0);
             startAnimation(entrie.target.offsetWidth);
             //startAnimation(entrie.boundingClientRect.width);
             setOverflow(true);
@@ -60,7 +65,7 @@ export default memo(forwardRef((props, ref) => {
     // start observing
     observe.current.observe(target.current);
     return () => {
-      cancelAnimationFrame(timer.current);
+      cancelAnimationFrame(timer.current || 0);
       observe.current.unobserve(target.current);
       observe.current.disconnect();
     };

package/src/components/{TextOverflow.js → TextOverflow.tsx}

@@ -1,11 +1,18 @@
-import { memo, forwardRef } from 'react';
+import React, { memo, forwardRef, CSSProperties } from 'react';
 import Marquee from './Marquee'
 /**
  * 文本溢出组件
  * eg: <TextOverflow  type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
 
-export default memo(forwardRef((props, ref) => {
+interface flowText{
+  type:string,
+  value:string,
+  speed:number,
+  style:CSSProperties
+}
+
+export default memo(forwardRef((props:flowText, ref:any) => {
   const {
     type, //形式：跑马灯marquee /省略号 ellipsis/换行 break-word
     value, // 文本
@@ -13,7 +20,7 @@ export default memo(forwardRef((props, ref) => {
     speed = 5, // 动画速度
   } = props;
 
-  const getTextOverflow = (type) => {
+  const getTextOverflow = (type:string):CSSProperties => {
     switch (type) {
       case 'ellipsis':
         return {
@@ -30,6 +37,8 @@ export default memo(forwardRef((props, ref) => {
         return {
           whiteSpace: 'nowrap',
         };
+      default:
+        return {}
     }
   };
 
@@ -45,6 +54,6 @@ export default memo(forwardRef((props, ref) => {
       style={styles}
       ref={ref} />
   ) : (
-    <div style={styles} ref={ref} title={value || null}> {value}</div>
+    <div style={styles} ref={ref} title={value || undefined}> {value}</div>
   );
 }));