sense-react-timeline-editor 1.1.7 → 1.1.8

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback, memo, forwardRef, useMemo } from 'react';
+import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback, useMemo, memo, forwardRef } from 'react';
 import { AutoSizer, Grid, ScrollSync } from 'react-virtualized';
 import { useThrottleEffect, useThrottleFn } from 'ahooks';
 import { prefixNames } from 'framework-utils';
@@ -2906,6 +2906,10 @@ var EditRow = function EditRow(props) {
     setCursor = props.setCursor,
     hideCursor = props.hideCursor,
     uploadBgMusic = props.uploadBgMusic;
+  var _useState = useState(20),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleCount = _useState2[0],
+    setVisibleCount = _useState2[1];
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
   var clientWidth = document.documentElement.clientWidth;
@@ -2919,7 +2923,31 @@ var EditRow = function EditRow(props) {
     scale: scale,
     scaleWidth: scaleWidth
   });
-  console.log('time = ', timeStart, ', timeEnd = ', timeEnd);
+  var visibleActions = useMemo(function () {
+    return ((rowData === null || rowData === void 0 ? void 0 : rowData.actions) || []).filter(function (action) {
+      return action.end >= timeStart && action.start <= timeEnd;
+    }).sort(function (a, b) {
+      return a.start - b.start;
+    });
+  }, [rowData === null || rowData === void 0 ? void 0 : rowData.actions, timeStart, timeEnd]);
+  var renderActions = useMemo(function () {
+    return visibleActions.slice(0, visibleCount);
+  }, [visibleActions, visibleCount]);
+  useEffect(function () {
+    if (visibleCount < visibleActions.length) {
+      var timer = requestAnimationFrame(function () {
+        setVisibleCount(function (prev) {
+          return Math.min(prev + 20, visibleActions.length);
+        });
+      });
+      return function () {
+        return cancelAnimationFrame(timer);
+      };
+    }
+  }, [visibleCount, visibleActions.length]);
+  useEffect(function () {
+    setVisibleCount(20);
+  }, [scrollLeft, rowData === null || rowData === void 0 ? void 0 : rowData.id]);
   var handleTime = function handleTime(e) {
     if (!areaRef.current) return;
     var rect = areaRef.current.getBoundingClientRect();
@@ -2983,9 +3011,7 @@ var EditRow = function EditRow(props) {
         });
       }
     }
-  }, ((rowData === null || rowData === void 0 ? void 0 : rowData.actions) || []).filter(function (action) {
-    return action.end >= timeStart && action.start <= timeEnd;
-  }).map(function (action) {
+  }, renderActions.map(function (action) {
     return /*#__PURE__*/React.createElement(EditAction, _objectSpread2(_objectSpread2({
       key: action.id
     }, props), {}, {

package/dist/index.js

@@ -2916,6 +2916,10 @@ var EditRow = function EditRow(props) {
     setCursor = props.setCursor,
     hideCursor = props.hideCursor,
     uploadBgMusic = props.uploadBgMusic;
+  var _useState = React.useState(20),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleCount = _useState2[0],
+    setVisibleCount = _useState2[1];
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
   var clientWidth = document.documentElement.clientWidth;
@@ -2929,7 +2933,31 @@ var EditRow = function EditRow(props) {
     scale: scale,
     scaleWidth: scaleWidth
   });
-  console.log('time = ', timeStart, ', timeEnd = ', timeEnd);
+  var visibleActions = React.useMemo(function () {
+    return ((rowData === null || rowData === void 0 ? void 0 : rowData.actions) || []).filter(function (action) {
+      return action.end >= timeStart && action.start <= timeEnd;
+    }).sort(function (a, b) {
+      return a.start - b.start;
+    });
+  }, [rowData === null || rowData === void 0 ? void 0 : rowData.actions, timeStart, timeEnd]);
+  var renderActions = React.useMemo(function () {
+    return visibleActions.slice(0, visibleCount);
+  }, [visibleActions, visibleCount]);
+  React.useEffect(function () {
+    if (visibleCount < visibleActions.length) {
+      var timer = requestAnimationFrame(function () {
+        setVisibleCount(function (prev) {
+          return Math.min(prev + 20, visibleActions.length);
+        });
+      });
+      return function () {
+        return cancelAnimationFrame(timer);
+      };
+    }
+  }, [visibleCount, visibleActions.length]);
+  React.useEffect(function () {
+    setVisibleCount(20);
+  }, [scrollLeft, rowData === null || rowData === void 0 ? void 0 : rowData.id]);
   var handleTime = function handleTime(e) {
     if (!areaRef.current) return;
     var rect = areaRef.current.getBoundingClientRect();
@@ -2993,9 +3021,7 @@ var EditRow = function EditRow(props) {
         });
       }
     }
-  }, ((rowData === null || rowData === void 0 ? void 0 : rowData.actions) || []).filter(function (action) {
-    return action.end >= timeStart && action.start <= timeEnd;
-  }).map(function (action) {
+  }, renderActions.map(function (action) {
     return /*#__PURE__*/React__default['default'].createElement(EditAction, _objectSpread2(_objectSpread2({
       key: action.id
     }, props), {}, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sense-react-timeline-editor",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "author": "xzdarcy",
   "license": "MIT",
   "keywords": [