@sheinx/base 3.4.0-beta.1 → 3.4.0-beta.11

package/esm/virtual-scroll/virtual-scroll-list.js

@@ -10,7 +10,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';
 import { usePersistFn } from '@sheinx/hooks';
 import Scroll from "./scroll";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -28,30 +28,110 @@ var VirtualList = function VirtualList(props) {
     _props$tag = props.tag,
     tag = _props$tag === void 0 ? 'div' : _props$tag,
     tagClassName = props.tagClassName,
+    dynamicVirtual = props.dynamicVirtual,
     virtualRef = props.virtualRef,
     onControlTypeChange = props.onControlTypeChange;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
-    currentIndex = _useState2[0],
-    setCurrentIndex = _useState2[1];
+    top = _useState2[0],
+    setTop = _useState2[1];
   var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
-    top = _useState4[0],
-    setTop = _useState4[1];
+    offsetY = _useState4[0],
+    setOffsetY = _useState4[1];
+  var _useState5 = useState(props.data.length * lineHeight),
+    _useState6 = _slicedToArray(_useState5, 2),
+    scrollHeight = _useState6[0],
+    setHeight = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    startIndex = _useState8[0],
+    setStartIndex = _useState8[1];
   var wrapperRef = useRef(null);
-  var getScrollHeight = function getScrollHeight() {
-    var rows = Math.ceil(data.length);
-    return rows * lineHeight;
+  var _useRef = useRef({
+      cachedHeight: [],
+      controlScrollRate: null,
+      heightCallback: null,
+      preIndex: null,
+      topTimer: null,
+      rateTimer: null,
+      shouldUpdateHeight: true
+    }),
+    context = _useRef.current;
+  var getContentHeight = function getContentHeight(index) {
+    var sum = 0;
+    for (var i = 0; i <= index; i++) {
+      sum += context.cachedHeight[i] || lineHeight;
+    }
+    return sum;
   };
   var getCurrentIndex = usePersistFn(function () {
-    return currentIndex;
+    return startIndex;
   });
   var getTop = usePersistFn(function () {
     return top;
   });
+  var setRowHeight = usePersistFn(function (index, height) {
+    var beforeHeight = context.cachedHeight[index];
+    if (beforeHeight && beforeHeight === height) return;
+    context.cachedHeight[index] = height;
+    if (context.shouldUpdateHeight) {
+      setHeight(getContentHeight(props.data.length - 1));
+    }
+    var preIndex = context.preIndex;
+    // 解决: 从下往上滚 由于高度变化会导致滚动条跳动
+    if (preIndex && preIndex > startIndex && startIndex === index) {
+      // 发生在顶部
+      if (context.heightCallback) return;
+      var offset = height - (beforeHeight || lineHeight);
+      setOffsetY(function (s) {
+        return s + offset;
+      });
+    }
+  });
+  var updateRateScroll = usePersistFn(function (rate) {
+    var sumHeight = getContentHeight(props.data.length - 1);
+    if (sumHeight === scrollHeight) return;
+    context.shouldUpdateHeight = true;
+    context.heightCallback = function () {
+      if (wrapperRef && wrapperRef.current) {
+        var _scrollHeight = wrapperRef.current.scrollHeight;
+        var clientHeight = wrapperRef.current.clientHeight;
+        var nowTop = wrapperRef.current.scrollTop;
+        var max = _scrollHeight - clientHeight;
+        var _top = rate * max;
+        if (Math.abs(nowTop - _top) < 1) {
+          context.controlScrollRate = null;
+        } else {
+          context.controlScrollRate = rate;
+          wrapperRef.current.scrollTop = _top;
+        }
+      }
+    };
+    setHeight(sumHeight);
+  });
+  var updateIndexAndTopFromTop = function updateIndexAndTopFromTop(scrollTop) {
+    var sum = 0;
+    var nextCurrentIndex = 0;
+    var top = 0;
+    var maxIndex = Math.max(props.data.length - rowsInView, 0);
+    for (var i = 0; i <= maxIndex; i++) {
+      sum += context.cachedHeight[i] || lineHeight;
+      if (scrollTop < sum || i === maxIndex) {
+        nextCurrentIndex = i;
+        var beforeHeight = i === 0 ? 0 : sum - (context.cachedHeight[i] || lineHeight);
+        top = scrollTop - beforeHeight;
+        break;
+      }
+    }
+    if (nextCurrentIndex !== startIndex) {
+      setStartIndex(nextCurrentIndex);
+    }
+    setTop(top);
+  };
   var handleScrollByStep = usePersistFn(function (step, top) {
     var _wrapperRef$current;
-    var next = currentIndex + step;
+    var next = startIndex + step;
     (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 || _wrapperRef$current.scrollTo({
       top: next * lineHeight + (top || 0)
     });
@@ -61,21 +141,35 @@ var VirtualList = function VirtualList(props) {
   };
   var handleScroll = function handleScroll(info) {
     var _props$onScroll;
-    var current = Math.floor(info.scrollTop / lineHeight);
-    var top = info.scrollTop - current * lineHeight;
+    var height = info.height,
+      y = info.y,
+      fromDrag = info.fromDrag;
+    var scrollTop = info.scrollTop;
+    context.shouldUpdateHeight = !fromDrag;
+    var sumHeight = getContentHeight(props.data.length - 1);
+    var max = sumHeight - height;
+    if (scrollTop > max) {
+      scrollTop = max;
+    }
+    if (fromDrag) {
+      var _top2 = y * max;
+      updateIndexAndTopFromTop(_top2);
+      if (context.rateTimer) clearTimeout(context.rateTimer);
+      context.rateTimer = setTimeout(function () {
+        updateRateScroll(y);
+      }, 120);
+    } else {
+      updateIndexAndTopFromTop(scrollTop);
+    }
     (_props$onScroll = props.onScroll) === null || _props$onScroll === void 0 || _props$onScroll.call(props, info);
-    setTop(top);
-    setCurrentIndex(current);
   };
-  var scrollHeight = getScrollHeight();
   var renderList = function renderList() {
-    var start = currentIndex;
-    var end = currentIndex + rowsInView;
-    var items = data.slice(start, end);
+    var items = data.slice(startIndex, startIndex + rowsInView);
     var Tag = tag;
-    var shouldScroll = data.length * lineHeight > height;
+    var shouldScroll = getContentHeight(data.length - 1) > height;
     var nextStyle = _objectSpread({}, style);
     if (shouldScroll) nextStyle.height = height;
+    var scrollHeight = getContentHeight(data.length - 1);
     return /*#__PURE__*/_jsx(Scroll, {
       className: className,
       style: nextStyle,
@@ -96,16 +190,49 @@ var VirtualList = function VirtualList(props) {
         children: items.map(function (d, i) {
           if (d[groupKey]) {
             return /*#__PURE__*/_jsx(React.Fragment, {
-              children: customRenderItem(d, currentIndex + i, i)
+              children: customRenderItem(d, startIndex + i, i)
             }, i);
           }
           return /*#__PURE__*/_jsx(React.Fragment, {
-            children: renderItem(d, currentIndex + i, i)
-          }, i);
+            children: renderItem(d, startIndex + i, i, setRowHeight)
+          }, dynamicVirtual ? startIndex + i : i);
         })
       })
     });
   };
+  useEffect(function () {
+    // 记录preIndex
+    context.preIndex = startIndex;
+  }, [startIndex]);
+  useLayoutEffect(function () {
+    // 数据变化的时候清空掉 preIndex, 如果之前有缓存的index, setRowHeight 会有问题
+    setTop(0);
+    setStartIndex(0);
+    return function () {
+      context.preIndex = null;
+    };
+  }, [data.length]);
+  useEffect(function () {
+    if (offsetY) {
+      if (wrapperRef.current) {
+        setOffsetY(0);
+        setTop(function (s) {
+          return s + offsetY;
+        });
+        wrapperRef.current.scrollTop += offsetY;
+      }
+    }
+  }, [offsetY, startIndex]);
+  useEffect(function () {
+    setHeight(getContentHeight(props.data.length - 1));
+  }, [data.length]);
+  useEffect(function () {
+    if (context.heightCallback) {
+      var cb = context.heightCallback;
+      context.heightCallback = null;
+      cb();
+    }
+  }, [scrollHeight]);
   useEffect(function () {
     if (virtualRef !== null && virtualRef !== void 0 && virtualRef.current) {
       virtualRef.current.scrollByStep = handleScrollByStep;

package/esm/virtual-scroll/virtual-scroll-list.type.d.ts

@@ -6,6 +6,7 @@ export type VirtualListType = {
     getCurrentIndex?: () => number;
     getTop?: () => number;
     getHoverIndex?: () => number;
+    setStartIndex?: (index: number) => void;
 };
 export interface VirtualListProps<DataItem> extends Pick<CommonType, 'className' | 'style'> {
     data: DataItem[];
@@ -21,6 +22,7 @@ export interface VirtualListProps<DataItem> extends Pick<CommonType, 'className'
     tagClassName?: string;
     virtualRef?: React.MutableRefObject<VirtualListType>;
     scrollerStyle?: React.CSSProperties;
+    dynamicVirtual?: boolean;
     onControlTypeChange?: React.Dispatch<React.SetStateAction<'mouse' | 'keyboard'>>;
     onScroll?: (info: {
         scrollLeft: number;

package/esm/virtual-scroll/virtual-scroll-list.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"virtual-scroll-list.type.d.ts","sourceRoot":"","sources":["virtual-scroll-list.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,eAAe,CAAC,EAAE,MAAM,MAAM,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,MAAM,CAAC;CAC9B,CAAC;AAEF,MAAM,WAAW,gBAAgB,CAAC,QAAQ,CAAE,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IACzF,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAE9B,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,GAAG,CAAC;IAChB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IACrD,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,mBAAmB,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC;IACjF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;QAClB,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,QAAQ,EAAE,OAAO,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,IAAI,CAAC;CACZ"}
+{"version":3,"file":"virtual-scroll-list.type.d.ts","sourceRoot":"","sources":["virtual-scroll-list.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,eAAe,CAAC,EAAE,MAAM,MAAM,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,MAAM,WAAW,gBAAgB,CAAC,QAAQ,CAAE,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IACzF,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAE9B,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,GAAG,CAAC;IAChB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IACrD,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC;IACjF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;QAClB,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,QAAQ,EAAE,OAAO,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,IAAI,CAAC;CACZ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sheinx/base",
-  "version": "3.4.0-beta.1",
+  "version": "3.4.0-beta.11",
   "description": "",
   "keywords": [],
   "license": "MIT",
@@ -10,7 +10,7 @@
   "module": "./esm/index.js",
   "typings": "./cjs/index.d.ts",
   "dependencies": {
-    "@sheinx/hooks": "3.4.0-beta.1",
+    "@sheinx/hooks": "3.4.0-beta.11",
     "immer": "^10.0.0",
     "classnames": "^2.0.0",
     "@shined/reactive": "^0.1.3-alpha.0"