@para-ui/core 4.0.21 → 4.0.22

package/_verture/{index-f59b0bc0.js → index-066d47d4.js}

@@ -65,12 +65,11 @@ function _objectSpread2(e) {
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+  for (var key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
   }
   return target;
 }
@@ -1187,24 +1186,22 @@ function useMemo(getValue, condition, shouldUpdate) {
   return cacheRef.current.value;
 }
 
-function fillRef(ref, node) {
+var fillRef = function fillRef(ref, node) {
   if (typeof ref === 'function') {
     ref(node);
   } else if (_typeof$1(ref) === 'object' && ref && 'current' in ref) {
     ref.current = node;
   }
-}
+};
 
 /**
  * Merge refs into one ref function to support ref passing.
  */
-function composeRef() {
+var composeRef = function composeRef() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
   }
-  var refList = refs.filter(function (ref) {
-    return ref;
-  });
+  var refList = refs.filter(Boolean);
   if (refList.length <= 1) {
     return refList[0];
   }
@@ -1213,8 +1210,8 @@ function composeRef() {
       fillRef(ref, node);
     });
   };
-}
-function useComposeRef() {
+};
+var useComposeRef = function useComposeRef() {
   for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
     refs[_key2] = arguments[_key2];
   }
@@ -1225,8 +1222,8 @@ function useComposeRef() {
       return ref !== next[i];
     });
   });
