@kdcloudjs/kdesign 1.6.34 → 1.6.36

package/es/virtual-list/virtual-list.js

@@ -1,30 +1,22 @@
 import _typeof from "@babel/runtime-corejs3/helpers/typeof";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
-
 var _context;
-
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
-}; // Reference: https://github.com/arco-design/arco-design/blob/main/components/_class/VirtualList/index.tsx
-
-
+};
+// Reference: https://github.com/arco-design/arco-design/blob/main/components/_class/VirtualList/index.tsx
 import React, { useEffect, useImperativeHandle, useRef, useMemo, useState, useLayoutEffect } from 'react';
 import { getValidScrollTop, getCompareItemRelativeTop, getItemAbsoluteTop, getItemRelativeTop, getNodeHeight, getRangeIndex, getScrollPercentage, GHOST_ITEM_KEY, getLongestItemIndex, getLocationItem } from './utils/itemUtil';
 import { raf, caf } from '../_utils/raf';
@@ -35,9 +27,9 @@ import ResizeObserver from '../_utils/resizeObserver';
 export function isNumber(obj) {
   return Object.prototype.toString.call(obj) === '[object Number]' && obj === obj; // eslint-disable-line
 }
+
 var DEFAULT_VIRTUAL_ITEM_HEIGHT = 32;
 var KEY_VIRTUAL_ITEM_HEIGHT = "__virtual_item_height_".concat(_sliceInstanceProperty(_context = Math.random().toFixed(5)).call(_context, 2));
-
 var useComputeVirtualItemHeight = function useComputeVirtualItemHeight(refItemHeightMap) {
   var forceUpdate = useForceUpdate();
   var heightMap = refItemHeightMap.current;
@@ -45,8 +37,7 @@ var useComputeVirtualItemHeight = function useComputeVirtualItemHeight(refItemHe
     if (_Object$keys(heightMap).length && !heightMap[KEY_VIRTUAL_ITEM_HEIGHT]) {
       heightMap[KEY_VIRTUAL_ITEM_HEIGHT] = _Object$entries(heightMap).reduce(function (sum, _ref, currentIndex, array) {
         var _ref2 = _slicedToArray(_ref, 2),
-            currentHeight = _ref2[1];
-
+          currentHeight = _ref2[1];
         var nextSum = sum + currentHeight;
         return currentIndex === array.length - 1 ? Math.round(nextSum / array.length) : nextSum;
       }, 0);
@@ -54,60 +45,52 @@ var useComputeVirtualItemHeight = function useComputeVirtualItemHeight(refItemHe
     }
   }, [_Object$keys(heightMap).length]);
 };
-
 var useCacheChildrenNodes = function useCacheChildrenNodes(children) {
   var refCacheMap = useRef({});
   var refPrevChildren = useRef(children);
   useEffect(function () {
     refPrevChildren.current = children;
   }, [children]);
-
   if (children !== refPrevChildren.current) {
     refCacheMap.current = {};
   }
-
   return function (item, index, props) {
     // eslint-disable-next-line no-prototype-builtins
     if (!refCacheMap.current.hasOwnProperty(index)) {
       refCacheMap.current[index] = children(item, index, props);
     }
-
     return refCacheMap.current[index];
   };
 };
-
 var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var style = props.style,
