sense-react-timeline-editor 1.1.11 → 1.1.12

package/dist/components/row_rnd/interactable.d.ts

@@ -1,11 +1,12 @@
 import { DraggableOptions } from "@interactjs/actions/drag/plugin";
 import { ResizableOptions } from "@interactjs/actions/resize/plugin";
 import { Interactable } from "@interactjs/types";
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 export declare const InteractComp: FC<{
     interactRef?: React.MutableRefObject<Interactable>;
     draggable: boolean;
     draggableOptions: DraggableOptions;
     resizable: boolean;
     resizableOptions: ResizableOptions;
+    children: ReactNode;
 }>;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback, useMemo, memo, forwardRef } from 'react';
+import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback, useTransition, useMemo, memo, forwardRef } from 'react';
 import { AutoSizer, Grid, ScrollSync } from 'react-virtualized';
 import { useThrottleEffect, useThrottleFn } from 'ahooks';
 import { prefixNames } from 'framework-utils';
@@ -2018,7 +2018,7 @@ var Cursor = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [cursorTime, startLeft, scaleWidth, scale], {
     wait: 10
   });
-  var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
+  var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.scrollHeight) || 0;
   return /*#__PURE__*/React.createElement(RowDnd, {
     top: theme === 'light' ? 26 : 0,
     start: startLeft,
@@ -2924,6 +2924,10 @@ var EditRow = function EditRow(props) {
     _useState2 = _slicedToArray(_useState, 2),
     visibleCount = _useState2[0],
     setVisibleCount = _useState2[1];
+  var _useTransition = useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2),
+    isPending = _useTransition2[0],
+    startTransition = _useTransition2[1];
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
   var clientWidth = document.documentElement.clientWidth;
@@ -2949,14 +2953,11 @@ var EditRow = function EditRow(props) {
   }, [visibleActions, visibleCount]);
   useEffect(function () {
     if (visibleCount < visibleActions.length) {
-      var timer = requestAnimationFrame(function () {
+      startTransition(function () {
         setVisibleCount(function (prev) {
           return Math.min(prev + 20, visibleActions.length);
         });
       });
-      return function () {
-        return cancelAnimationFrame(timer);
-      };
     }
   }, [visibleCount, visibleActions.length]);
   useEffect(function () {
@@ -4065,7 +4066,8 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return prev + (cur.rowHeight || _rowHeight);
   }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
   if (minHeight) {
-    _totalHeight = "calc(100% - ".concat(minHeight + 16, "px)");
+    var calcHeight = "calc(100% - ".concat(minHeight + 16, "px)");
+    _totalHeight = "max(".concat(_totalHeight, "px, ").concat(calcHeight, ")");
   }
   return /*#__PURE__*/React.createElement("div", {
     ref: editAreaRef,
@@ -4196,6 +4198,7 @@ var TimeArea = function TimeArea(_ref) {
   var gridRef = useRef();
   /** 是否显示细分刻度 */
   var showUnit = scaleSplitCount > 0;
+  console.log('TimeArea scrollLeft = ', scrollLeft);
   var clientWidth = document.documentElement.clientWidth;
   /** 获取每个 cell 渲染内容 */
   var cellRenderer = function cellRenderer(_ref2) {
@@ -4691,6 +4694,15 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
           scrollLeft: Math.max(val, 0)
         });
       },
+      setScrollLeftFromTime: function setScrollLeftFromTime(val) {
+        var containerEl = document.querySelector('.timeline-editor');
+        if (!containerEl) return;
+        var left = startLeft + scaleWidth / scale * val;
+        containerEl.scrollLeft = Math.max(left, 0);
+        scrollSync.current && scrollSync.current.setState({
+          scrollLeft: Math.max(left, 0)
+        });
+      },
       setScrollTop: function setScrollTop(val) {
         scrollSync.current && scrollSync.current.setState({
           scrollTop: Math.max(val, 0)

package/dist/index.js

@@ -2028,7 +2028,7 @@ var Cursor = /*#__PURE__*/React__default['default'].forwardRef(function (props,
   }, [cursorTime, startLeft, scaleWidth, scale], {
     wait: 10
   });
-  var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
+  var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.scrollHeight) || 0;
   return /*#__PURE__*/React__default['default'].createElement(RowDnd, {
     top: theme === 'light' ? 26 : 0,
     start: startLeft,
@@ -2934,6 +2934,10 @@ var EditRow = function EditRow(props) {
     _useState2 = _slicedToArray(_useState, 2),
     visibleCount = _useState2[0],
     setVisibleCount = _useState2[1];
+  var _useTransition = React.useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2),
+    isPending = _useTransition2[0],
+    startTransition = _useTransition2[1];
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
   var clientWidth = document.documentElement.clientWidth;
@@ -2959,14 +2963,11 @@ var EditRow = function EditRow(props) {
   }, [visibleActions, visibleCount]);
   React.useEffect(function () {
     if (visibleCount < visibleActions.length) {
-      var timer = requestAnimationFrame(function () {
+      startTransition(function () {
         setVisibleCount(function (prev) {
           return Math.min(prev + 20, visibleActions.length);
         });
       });
-      return function () {
-        return cancelAnimationFrame(timer);
-      };
     }
   }, [visibleCount, visibleActions.length]);
   React.useEffect(function () {
@@ -4075,7 +4076,8 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
     return prev + (cur.rowHeight || _rowHeight);
   }, 0) + ((className || '').indexOf('1') > -1 ? 12 : 32);
   if (minHeight) {
-    _totalHeight = "calc(100% - ".concat(minHeight + 16, "px)");
+    var calcHeight = "calc(100% - ".concat(minHeight + 16, "px)");
+    _totalHeight = "max(".concat(_totalHeight, "px, ").concat(calcHeight, ")");
   }
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: editAreaRef,
@@ -4206,6 +4208,7 @@ var TimeArea = function TimeArea(_ref) {
   var gridRef = React.useRef();
   /** 是否显示细分刻度 */
   var showUnit = scaleSplitCount > 0;
+  console.log('TimeArea scrollLeft = ', scrollLeft);
   var clientWidth = document.documentElement.clientWidth;
   /** 获取每个 cell 渲染内容 */
   var cellRenderer = function cellRenderer(_ref2) {
@@ -4701,6 +4704,15 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
           scrollLeft: Math.max(val, 0)
         });
       },
+      setScrollLeftFromTime: function setScrollLeftFromTime(val) {
+        var containerEl = document.querySelector('.timeline-editor');
+        if (!containerEl) return;
+        var left = startLeft + scaleWidth / scale * val;
+        containerEl.scrollLeft = Math.max(left, 0);
+        scrollSync.current && scrollSync.current.setState({
+          scrollLeft: Math.max(left, 0)
+        });
+      },
       setScrollTop: function setScrollTop(val) {
         scrollSync.current && scrollSync.current.setState({
           scrollTop: Math.max(val, 0)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sense-react-timeline-editor",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "author": "xzdarcy",
   "license": "MIT",
   "keywords": [
@@ -54,8 +54,8 @@
   "devDependencies": {
     "@types/howler": "^2.2.4",
     "@types/lodash": "^4.14.177",
-    "@types/react": "^17.0.17",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
     "@umijs/test": "^3.0.5",
     "dumi": "^1.0.17",
     "father-build": "^1.17.2",
@@ -64,8 +64,8 @@
     "lodash": "^4.17.21",
     "lottie-web": "^5.8.1",
     "prettier": "^2.2.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "standard-version": "^9.5.0",
     "typescript": "^4.8.4",
     "yorkie": "^2.0.0"