-}
-function supportRef(nodeOrComponent) {
+};
+var supportRef = function supportRef(nodeOrComponent) {
   var _type$prototype, _nodeOrComponent$prot;
   var type = reactIs.exports.isMemo(nodeOrComponent) ? nodeOrComponent.type.type : nodeOrComponent.type;
 
@@ -1240,8 +1237,7 @@ function supportRef(nodeOrComponent) {
     return false;
   }
   return true;
-}
-/* eslint-enable */
+};
 
 var TransBtn = function TransBtn(_ref) {
   var className = _ref.className,
@@ -7004,237 +7000,6 @@ var Filler = /*#__PURE__*/React$4.forwardRef(function (_ref, ref) {
 });
 Filler.displayName = 'Filler';
 
-function getPageXY(e, horizontal) {
-  var obj = 'touches' in e ? e.touches[0] : e;
-  return obj[horizontal ? 'pageX' : 'pageY'];
-}
-var ScrollBar = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
-  var prefixCls = props.prefixCls,
-    rtl = props.rtl,
-    scrollOffset = props.scrollOffset,
-    scrollRange = props.scrollRange,
-    onStartMove = props.onStartMove,
-    onStopMove = props.onStopMove,
-    onScroll = props.onScroll,
-    horizontal = props.horizontal,
-    spinSize = props.spinSize,
-    containerSize = props.containerSize,
-    style = props.style,
-    propsThumbStyle = props.thumbStyle;
-  var _React$useState = React$4.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    dragging = _React$useState2[0],
-    setDragging = _React$useState2[1];
-  var _React$useState3 = React$4.useState(null),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    pageXY = _React$useState4[0],
-    setPageXY = _React$useState4[1];
-  var _React$useState5 = React$4.useState(null),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    startTop = _React$useState6[0],
-    setStartTop = _React$useState6[1];
-  var isLTR = !rtl;
-
-  // ========================= Refs =========================
-  var scrollbarRef = React$4.useRef();
-  var thumbRef = React$4.useRef();
-
-  // ======================= Visible ========================
-  var _React$useState7 = React$4.useState(false),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    visible = _React$useState8[0],
-    setVisible = _React$useState8[1];
-  var visibleTimeoutRef = React$4.useRef();
-  var delayHidden = function delayHidden() {
-    clearTimeout(visibleTimeoutRef.current);
-    setVisible(true);
-    visibleTimeoutRef.current = setTimeout(function () {
-      setVisible(false);
-    }, 3000);
-  };
-
-  // ======================== Range =========================
-  var enableScrollRange = scrollRange - containerSize || 0;
-  var enableOffsetRange = containerSize - spinSize || 0;
-
-  // ========================= Top ==========================
-  var top = React$4.useMemo(function () {
-    if (scrollOffset === 0 || enableScrollRange === 0) {
-      return 0;
-    }
-    var ptg = scrollOffset / enableScrollRange;
-    return ptg * enableOffsetRange;
-  }, [scrollOffset, enableScrollRange, enableOffsetRange]);
-
-  // ====================== Container =======================
-  var onContainerMouseDown = function onContainerMouseDown(e) {
-    e.stopPropagation();
-    e.preventDefault();
-  };
-
-  // ======================== Thumb =========================
-  var stateRef = React$4.useRef({
-    top: top,
-    dragging: dragging,
-    pageY: pageXY,
-    startTop: startTop
-  });
-  stateRef.current = {
-    top: top,
-    dragging: dragging,
-    pageY: pageXY,
-    startTop: startTop
-  };
-  var onThumbMouseDown = function onThumbMouseDown(e) {
-    setDragging(true);
-    setPageXY(getPageXY(e, horizontal));
-    setStartTop(stateRef.current.top);
-    onStartMove();
-    e.stopPropagation();
-    e.preventDefault();
-  };
-
-  // ======================== Effect ========================
-
-  // React make event as passive, but we need to preventDefault
-  // Add event on dom directly instead.
-  // ref: https://github.com/facebook/react/issues/9809
-  React$4.useEffect(function () {
-    var onScrollbarTouchStart = function onScrollbarTouchStart(e) {
-      e.preventDefault();
-    };
-    var scrollbarEle = scrollbarRef.current;
-    var thumbEle = thumbRef.current;
-    scrollbarEle.addEventListener('touchstart', onScrollbarTouchStart);
-    thumbEle.addEventListener('touchstart', onThumbMouseDown);
-    return function () {
-      scrollbarEle.removeEventListener('touchstart', onScrollbarTouchStart);
-      thumbEle.removeEventListener('touchstart', onThumbMouseDown);
-    };
-  }, []);
-
-  // Pass to effect
-  var enableScrollRangeRef = React$4.useRef();
-  enableScrollRangeRef.current = enableScrollRange;
-  var enableOffsetRangeRef = React$4.useRef();
-  enableOffsetRangeRef.current = enableOffsetRange;
-  React$4.useEffect(function () {
-    if (dragging) {
-      var moveRafId;
-      var onMouseMove = function onMouseMove(e) {
-        var _stateRef$current = stateRef.current,
-          stateDragging = _stateRef$current.dragging,
-          statePageY = _stateRef$current.pageY,
-          stateStartTop = _stateRef$current.startTop;
-        wrapperRaf.cancel(moveRafId);
-        if (stateDragging) {
-          var offset = getPageXY(e, horizontal) - statePageY;
-          var newTop = stateStartTop;
-          if (!isLTR && horizontal) {
-            newTop -= offset;
-          } else {
-            newTop += offset;
-          }
-          var tmpEnableScrollRange = enableScrollRangeRef.current;
-          var tmpEnableOffsetRange = enableOffsetRangeRef.current;
-          var ptg = tmpEnableOffsetRange ? newTop / tmpEnableOffsetRange : 0;
-          var newScrollTop = Math.ceil(ptg * tmpEnableScrollRange);
-          newScrollTop = Math.max(newScrollTop, 0);
-          newScrollTop = Math.min(newScrollTop, tmpEnableScrollRange);
-          moveRafId = wrapperRaf(function () {
-            onScroll(newScrollTop, horizontal);
-          });
-        }
-      };
-      var onMouseUp = function onMouseUp() {
-        setDragging(false);
-        onStopMove();
-      };
-      window.addEventListener('mousemove', onMouseMove);
-      window.addEventListener('touchmove', onMouseMove);
-      window.addEventListener('mouseup', onMouseUp);
-      window.addEventListener('touchend', onMouseUp);
-      return function () {
-        window.removeEventListener('mousemove', onMouseMove);
-        window.removeEventListener('touchmove', onMouseMove);
-        window.removeEventListener('mouseup', onMouseUp);
-        window.removeEventListener('touchend', onMouseUp);
-        wrapperRaf.cancel(moveRafId);
-      };
-    }
-  }, [dragging]);
-  React$4.useEffect(function () {
-    delayHidden();
-  }, [scrollOffset]);
-
-  // ====================== Imperative ======================
-  React$4.useImperativeHandle(ref, function () {
-    return {
-      delayHidden: delayHidden
-    };
-  });
-
-  // ======================== Render ========================
-  var scrollbarPrefixCls = "".concat(prefixCls, "-scrollbar");
-  var containerStyle = {
-    position: 'absolute',
-    visibility: visible ? null : 'hidden'
-  };
-  var thumbStyle = {
-    position: 'absolute',
-    background: 'rgba(0, 0, 0, 0.5)',
-    borderRadius: 99,
-    cursor: 'pointer',
-    userSelect: 'none'
-  };
-  if (horizontal) {
-    // Container
-    containerStyle.height = 8;
-    containerStyle.left = 0;
-    containerStyle.right = 0;
-    containerStyle.bottom = 0;
-
-    // Thumb
-    thumbStyle.height = '100%';
-    thumbStyle.width = spinSize;
-    if (isLTR) {
-      thumbStyle.left = top;
-    } else {
-      thumbStyle.right = top;
-    }
-  } else {
-    // Container
-    containerStyle.width = 8;
-    containerStyle.top = 0;
-    containerStyle.bottom = 0;
-    if (isLTR) {
-      containerStyle.right = 0;
-    } else {
-      containerStyle.left = 0;
-    }
-
-    // Thumb
-    thumbStyle.width = '100%';
-    thumbStyle.height = spinSize;
-    thumbStyle.top = top;
-  }
-  return /*#__PURE__*/React$4.createElement("div", {
-    ref: scrollbarRef,
-    className: classNames(scrollbarPrefixCls, _defineProperty(_defineProperty(_defineProperty({}, "".concat(scrollbarPrefixCls, "-horizontal"), horizontal), "".concat(scrollbarPrefixCls, "-vertical"), !horizontal), "".concat(scrollbarPrefixCls, "-visible"), visible)),
-    style: _objectSpread2(_objectSpread2({}, containerStyle), style),
-    onMouseDown: onContainerMouseDown,
-    onMouseMove: delayHidden
-  }, /*#__PURE__*/React$4.createElement("div", {
-    ref: thumbRef,
-    className: classNames("".concat(scrollbarPrefixCls, "-thumb"), _defineProperty({}, "".concat(scrollbarPrefixCls, "-thumb-moving"), dragging)),
-    style: _objectSpread2(_objectSpread2({}, thumbStyle), propsThumbStyle),
-    onMouseDown: onThumbMouseDown
-  }));
-});
-if (process.env.NODE_ENV !== 'production') {
-  ScrollBar.displayName = 'ScrollBar';
-}
-
 function Item(_ref) {
   var children = _ref.children,
     setRef = _ref.setRef;
@@ -7265,228 +7030,6 @@ function useChildren(list, startIndex, endIndex, scrollWidth, setNodeRef, render
   });
 }
 