-      className = props.className,
-      children = props.children,
-      _props$data = props.data,
-      data = _props$data === void 0 ? [] : _props$data,
-      itemKey = props.itemKey,
-      _props$threshold = props.threshold,
-      threshold = _props$threshold === void 0 ? 100 : _props$threshold,
-      _props$wrapper = props.wrapper,
-      WrapperTagName = _props$wrapper === void 0 ? 'div' : _props$wrapper,
-      _props$height = props.height,
-      propHeight = _props$height === void 0 ? 300 : _props$height,
-      _props$isStaticItemHe = props.isStaticItemHeight,
-      isStaticItemHeight = _props$isStaticItemHe === void 0 ? true : _props$isStaticItemHe,
-      propItemHeight = props.itemHeight,
-      measureLongestItem = props.measureLongestItem,
-      scrollOptions = props.scrollOptions,
-      onScroll = props.onScroll,
-      _props$needFiller = props.needFiller,
-      needFiller = _props$needFiller === void 0 ? true : _props$needFiller,
-      outerStyle = props.outerStyle,
-      restProps = __rest(props, ["style", "className", "children", "data", "itemKey", "threshold", "wrapper", "height", "isStaticItemHeight", "itemHeight", "measureLongestItem", "scrollOptions", "onScroll", "needFiller", "outerStyle"]);
-
+    className = props.className,
+    children = props.children,
+    _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    itemKey = props.itemKey,
+    _props$threshold = props.threshold,
+    threshold = _props$threshold === void 0 ? 100 : _props$threshold,
+    _props$wrapper = props.wrapper,
+    WrapperTagName = _props$wrapper === void 0 ? 'div' : _props$wrapper,
+    _props$height = props.height,
+    propHeight = _props$height === void 0 ? 300 : _props$height,
+    _props$isStaticItemHe = props.isStaticItemHeight,
+    isStaticItemHeight = _props$isStaticItemHe === void 0 ? true : _props$isStaticItemHe,
+    propItemHeight = props.itemHeight,
+    measureLongestItem = props.measureLongestItem,
+    scrollOptions = props.scrollOptions,
+    onScroll = props.onScroll,
+    _props$needFiller = props.needFiller,
+    needFiller = _props$needFiller === void 0 ? true : _props$needFiller,
+    outerStyle = props.outerStyle,
+    restProps = __rest(props, ["style", "className", "children", "data", "itemKey", "threshold", "wrapper", "height", "isStaticItemHeight", "itemHeight", "measureLongestItem", "scrollOptions", "onScroll", "needFiller", "outerStyle"]);
   var styleListMaxHeight = style && style.maxHeight || propHeight;
   var refItemHeightMap = useRef({});
-
   var _useState = useState(200),
-      _useState2 = _slicedToArray(_useState, 2),
-      stateHeight = _useState2[0],
-      setStateHeight = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    stateHeight = _useState2[0],
+    setStateHeight = _useState2[1];
   var renderChild = useCacheChildrenNodes(children);
   useComputeVirtualItemHeight(refItemHeightMap);
   var itemCount = data.length;
@@ -125,61 +108,51 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var getPadding = function getPadding(property) {
         return +window.getComputedStyle(refList.current)[property].replace(/\D/g, '');
       };
-
       return {
         top: getPadding('paddingTop'),
         bottom: getPadding('paddingBottom')
       };
     }
-
     return {
       top: 0,
       bottom: 0
     };
   }, [refList.current]);
-
   var _useStateWithPromise = useStateWithPromise({
-    status: 'NONE',
-    startIndex: 0,
-    endIndex: 0,
-    itemIndex: 0,
-    itemOffsetPtg: 0,
-    startItemTop: 0,
-    scrollTop: 0
-  }),
-      _useStateWithPromise2 = _slicedToArray(_useStateWithPromise, 2),
-      state = _useStateWithPromise2[0],
-      setState = _useStateWithPromise2[1];
-
+      status: 'NONE',
+      startIndex: 0,
+      endIndex: 0,
+      itemIndex: 0,
+      itemOffsetPtg: 0,
+      startItemTop: 0,
+      scrollTop: 0
+    }),
+    _useStateWithPromise2 = _slicedToArray(_useStateWithPromise, 2),
+    state = _useStateWithPromise2[0],
+    setState = _useStateWithPromise2[1];
   var prevData = usePrevious(data) || [];
   var isFirstRender = useIsFirstRender();
-
   var getItemKey = function getItemKey(item, index) {
     return typeof itemKey === 'function' ? itemKey(item, index) : typeof itemKey === 'string' ? item[itemKey] : item.key || index;
   };
-
   var getItemKeyByIndex = function getItemKeyByIndex(index) {
     var items = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : data;
-
     if (index === items.length) {
       return GHOST_ITEM_KEY;
     }
-
     var item = items[index];
     return item !== undefined ? getItemKey(item, index) : null;
   };
-
   var getCachedItemHeight = function getCachedItemHeight(key) {
     return refItemHeightMap.current[key] || itemHeight;
   };
-
   var internalScrollTo = function internalScrollTo(relativeScroll) {
     var compareItemIndex = relativeScroll.itemIndex,
-        compareItemRelativeTop = relativeScroll.relativeTop;
+      compareItemRelativeTop = relativeScroll.relativeTop;
     if (!refList.current) return;
     var _refList$current = refList.current,
-        scrollHeight = _refList$current.scrollHeight,
-        clientHeight = _refList$current.clientHeight;
+      scrollHeight = _refList$current.scrollHeight,
+      clientHeight = _refList$current.clientHeight;
     var originScrollTop = state.scrollTop;
     var maxScrollTop = scrollHeight - clientHeight;
     var bestSimilarity = Number.MAX_VALUE;
@@ -189,7 +162,6 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var bestStartIndex = null;
     var bestEndIndex = null;
     var missSimilarity = 0;
-
     for (var i = 0; i < maxScrollTop; i++) {
       var scrollTop = getIndexByStartLoc(0, maxScrollTop, originScrollTop, i);
       var scrollPtg = getScrollPercentage({
@@ -197,13 +169,11 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
         scrollHeight: scrollHeight,
         clientHeight: clientHeight
       });
-
       var _getRangeIndex = getRangeIndex(scrollPtg, itemCount, itemCountVisible),
-          itemIndex = _getRangeIndex.itemIndex,
-          itemOffsetPtg = _getRangeIndex.itemOffsetPtg,
-          startIndex = _getRangeIndex.startIndex,
-          endIndex = _getRangeIndex.endIndex;
-
+        itemIndex = _getRangeIndex.itemIndex,
+        itemOffsetPtg = _getRangeIndex.itemOffsetPtg,
+        startIndex = _getRangeIndex.startIndex,
+        endIndex = _getRangeIndex.endIndex;
       if (startIndex <= compareItemIndex && compareItemIndex <= endIndex) {
         var locatedItemRelativeTop = getItemRelativeTop({
           itemHeight: getCachedItemHeight(getItemKeyByIndex(itemIndex)),
@@ -222,7 +192,6 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
           itemElementHeights: refItemHeightMap.current
         });
         var similarity = Math.abs(compareItemTop - compareItemRelativeTop);
-
         if (similarity < bestSimilarity) {
           bestSimilarity = similarity;
           bestScrollTop = scrollTop;
@@ -235,12 +204,10 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
           missSimilarity += 1;
         }
       }
-
       if (missSimilarity > 10) {
         break;
       }
     }
-
     if (bestScrollTop !== null) {
       refLockScroll.current = true;
       refList.current.scrollTop = bestScrollTop;
@@ -253,29 +220,25 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
         endIndex: bestEndIndex
       }));
     }
-
     refRafId.current = raf(function () {
       refLockScroll.current = false;
     });
   };
-
   var rawListScrollHandler = function rawListScrollHandler(event) {
     if (!refList.current) return;
     var _refList$current2 = refList.current,
-        rawScrollTop = _refList$current2.scrollTop,
-        clientHeight = _refList$current2.clientHeight,
-        scrollHeight = _refList$current2.scrollHeight;
+      rawScrollTop = _refList$current2.scrollTop,
+      clientHeight = _refList$current2.clientHeight,
+      scrollHeight = _refList$current2.scrollHeight;
     var scrollTop = getValidScrollTop(rawScrollTop, scrollHeight - clientHeight);
     var scrollPtg = getScrollPercentage({
       scrollTop: scrollTop,
       clientHeight: clientHeight,
       scrollHeight: scrollHeight
     });
-
     var _getLocationItem = getLocationItem(scrollPtg, itemCount),
-        index = _getLocationItem.index,
-        offsetPtg = _getLocationItem.offsetPtg;
-
+      index = _getLocationItem.index,
+      offsetPtg = _getLocationItem.offsetPtg;
     setState(_extends(_extends({}, state), {
       scrollTop: scrollTop,
       itemIndex: index,
@@ -283,32 +246,27 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }));
     event && onScroll && onScroll(event);
   };