-// Firefox has low performance of map.
-var CacheMap = /*#__PURE__*/function () {
-  function CacheMap() {
-    _classCallCheck(this, CacheMap);
-    _defineProperty(this, "maps", void 0);
-    // Used for cache key
-    // `useMemo` no need to update if `id` not change
-    _defineProperty(this, "id", 0);
-    this.maps = Object.create(null);
-  }
-  _createClass(CacheMap, [{
-    key: "set",
-    value: function set(key, value) {
-      this.maps[key] = value;
-      this.id += 1;
-    }
-  }, {
-    key: "get",
-    value: function get(key) {
-      return this.maps[key];
-    }
-  }]);
-  return CacheMap;
-}();
-
-function useHeights(getKey, onItemAdd, onItemRemove) {
-  var _React$useState = React$4.useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    updatedMark = _React$useState2[0],
-    setUpdatedMark = _React$useState2[1];
-  var instanceRef = useRef(new Map());
-  var heightsRef = useRef(new CacheMap());
-  var collectRafRef = useRef();
-  function cancelRaf() {
-    wrapperRaf.cancel(collectRafRef.current);
-  }
-  function collectHeight() {
-    var sync = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    cancelRaf();
-    var doCollect = function doCollect() {
-      instanceRef.current.forEach(function (element, key) {
-        if (element && element.offsetParent) {
-          var htmlElement = findDOMNode(element);
-          var offsetHeight = htmlElement.offsetHeight;
-          if (heightsRef.current.get(key) !== offsetHeight) {
-            heightsRef.current.set(key, htmlElement.offsetHeight);
-          }
-        }
-      });
-
-      // Always trigger update mark to tell parent that should re-calculate heights when resized
-      setUpdatedMark(function (c) {
-        return c + 1;
-      });
-    };
-    if (sync) {
-      doCollect();
-    } else {
-      collectRafRef.current = wrapperRaf(doCollect);
-    }
-  }
-  function setInstanceRef(item, instance) {
-    var key = getKey(item);
-    var origin = instanceRef.current.get(key);
-    if (instance) {
-      instanceRef.current.set(key, instance);
-      collectHeight();
-    } else {
-      instanceRef.current.delete(key);
-    }
-
-    // Instance changed
-    if (!origin !== !instance) {
-      if (instance) {
-        onItemAdd === null || onItemAdd === void 0 || onItemAdd(item);
-      } else {
-        onItemRemove === null || onItemRemove === void 0 || onItemRemove(item);
-      }
-    }
-  }
-  useEffect(function () {
-    return cancelRaf;
-  }, []);
-  return [setInstanceRef, collectHeight, heightsRef.current, updatedMark];
-}
-
-var MAX_TIMES = 10;
-function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHeight, syncScrollTop, triggerFlash) {
-  var scrollRef = React$4.useRef();
-  var _React$useState = React$4.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    syncState = _React$useState2[0],
-    setSyncState = _React$useState2[1];
-
-  // ========================== Sync Scroll ==========================
-  useLayoutEffect$3(function () {
-    if (syncState && syncState.times < MAX_TIMES) {
-      // Never reach
-      if (!containerRef.current) {
-        setSyncState(function (ori) {
-          return _objectSpread2({}, ori);
-        });
-        return;
-      }
-      collectHeight();
-      var targetAlign = syncState.targetAlign,
-        originAlign = syncState.originAlign,
-        index = syncState.index,
-        offset = syncState.offset;
-      var height = containerRef.current.clientHeight;
-      var needCollectHeight = false;
-      var newTargetAlign = targetAlign;
-      var targetTop = null;
-
-      // Go to next frame if height not exist
-      if (height) {
-        var mergedAlign = targetAlign || originAlign;
-
-        // Get top & bottom
-        var stackTop = 0;
-        var itemTop = 0;
-        var itemBottom = 0;
-        var maxLen = Math.min(data.length - 1, index);
-        for (var i = 0; i <= maxLen; i += 1) {
-          var key = getKey(data[i]);
-          itemTop = stackTop;
-          var cacheHeight = heights.get(key);
-          itemBottom = itemTop + (cacheHeight === undefined ? itemHeight : cacheHeight);
-          stackTop = itemBottom;
-        }
-
-        // Check if need sync height (visible range has item not record height)
-        var leftHeight = mergedAlign === 'top' ? offset : height - offset;
-        for (var _i = maxLen; _i >= 0; _i -= 1) {
-          var _key = getKey(data[_i]);
-          var _cacheHeight = heights.get(_key);
-          if (_cacheHeight === undefined) {
-            needCollectHeight = true;
-            break;
-          }
-          leftHeight -= _cacheHeight;
-          if (leftHeight <= 0) {
-            break;
-          }
-        }
-
-        // Scroll to
-        switch (mergedAlign) {
-          case 'top':
-            targetTop = itemTop - offset;
-            break;
-          case 'bottom':
-            targetTop = itemBottom - height + offset;
-            break;
-          default:
-            {
-              var scrollTop = containerRef.current.scrollTop;
-              var scrollBottom = scrollTop + height;
-              if (itemTop < scrollTop) {
-                newTargetAlign = 'top';
-              } else if (itemBottom > scrollBottom) {
-                newTargetAlign = 'bottom';
-              }
-            }
-        }
-        if (targetTop !== null) {
-          syncScrollTop(targetTop);
-        }
-
-        // One more time for sync
-        if (targetTop !== syncState.lastTop) {
-          needCollectHeight = true;
-        }
-      }
-
-      // Trigger next effect
-      if (needCollectHeight) {
-        setSyncState(_objectSpread2(_objectSpread2({}, syncState), {}, {
-          times: syncState.times + 1,
-          targetAlign: newTargetAlign,
-          lastTop: targetTop
-        }));
-      }
-    } else if (process.env.NODE_ENV !== 'production' && (syncState === null || syncState === void 0 ? void 0 : syncState.times) === MAX_TIMES) {
-      warningOnce(false, 'Seems `scrollTo` with `rc-virtual-list` reach the max limitation. Please fire issue for us. Thanks.');
-    }
-  }, [syncState, containerRef.current]);
-
-  // =========================== Scroll To ===========================
-  return function (arg) {
-    // When not argument provided, we think dev may want to show the scrollbar
-    if (arg === null || arg === undefined) {
-      triggerFlash();
-      return;
-    }
-
-    // Normal scroll logic
-    wrapperRaf.cancel(scrollRef.current);
-    if (typeof arg === 'number') {
-      syncScrollTop(arg);
-    } else if (arg && _typeof$1(arg) === 'object') {
-      var index;
-      var align = arg.align;
-      if ('index' in arg) {
-        index = arg.index;
-      } else {
-        index = data.findIndex(function (item) {
-          return getKey(item) === arg.key;
-        });
-      }
-      var _arg$offset = arg.offset,
-        offset = _arg$offset === void 0 ? 0 : _arg$offset;
-      setSyncState({
-        times: 0,
-        index: index,
-        offset: offset,
-        originAlign: align
-      });
-    }
-  };
-}
-
 /**
  * Get index with specific start index one by one. e.g.
  * min: 3, max: 9, start: 6
@@ -7689,67 +7232,566 @@ onWheelDelta) {
   return [onWheel, onFireFoxScroll];
 }
 
-var SMOOTH_PTG = 14 / 15;
-function useMobileTouchMove(inVirtual, listRef, callback) {
-  var touchedRef = useRef(false);
-  var touchYRef = useRef(0);
-  var elementRef = useRef(null);
-
-  // Smooth scroll
-  var intervalRef = useRef(null);
-
-  /* eslint-disable prefer-const */
-  var cleanUpEvents;
-  var onTouchMove = function onTouchMove(e) {
-    if (touchedRef.current) {
-      var currentY = Math.ceil(e.touches[0].pageY);
-      var _offsetY = touchYRef.current - currentY;
-      touchYRef.current = currentY;
-      if (callback(_offsetY)) {
-        e.preventDefault();
-      }
+/**
+ * Size info need loop query for the `heights` which will has the perf issue.
+ * Let cache result for each render phase.
+ */
+function useGetSize(mergedData, getKey, heights, itemHeight) {
+  var _React$useMemo = React$4.useMemo(function () {
+      return [new Map(), []];
+    }, [mergedData, heights.id, itemHeight]),
+    _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
+    key2Index = _React$useMemo2[0],
+    bottomList = _React$useMemo2[1];
+  var getSize = function getSize(startKey) {
+    var endKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : startKey;
+    // Get from cache first
+    var startIndex = key2Index.get(startKey);
+    var endIndex = key2Index.get(endKey);
 
-      // Smooth interval
-      clearInterval(intervalRef.current);
-      intervalRef.current = setInterval(function () {
-        _offsetY *= SMOOTH_PTG;
-        if (!callback(_offsetY, true) || Math.abs(_offsetY) <= 0.1) {
-          clearInterval(intervalRef.current);
-        }
-      }, 16);
-    }
-  };
+    // Loop to fill the cache
+    if (startIndex === undefined || endIndex === undefined) {
+      var dataLen = mergedData.length;
+      for (var i = bottomList.length; i < dataLen; i += 1) {
+        var _heights$get;
+        var item = mergedData[i];
+        var key = getKey(item);
+        key2Index.set(key, i);
+        var cacheHeight = (_heights$get = heights.get(key)) !== null && _heights$get !== void 0 ? _heights$get : itemHeight;
+        bottomList[i] = (bottomList[i - 1] || 0) + cacheHeight;
+        if (key === startKey) {
+          startIndex = i;
+        }
+        if (key === endKey) {
+          endIndex = i;
+        }
+        if (startIndex !== undefined && endIndex !== undefined) {
+          break;
+        }
+      }
+    }
+    return {
+      top: bottomList[startIndex - 1] || 0,
+      bottom: bottomList[endIndex]
+    };
+  };
+  return getSize;
+}
+
+// Firefox has low performance of map.
+var CacheMap = /*#__PURE__*/function () {
+  function CacheMap() {
+    _classCallCheck(this, CacheMap);
+    _defineProperty(this, "maps", void 0);
+    // Used for cache key
+    // `useMemo` no need to update if `id` not change
+    _defineProperty(this, "id", 0);
+    this.maps = Object.create(null);
+  }
+  _createClass(CacheMap, [{
+    key: "set",
+    value: function set(key, value) {
+      this.maps[key] = value;
+      this.id += 1;
+    }
+  }, {
+    key: "get",
+    value: function get(key) {
+      return this.maps[key];
+    }
+  }]);
+  return CacheMap;
+}();
+
+function useHeights(getKey, onItemAdd, onItemRemove) {
+  var _React$useState = React$4.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    updatedMark = _React$useState2[0],
+    setUpdatedMark = _React$useState2[1];
+  var instanceRef = useRef(new Map());
+  var heightsRef = useRef(new CacheMap());
+  var collectRafRef = useRef();
+  function cancelRaf() {
+    wrapperRaf.cancel(collectRafRef.current);
+  }
+  function collectHeight() {
+    var sync = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    cancelRaf();
+    var doCollect = function doCollect() {
+      instanceRef.current.forEach(function (element, key) {
+        if (element && element.offsetParent) {
+          var htmlElement = findDOMNode(element);
+          var offsetHeight = htmlElement.offsetHeight;
+          if (heightsRef.current.get(key) !== offsetHeight) {
+            heightsRef.current.set(key, htmlElement.offsetHeight);
+          }
+        }
+      });
+
+      // Always trigger update mark to tell parent that should re-calculate heights when resized
+      setUpdatedMark(function (c) {
+        return c + 1;
+      });
+    };
+    if (sync) {
+      doCollect();
+    } else {
+      collectRafRef.current = wrapperRaf(doCollect);
+    }
+  }
+  function setInstanceRef(item, instance) {
+    var key = getKey(item);
+    var origin = instanceRef.current.get(key);
+    if (instance) {
+      instanceRef.current.set(key, instance);
+      collectHeight();
+    } else {
+      instanceRef.current.delete(key);
+    }
+
+    // Instance changed
+    if (!origin !== !instance) {
+      if (instance) {
+        onItemAdd === null || onItemAdd === void 0 || onItemAdd(item);
+      } else {
+        onItemRemove === null || onItemRemove === void 0 || onItemRemove(item);
+      }
+    }
+  }
+  useEffect(function () {
+    return cancelRaf;
+  }, []);
+  return [setInstanceRef, collectHeight, heightsRef.current, updatedMark];
+}
+
+var SMOOTH_PTG = 14 / 15;
+function useMobileTouchMove(inVirtual, listRef, callback) {
+  var touchedRef = useRef(false);
+  var touchYRef = useRef(0);
+  var elementRef = useRef(null);
+
+  // Smooth scroll
+  var intervalRef = useRef(null);
+
+  /* eslint-disable prefer-const */
+  var cleanUpEvents;
+  var onTouchMove = function onTouchMove(e) {
+    if (touchedRef.current) {
+      var currentY = Math.ceil(e.touches[0].pageY);
+      var _offsetY = touchYRef.current - currentY;
+      touchYRef.current = currentY;
+      if (callback(_offsetY)) {
+        e.preventDefault();
+      }
+
+      // Smooth interval
+      clearInterval(intervalRef.current);
+      intervalRef.current = setInterval(function () {
+        _offsetY *= SMOOTH_PTG;
+        if (!callback(_offsetY, true) || Math.abs(_offsetY) <= 0.1) {
+          clearInterval(intervalRef.current);
+        }
+      }, 16);
+    }
+  };
   var onTouchEnd = function onTouchEnd() {
     touchedRef.current = false;
     cleanUpEvents();
   };
-  var onTouchStart = function onTouchStart(e) {
-    cleanUpEvents();
-    if (e.touches.length === 1 && !touchedRef.current) {
-      touchedRef.current = true;
-      touchYRef.current = Math.ceil(e.touches[0].pageY);
-      elementRef.current = e.target;
-      elementRef.current.addEventListener('touchmove', onTouchMove);
-      elementRef.current.addEventListener('touchend', onTouchEnd);
-    }
+  var onTouchStart = function onTouchStart(e) {
+    cleanUpEvents();
+    if (e.touches.length === 1 && !touchedRef.current) {
+      touchedRef.current = true;
+      touchYRef.current = Math.ceil(e.touches[0].pageY);
+      elementRef.current = e.target;
+      elementRef.current.addEventListener('touchmove', onTouchMove);
+      elementRef.current.addEventListener('touchend', onTouchEnd);
+    }
+  };
+  cleanUpEvents = function cleanUpEvents() {
+    if (elementRef.current) {
+      elementRef.current.removeEventListener('touchmove', onTouchMove);
+      elementRef.current.removeEventListener('touchend', onTouchEnd);
+    }
+  };
+  useLayoutEffect$3(function () {
+    if (inVirtual) {
+      listRef.current.addEventListener('touchstart', onTouchStart);
+    }
+    return function () {
+      var _listRef$current;
+      (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.removeEventListener('touchstart', onTouchStart);
+      cleanUpEvents();
+      clearInterval(intervalRef.current);
+    };
+  }, [inVirtual]);
+}
+
+var MAX_TIMES = 10;
+function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHeight, syncScrollTop, triggerFlash) {
+  var scrollRef = React$4.useRef();
+  var _React$useState = React$4.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    syncState = _React$useState2[0],
+    setSyncState = _React$useState2[1];
+
+  // ========================== Sync Scroll ==========================
+  useLayoutEffect$3(function () {
+    if (syncState && syncState.times < MAX_TIMES) {
+      // Never reach
+      if (!containerRef.current) {
+        setSyncState(function (ori) {
+          return _objectSpread2({}, ori);
+        });
+        return;
+      }
+      collectHeight();
+      var targetAlign = syncState.targetAlign,
+        originAlign = syncState.originAlign,
+        index = syncState.index,
+        offset = syncState.offset;
+      var height = containerRef.current.clientHeight;
+      var needCollectHeight = false;
+      var newTargetAlign = targetAlign;
+      var targetTop = null;
+
+      // Go to next frame if height not exist
+      if (height) {
+        var mergedAlign = targetAlign || originAlign;
+
+        // Get top & bottom
+        var stackTop = 0;
+        var itemTop = 0;
+        var itemBottom = 0;
+        var maxLen = Math.min(data.length - 1, index);
+        for (var i = 0; i <= maxLen; i += 1) {
+          var key = getKey(data[i]);
+          itemTop = stackTop;
+          var cacheHeight = heights.get(key);
+          itemBottom = itemTop + (cacheHeight === undefined ? itemHeight : cacheHeight);
+          stackTop = itemBottom;
+        }
+
+        // Check if need sync height (visible range has item not record height)
+        var leftHeight = mergedAlign === 'top' ? offset : height - offset;
+        for (var _i = maxLen; _i >= 0; _i -= 1) {
+          var _key = getKey(data[_i]);
+          var _cacheHeight = heights.get(_key);
+          if (_cacheHeight === undefined) {
+            needCollectHeight = true;
+            break;
+          }
+          leftHeight -= _cacheHeight;
+          if (leftHeight <= 0) {
+            break;
+          }
+        }
+
+        // Scroll to
+        switch (mergedAlign) {
+          case 'top':
+            targetTop = itemTop - offset;
+            break;
+          case 'bottom':
+            targetTop = itemBottom - height + offset;
+            break;
+          default:
+            {
+              var scrollTop = containerRef.current.scrollTop;
+              var scrollBottom = scrollTop + height;
+              if (itemTop < scrollTop) {
+                newTargetAlign = 'top';
+              } else if (itemBottom > scrollBottom) {
+                newTargetAlign = 'bottom';
+              }
+            }
+        }
+        if (targetTop !== null) {
+          syncScrollTop(targetTop);
+        }
+
+        // One more time for sync
+        if (targetTop !== syncState.lastTop) {
+          needCollectHeight = true;
+        }
+      }
+
+      // Trigger next effect
+      if (needCollectHeight) {
+        setSyncState(_objectSpread2(_objectSpread2({}, syncState), {}, {
+          times: syncState.times + 1,
+          targetAlign: newTargetAlign,
+          lastTop: targetTop
+        }));
+      }
+    } else if (process.env.NODE_ENV !== 'production' && (syncState === null || syncState === void 0 ? void 0 : syncState.times) === MAX_TIMES) {
+      warningOnce(false, 'Seems `scrollTo` with `rc-virtual-list` reach the max limitation. Please fire issue for us. Thanks.');
+    }
+  }, [syncState, containerRef.current]);
+
+  // =========================== Scroll To ===========================
+  return function (arg) {
+    // When not argument provided, we think dev may want to show the scrollbar
+    if (arg === null || arg === undefined) {
+      triggerFlash();
+      return;
+    }
+
+    // Normal scroll logic
+    wrapperRaf.cancel(scrollRef.current);
+    if (typeof arg === 'number') {
+      syncScrollTop(arg);
+    } else if (arg && _typeof$1(arg) === 'object') {
+      var index;
+      var align = arg.align;
+      if ('index' in arg) {
+        index = arg.index;
+      } else {
+        index = data.findIndex(function (item) {
+          return getKey(item) === arg.key;
+        });
+      }
+      var _arg$offset = arg.offset,
+        offset = _arg$offset === void 0 ? 0 : _arg$offset;
+      setSyncState({
+        times: 0,
+        index: index,
+        offset: offset,
+        originAlign: align
+      });
+    }
+  };
+}
+
+function getPageXY(e, horizontal) {
+  var obj = 'touches' in e ? e.touches[0] : e;
+  return obj[horizontal ? 'pageX' : 'pageY'];
+}
+var ScrollBar = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
+  var prefixCls = props.prefixCls,
+    rtl = props.rtl,
+    scrollOffset = props.scrollOffset,
+    scrollRange = props.scrollRange,
+    onStartMove = props.onStartMove,
+    onStopMove = props.onStopMove,
+    onScroll = props.onScroll,
+    horizontal = props.horizontal,
+    spinSize = props.spinSize,
+    containerSize = props.containerSize,
+    style = props.style,
+    propsThumbStyle = props.thumbStyle;
+  var _React$useState = React$4.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    dragging = _React$useState2[0],
+    setDragging = _React$useState2[1];
+  var _React$useState3 = React$4.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    pageXY = _React$useState4[0],
+    setPageXY = _React$useState4[1];
+  var _React$useState5 = React$4.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    startTop = _React$useState6[0],
+    setStartTop = _React$useState6[1];
+  var isLTR = !rtl;
+
+  // ========================= Refs =========================
+  var scrollbarRef = React$4.useRef();
+  var thumbRef = React$4.useRef();
+
+  // ======================= Visible ========================
+  var _React$useState7 = React$4.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    visible = _React$useState8[0],
+    setVisible = _React$useState8[1];
+  var visibleTimeoutRef = React$4.useRef();
+  var delayHidden = function delayHidden() {
+    clearTimeout(visibleTimeoutRef.current);
+    setVisible(true);
+    visibleTimeoutRef.current = setTimeout(function () {
+      setVisible(false);
+    }, 3000);
+  };
+
+  // ======================== Range =========================
+  var enableScrollRange = scrollRange - containerSize || 0;
+  var enableOffsetRange = containerSize - spinSize || 0;
+
+  // ========================= Top ==========================
+  var top = React$4.useMemo(function () {
+    if (scrollOffset === 0 || enableScrollRange === 0) {
+      return 0;
+    }
+    var ptg = scrollOffset / enableScrollRange;
+    return ptg * enableOffsetRange;
+  }, [scrollOffset, enableScrollRange, enableOffsetRange]);
+
+  // ====================== Container =======================
+  var onContainerMouseDown = function onContainerMouseDown(e) {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  // ======================== Thumb =========================
+  var stateRef = React$4.useRef({
+    top: top,
+    dragging: dragging,
+    pageY: pageXY,
+    startTop: startTop
+  });
+  stateRef.current = {
+    top: top,
+    dragging: dragging,
+    pageY: pageXY,
+    startTop: startTop
+  };
+  var onThumbMouseDown = function onThumbMouseDown(e) {
+    setDragging(true);
+    setPageXY(getPageXY(e, horizontal));
+    setStartTop(stateRef.current.top);
+    onStartMove();
+    e.stopPropagation();
+    e.preventDefault();
   };
-  cleanUpEvents = function cleanUpEvents() {
-    if (elementRef.current) {
-      elementRef.current.removeEventListener('touchmove', onTouchMove);
-      elementRef.current.removeEventListener('touchend', onTouchEnd);
+
+  // ======================== Effect ========================
+
+  // React make event as passive, but we need to preventDefault
+  // Add event on dom directly instead.
+  // ref: https://github.com/facebook/react/issues/9809
+  React$4.useEffect(function () {
+    var onScrollbarTouchStart = function onScrollbarTouchStart(e) {
+      e.preventDefault();
+    };
+    var scrollbarEle = scrollbarRef.current;
+    var thumbEle = thumbRef.current;
+    scrollbarEle.addEventListener('touchstart', onScrollbarTouchStart);
+    thumbEle.addEventListener('touchstart', onThumbMouseDown);
+    return function () {
+      scrollbarEle.removeEventListener('touchstart', onScrollbarTouchStart);
+      thumbEle.removeEventListener('touchstart', onThumbMouseDown);
+    };
+  }, []);
+
+  // Pass to effect
+  var enableScrollRangeRef = React$4.useRef();
+  enableScrollRangeRef.current = enableScrollRange;
+  var enableOffsetRangeRef = React$4.useRef();
+  enableOffsetRangeRef.current = enableOffsetRange;
+  React$4.useEffect(function () {
+    if (dragging) {
+      var moveRafId;
+      var onMouseMove = function onMouseMove(e) {
+        var _stateRef$current = stateRef.current,
+          stateDragging = _stateRef$current.dragging,
+          statePageY = _stateRef$current.pageY,
+          stateStartTop = _stateRef$current.startTop;
+        wrapperRaf.cancel(moveRafId);
+        if (stateDragging) {
+          var offset = getPageXY(e, horizontal) - statePageY;
+          var newTop = stateStartTop;
+          if (!isLTR && horizontal) {
+            newTop -= offset;
+          } else {
+            newTop += offset;
+          }
+          var tmpEnableScrollRange = enableScrollRangeRef.current;
+          var tmpEnableOffsetRange = enableOffsetRangeRef.current;
+          var ptg = tmpEnableOffsetRange ? newTop / tmpEnableOffsetRange : 0;
+          var newScrollTop = Math.ceil(ptg * tmpEnableScrollRange);
+          newScrollTop = Math.max(newScrollTop, 0);
+          newScrollTop = Math.min(newScrollTop, tmpEnableScrollRange);
+          moveRafId = wrapperRaf(function () {
+            onScroll(newScrollTop, horizontal);
+          });
+        }
+      };
+      var onMouseUp = function onMouseUp() {
+        setDragging(false);
+        onStopMove();
+      };
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('touchmove', onMouseMove);
+      window.addEventListener('mouseup', onMouseUp);
+      window.addEventListener('touchend', onMouseUp);
+      return function () {
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('touchmove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+        window.removeEventListener('touchend', onMouseUp);
+        wrapperRaf.cancel(moveRafId);
+      };
     }
+  }, [dragging]);
+  React$4.useEffect(function () {
+    delayHidden();
+  }, [scrollOffset]);
+
+  // ====================== Imperative ======================
+  React$4.useImperativeHandle(ref, function () {
+    return {
+      delayHidden: delayHidden
+    };
+  });
+
+  // ======================== Render ========================
+  var scrollbarPrefixCls = "".concat(prefixCls, "-scrollbar");
+  var containerStyle = {
+    position: 'absolute',
+    visibility: visible ? null : 'hidden'
   };
-  useLayoutEffect$3(function () {
-    if (inVirtual) {
-      listRef.current.addEventListener('touchstart', onTouchStart);
+  var thumbStyle = {
+    position: 'absolute',
+    background: 'rgba(0, 0, 0, 0.5)',
+    borderRadius: 99,
+    cursor: 'pointer',
+    userSelect: 'none'
+  };
+  if (horizontal) {
+    // Container
+    containerStyle.height = 8;
+    containerStyle.left = 0;
+    containerStyle.right = 0;
+    containerStyle.bottom = 0;
+
+    // Thumb
+    thumbStyle.height = '100%';
+    thumbStyle.width = spinSize;
+    if (isLTR) {
+      thumbStyle.left = top;
+    } else {
+      thumbStyle.right = top;
     }
-    return function () {
-      var _listRef$current;
-      (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.removeEventListener('touchstart', onTouchStart);
-      cleanUpEvents();
-      clearInterval(intervalRef.current);
-    };
-  }, [inVirtual]);
+  } else {
+    // Container
+    containerStyle.width = 8;
+    containerStyle.top = 0;
+    containerStyle.bottom = 0;
+    if (isLTR) {
+      containerStyle.right = 0;
+    } else {
+      containerStyle.left = 0;
+    }
+
+    // Thumb
+    thumbStyle.width = '100%';
+    thumbStyle.height = spinSize;
+    thumbStyle.top = top;
+  }
+  return /*#__PURE__*/React$4.createElement("div", {
+    ref: scrollbarRef,
+    className: classNames(scrollbarPrefixCls, _defineProperty(_defineProperty(_defineProperty({}, "".concat(scrollbarPrefixCls, "-horizontal"), horizontal), "".concat(scrollbarPrefixCls, "-vertical"), !horizontal), "".concat(scrollbarPrefixCls, "-visible"), visible)),
+    style: _objectSpread2(_objectSpread2({}, containerStyle), style),
+    onMouseDown: onContainerMouseDown,
+    onMouseMove: delayHidden
+  }, /*#__PURE__*/React$4.createElement("div", {
+    ref: thumbRef,
+    className: classNames("".concat(scrollbarPrefixCls, "-thumb"), _defineProperty({}, "".concat(scrollbarPrefixCls, "-thumb-moving"), dragging)),
+    style: _objectSpread2(_objectSpread2({}, thumbStyle), propsThumbStyle),
+    onMouseDown: onThumbMouseDown
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  ScrollBar.displayName = 'ScrollBar';
 }
 
 var MIN_SIZE = 20;
@@ -7764,52 +7806,6 @@ function getSpinSize() {
   return Math.floor(baseSize);
 }
 
-/**
- * Size info need loop query for the `heights` which will has the perf issue.
- * Let cache result for each render phase.
- */
-function useGetSize(mergedData, getKey, heights, itemHeight) {
-  var _React$useMemo = React$4.useMemo(function () {
-      return [new Map(), []];
-    }, [mergedData, heights.id, itemHeight]),
-    _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
-    key2Index = _React$useMemo2[0],
-    bottomList = _React$useMemo2[1];
-  var getSize = function getSize(startKey) {
-    var endKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : startKey;
-    // Get from cache first
-    var startIndex = key2Index.get(startKey);
-    var endIndex = key2Index.get(endKey);
-
-    // Loop to fill the cache
-    if (startIndex === undefined || endIndex === undefined) {
-      var dataLen = mergedData.length;
-      for (var i = bottomList.length; i < dataLen; i += 1) {
-        var _heights$get;
-        var item = mergedData[i];
-        var key = getKey(item);
-        key2Index.set(key, i);
-        var cacheHeight = (_heights$get = heights.get(key)) !== null && _heights$get !== void 0 ? _heights$get : itemHeight;
-        bottomList[i] = (bottomList[i - 1] || 0) + cacheHeight;
-        if (key === startKey) {
-          startIndex = i;
-        }
-        if (key === endKey) {
-          endIndex = i;
-        }
-        if (startIndex !== undefined && endIndex !== undefined) {
-          break;
-        }
-      }
-    }
-    return {
-      top: bottomList[startIndex - 1] || 0,
-      bottom: bottomList[endIndex]
-    };
-  };
-  return getSize;
-}
-
 var _excluded$2 = ["prefixCls", "className", "height", "itemHeight", "fullHeight", "style", "data", "children", "itemKey", "virtual", "direction", "scrollWidth", "component", "onScroll", "onVirtualScroll", "onVisibleChange", "innerProps", "extraRender", "styles"];
 var EMPTY_DATA = [];
 var ScrollStyle = {
@@ -7841,9 +7837,30 @@ function RawList(props, ref) {
     styles = props.styles,
     restProps = _objectWithoutProperties(props, _excluded$2);
 
+  // =============================== Item Key ===============================
+  var getKey = React$4.useCallback(function (item) {
+    if (typeof itemKey === 'function') {
+      return itemKey(item);
+    }
+    return item === null || item === void 0 ? void 0 : item[itemKey];
+  }, [itemKey]);
+
+  // ================================ Height ================================
+  var _useHeights = useHeights(getKey, null, null),
+    _useHeights2 = _slicedToArray(_useHeights, 4),
+    setInstanceRef = _useHeights2[0],
+    collectHeight = _useHeights2[1],
+    heights = _useHeights2[2],
+    heightUpdatedMark = _useHeights2[3];
+
   // ================================= MISC =================================
   var useVirtual = !!(virtual !== false && height && itemHeight);
-  var inVirtual = useVirtual && data && (itemHeight * data.length > height || !!scrollWidth);
+  var containerHeight = React$4.useMemo(function () {
+    return Object.values(heights.maps).reduce(function (total, curr) {
+      return total + curr;
+    }, 0);
+  }, [heights.id, heights.maps]);
+  var inVirtual = useVirtual && data && (Math.max(itemHeight * data.length, containerHeight) > height || !!scrollWidth);
   var isRTL = direction === 'rtl';
   var mergedClassName = classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), className);
   var mergedData = data || EMPTY_DATA;
@@ -7870,14 +7887,6 @@ function RawList(props, ref) {
   var onScrollbarStopMove = function onScrollbarStopMove() {
     setScrollMoving(false);
   };
-
-  // =============================== Item Key ===============================
-  var getKey = React$4.useCallback(function (item) {
-    if (typeof itemKey === 'function') {
-      return itemKey(item);
-    }
-    return item === null || item === void 0 ? void 0 : item[itemKey];
-  }, [itemKey]);
   var sharedConfig = {
     getKey: getKey
   };
@@ -7909,14 +7918,6 @@ function RawList(props, ref) {
     diffItem = _useDiffItem2[0];
   diffItemRef.current = diffItem;
 
-  // ================================ Height ================================
-  var _useHeights = useHeights(getKey, null, null),
-    _useHeights2 = _slicedToArray(_useHeights, 4),
-    setInstanceRef = _useHeights2[0],
-    collectHeight = _useHeights2[1],
-    heights = _useHeights2[2],
-    heightUpdatedMark = _useHeights2[3];
-
   // ========================== Visible Calculation =========================
   var _React$useMemo = React$4.useMemo(function () {
       if (!useVirtual) {
@@ -8037,9 +8038,9 @@ function RawList(props, ref) {
     };
   };
   var lastVirtualScrollInfoRef = useRef(getVirtualScrollInfo());
-  var triggerScroll = useEvent$2(function () {
+  var triggerScroll = useEvent$2(function (params) {
     if (onVirtualScroll) {
-      var nextInfo = getVirtualScrollInfo();
+      var nextInfo = _objectSpread2(_objectSpread2({}, getVirtualScrollInfo()), params);
 
       // Trigger when offset changed
       if (lastVirtualScrollInfoRef.current.x !== nextInfo.x || lastVirtualScrollInfoRef.current.y !== nextInfo.y) {
@@ -8073,7 +8074,7 @@ function RawList(props, ref) {
   }
   var keepInHorizontalRange = function keepInHorizontalRange(nextOffsetLeft) {
     var tmpOffsetLeft = nextOffsetLeft;
-    var max = scrollWidth - size.width;
+    var max = !!scrollWidth ? scrollWidth - size.width : 0;
     tmpOffsetLeft = Math.max(tmpOffsetLeft, 0);
     tmpOffsetLeft = Math.min(tmpOffsetLeft, max);
     return tmpOffsetLeft;
@@ -8135,8 +8136,10 @@ function RawList(props, ref) {
   // Sync scroll left
   useLayoutEffect$3(function () {
     if (scrollWidth) {
-      setOffsetLeft(function (left) {
-        return keepInHorizontalRange(left);
+      var newOffsetLeft = keepInHorizontalRange(offsetLeft);
+      setOffsetLeft(newOffsetLeft);
+      triggerScroll({
+        x: newOffsetLeft
       });
     }
   }, [size.width, scrollWidth]);