-
   var virtualListScrollHandler = function virtualListScrollHandler(event) {
     var isInit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var scrollHeight = itemTotalHeight;
     if (!refList.current) return;
     var _refList$current3 = refList.current,
-        rawScrollTop = _refList$current3.scrollTop,
-        clientHeight = _refList$current3.clientHeight;
+      rawScrollTop = _refList$current3.scrollTop,
+      clientHeight = _refList$current3.clientHeight;
     var scrollTop = getValidScrollTop(rawScrollTop, scrollHeight - clientHeight);
-
     if (!isInit && (scrollTop === state.scrollTop || refLockScroll.current)) {
       return;
     }
-
     var scrollPtg = getScrollPercentage({
       scrollTop: scrollTop,
       clientHeight: clientHeight,
       scrollHeight: scrollHeight
     });
-
     var _getRangeIndex2 = getRangeIndex(scrollPtg, itemCount, itemCountVisible),
-        itemIndex = _getRangeIndex2.itemIndex,
-        itemOffsetPtg = _getRangeIndex2.itemOffsetPtg,
-        startIndex = _getRangeIndex2.startIndex,
-        endIndex = _getRangeIndex2.endIndex;
-
+      itemIndex = _getRangeIndex2.itemIndex,
+      itemOffsetPtg = _getRangeIndex2.itemOffsetPtg,
+      startIndex = _getRangeIndex2.startIndex,
+      endIndex = _getRangeIndex2.endIndex;
     setState(_extends(_extends({}, state), {
       scrollTop: scrollTop,
       itemIndex: itemIndex,
@@ -319,7 +277,6 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }));
     event && onScroll && onScroll(event);
   };
-
   useEffect(function () {
     return function () {
       refRafId.current && caf(refRafId.current);
@@ -330,7 +287,6 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
       if (isFirstRender) {
         refList.current.scrollTop = 0;
       }
-
       virtualListScrollHandler(null, true);
     }
   }, [itemCountVisible]);
@@ -338,12 +294,10 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var changedItemIndex = null;
     var switchTo = refIsVirtual.current !== isVirtual ? isVirtual ? 'virtual' : 'raw' : '';
     refIsVirtual.current = isVirtual;
-
     if (viewportHeight && prevData.length !== data.length) {
       var diff = findListDiffIndex(prevData, data, getItemKey);
       changedItemIndex = diff ? diff.index : null;
     }
-
     if ((switchTo || isVirtual && changedItemIndex) && refList.current) {
       var clientHeight = refList.current.clientHeight;
       var locatedItemRelativeTop = getItemRelativeTop({
@@ -356,14 +310,11 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }),
         clientHeight: clientHeight
       });
-
       if (switchTo === 'raw') {
         var rawTop = locatedItemRelativeTop;
-
         for (var index = 0; index < state.itemIndex; index++) {
           rawTop -= getCachedItemHeight(getItemKeyByIndex(index));
         }
-
         refList.current.scrollTop = -rawTop;
         refLockScroll.current = true;
         refRafId.current = raf(function () {
@@ -380,9 +331,9 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
   useLayoutEffect(function () {
     if (state.status === 'MEASURE_START' && refList.current) {
       var _refList$current4 = refList.current,
-          scrollTop = _refList$current4.scrollTop,
-          scrollHeight = _refList$current4.scrollHeight,
-          clientHeight = _refList$current4.clientHeight;
+        scrollTop = _refList$current4.scrollTop,
+        scrollHeight = _refList$current4.scrollHeight,
+        clientHeight = _refList$current4.clientHeight;
       var scrollPtg = getScrollPercentage({
         scrollTop: scrollTop,
         scrollHeight: scrollHeight,
@@ -395,11 +346,9 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
         itemHeight: getCachedItemHeight(getItemKeyByIndex(state.itemIndex)),
         itemOffsetPtg: state.itemOffsetPtg
       });
-
       for (var index = state.itemIndex - 1; index >= state.startIndex; index--) {
         startItemTop -= getCachedItemHeight(getItemKeyByIndex(index));
       }
-
       setState(_extends(_extends({}, state), {
         startItemTop: startItemTop,
         status: 'MEASURE_DONE'
@@ -413,31 +362,25 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
         refRafId.current && caf(refRafId.current);
         refRafId.current = raf(function () {
           var _a;
-
           if (typeof arg === 'number') {
             refList.current.scrollTop = arg;
             return;
           }
-
           var index = 'index' in arg ? arg.index : 'key' in arg ? _findIndexInstanceProperty(data).call(data, function (item, index) {
             return getItemKey(item, index) === arg.key;
           }) : 0;
           var item = data[index];
-
           if (!item) {
             return;
           }
-
           var align = _typeof(arg) === 'object' && ((_a = arg.options) === null || _a === void 0 ? void 0 : _a.block) ? arg.options.block : (scrollOptions === null || scrollOptions === void 0 ? void 0 : scrollOptions.block) || 'nearest';
           var _refList$current5 = refList.current,
-              clientHeight = _refList$current5.clientHeight,
-              scrollTop = _refList$current5.scrollTop;
-
+            clientHeight = _refList$current5.clientHeight,
+            scrollTop = _refList$current5.scrollTop;
           if (isVirtual && !isStaticItemHeight) {
             if (align === 'nearest') {
               var itemIndex = state.itemIndex,
-                  itemOffsetPtg = state.itemOffsetPtg;
-
+                itemOffsetPtg = state.itemOffsetPtg;
               if (Math.abs(itemIndex - index) < itemCountVisible) {
                 var itemTop = getItemRelativeTop({
                   itemHeight: getCachedItemHeight(getItemKeyByIndex(itemIndex)),
@@ -445,7 +388,6 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
                   clientHeight: clientHeight,
                   scrollPtg: getScrollPercentage(refList.current)
                 });
-
                 if (index < itemIndex) {
                   for (var i = index; i < itemIndex; i++) {
                     itemTop -= getCachedItemHeight(getItemKeyByIndex(i));
@@ -455,7 +397,6 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
                     itemTop += getCachedItemHeight(getItemKeyByIndex(_i));
                   }
                 }
-
                 if (itemTop < 0 || itemTop > clientHeight) {
                   align = itemTop < 0 ? 'start' : 'end';
                 } else {
@@ -465,7 +406,6 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
                 align = index < itemIndex ? 'start' : 'end';
               }
             }
-
             setState(_extends(_extends({}, state), {
               startIndex: Math.max(0, index - itemCountVisible),
               endIndex: Math.min(itemCount - 1, index + itemCountVisible)
@@ -479,18 +419,14 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
           } else {
             var indexItemHeight = getCachedItemHeight(getItemKeyByIndex(index));
             var _itemTop = 0;
-
             for (var _i2 = 0; _i2 < index; _i2++) {
               _itemTop += getCachedItemHeight(getItemKeyByIndex(_i2));
             }
-
             var itemBottom = _itemTop + indexItemHeight;
             var itemMiddle = _itemTop + indexItemHeight / 2;
-
             if (itemMiddle > scrollTop && itemMiddle < clientHeight + scrollTop) {
               return;
             }
-
             if (align === 'nearest') {
               if (_itemTop < scrollTop) {
                 align = 'start';
@@ -498,16 +434,13 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
                 align = 'end';
               }
             }
-
             var _viewportHeight = clientHeight - indexItemHeight;
-
             refList.current.scrollTop = _itemTop - (align === 'start' ? 0 : _viewportHeight / (align === 'center' ? 2 : 1));
           }
         });
       }
     };
   }, [data, itemHeight, state]);
-
   var renderChildren = function renderChildren(list, startIndex) {
     return _mapInstanceProperty(list).call(list, function (item, index) {
       var originIndex = startIndex + index;
@@ -519,13 +452,11 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
         key: key,
         ref: function ref(ele) {
           var heightMap = refItemHeightMap.current;
-
           if (ele && state.status === 'MEASURE_START' && (!isStaticItemHeight || heightMap[key] === undefined)) {
             if (isStaticItemHeight) {
               if (!heightMap[KEY_VIRTUAL_ITEM_HEIGHT]) {
                 heightMap[KEY_VIRTUAL_ITEM_HEIGHT] = getNodeHeight(ele, true);
               }
-
               heightMap[key] = heightMap[KEY_VIRTUAL_ITEM_HEIGHT];
             } else {
               heightMap[key] = getNodeHeight(ele, true);
@@ -535,12 +466,10 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
     });
   };
-
   var refLongestItemIndex = useRef(null);
   useEffect(function () {
     refLongestItemIndex.current = null;
   }, [data]);
-
   var renderLongestItem = function renderLongestItem() {
     if (measureLongestItem) {
       var index = refLongestItemIndex.current === null ? getLongestItemIndex(data) : refLongestItemIndex.current;
@@ -556,10 +485,8 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
         style: {}
       })) : null;
     }
-
     return null;
   };
-
   return /*#__PURE__*/React.createElement(ResizeObserver, {
     onResize: function onResize() {
       if (refList.current && !isNumber(styleListMaxHeight)) {