@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/VirtualList/builders/build-grid.js

@@ -0,0 +1,561 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useClassNames, useForceUpdate } from "../../hooks";
+import { namespace } from "../../hooks/prefix";
+import { getScrollBarWidth, isNumber, isUndefined, nextTick } from "../../Util";
+import Scrollbar from "../components/scrollbar";
+import { AUTO_ALIGNMENT, BACKWARD, FORWARD, RTL, RTL_OFFSET_NAG, RTL_OFFSET_POS_ASC, RTL_OFFSET_POS_DESC } from "../defaults";
+import { useCache } from "../hooks/use-cache";
+import { useGridTouch } from "../hooks/use-grid-touch";
+import { useGridWheel } from "../hooks/use-grid-wheel";
+import { getRTLOffsetType, getScrollDir, isRTL } from "../utils";
+var createGrid = function createGrid(_ref) {
+  var name = _ref.name,
+    clearCache = _ref.clearCache,
+    getColumnPosition = _ref.getColumnPosition,
+    getColumnStartIndexForOffset = _ref.getColumnStartIndexForOffset,
+    getColumnStopIndexForStartIndex = _ref.getColumnStopIndexForStartIndex,
+    getEstimatedTotalHeight = _ref.getEstimatedTotalHeight,
+    getEstimatedTotalWidth = _ref.getEstimatedTotalWidth,
+    getColumnOffset = _ref.getColumnOffset,
+    getRowOffset = _ref.getRowOffset,
+    getRowPosition = _ref.getRowPosition,
+    getRowStartIndexForOffset = _ref.getRowStartIndexForOffset,
+    getRowStopIndexForStartIndex = _ref.getRowStopIndexForStartIndex,
+    initCache = _ref.initCache,
+    validateProps = _ref.validateProps;
+  var GridComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
+    var totalColumn = props.totalColumn,
+      totalRow = props.totalRow,
+      _props$columnCache = props.columnCache,
+      columnCache = _props$columnCache === void 0 ? 2 : _props$columnCache,
+      _props$rowCache = props.rowCache,
+      rowCache = _props$rowCache === void 0 ? 2 : _props$rowCache,
+      _props$data = props.data,
+      data = _props$data === void 0 ? [] : _props$data,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'ltr' : _props$direction,
+      height = props.height,
+      width = props.width,
+      style = props.style,
+      className = props.className,
+      _props$containerEleme = props.containerElement,
+      Container = _props$containerEleme === void 0 ? 'div' : _props$containerEleme,
+      _props$innerElement = props.innerElement,
+      Inner = _props$innerElement === void 0 ? 'div' : _props$innerElement,
+      _props$innerProps = props.innerProps,
+      innerProps = _props$innerProps === void 0 ? {} : _props$innerProps,
+      useIsScrolling = props.useIsScrolling,
+      _props$perfMode = props.perfMode,
+      perfMode = _props$perfMode === void 0 ? true : _props$perfMode,
+      _props$scrollbarAlway = props.scrollbarAlwaysOn,
+      scrollbarAlwaysOn = _props$scrollbarAlway === void 0 ? false : _props$scrollbarAlway,
+      _props$scrollbarStart = props.scrollbarStartGap,
+      scrollbarStartGap = _props$scrollbarStart === void 0 ? 0 : _props$scrollbarStart,
+      _props$scrollbarEndGa = props.scrollbarEndGap,
+      scrollbarEndGap = _props$scrollbarEndGa === void 0 ? 2 : _props$scrollbarEndGa,
+      _props$itemKey = props.itemKey,
+      itemKey = _props$itemKey === void 0 ? function (_ref2) {
+        var columnIndex = _ref2.columnIndex,
+          rowIndex = _ref2.rowIndex;
+        return "".concat(rowIndex, ":").concat(columnIndex);
+      } : _props$itemKey,
+      _props$initScrollLeft = props.initScrollLeft,
+      initScrollLeft = _props$initScrollLeft === void 0 ? 0 : _props$initScrollLeft,
+      _props$initScrollTop = props.initScrollTop,
+      initScrollTop = _props$initScrollTop === void 0 ? 0 : _props$initScrollTop,
+      itemRendered = props.itemRendered,
+      onScroll = props.onScroll,
+      children = props.children;
+    validateProps(props);
+    var ns = useClassNames('vl');
+    var _useForceUpdate = useForceUpdate(),
+      $forceUpdate = _useForceUpdate.forceUpdate;
+    var cache = useRef(initCache(props));
+    // if (injectToInstance) {
+    //     injectToInstance(cache);
+    // }
+
+    // refs
+    var windowRef = useRef(null);
+    var hScrollbarRef = useRef(null);
+    var vScrollbarRef = useRef(null);
+    var innerRef = useRef(null);
+
+    // const [states, setStates] = useState<GridStates>({
+    //     isScrolling: false,
+    //     scrollLeft: isNumber(initScrollLeft) ? initScrollLeft : 0,
+    //     scrollTop: isNumber(initScrollTop) ? initScrollTop : 0,
+    //     updateRequested: false,
+    //     xAxisScrollDir: FORWARD,
+    //     yAxisScrollDir: FORWARD,
+    // });
+    var nextState = useRef({
+      isScrolling: false,
+      scrollLeft: isNumber(initScrollLeft) ? initScrollLeft : 0,
+      scrollTop: isNumber(initScrollTop) ? initScrollTop : 0,
+      updateRequested: false,
+      xAxisScrollDir: FORWARD,
+      yAxisScrollDir: FORWARD
+    });
+    if (innerRef.current) {
+      innerRef.current.style.pointerEvents = '';
+    }
+    var states = nextState.current;
+    var getItemStyleCache = useCache();
+    var parsedHeight = useMemo(function () {
+      return Number.parseInt("".concat(height), 10);
+    }, [height]);
+    var parsedWidth = useMemo(function () {
+      return Number.parseInt("".concat(width), 10);
+    }, [width]);
+    var columnsToRender = useCallback(function () {
+      if (totalColumn === 0 || totalRow === 0) {
+        return [0, 0, 0, 0];
+      }
+      var startIndex = getColumnStartIndexForOffset(props, nextState.current.scrollLeft, cache.current);
+      var stopIndex = getColumnStopIndexForStartIndex(props, startIndex, nextState.current.scrollLeft, cache.current);
+      var cacheBackward = !nextState.current.isScrolling || nextState.current.xAxisScrollDir === BACKWARD ? Math.max(1, columnCache) : 1;
+      var cacheForward = !nextState.current.isScrolling || nextState.current.xAxisScrollDir === FORWARD ? Math.max(1, columnCache) : 1;
+      return [Math.max(0, startIndex - cacheBackward), Math.max(0, Math.min(totalColumn - 1, stopIndex + cacheForward)), startIndex, stopIndex];
+    }, [totalColumn, totalRow, props, columnCache]);
+    var rowsToRender = useCallback(function () {
+      if (totalColumn === 0 || totalRow === 0) {
+        return [0, 0, 0, 0];
+      }
+      var startIndex = getRowStartIndexForOffset(props, nextState.current.scrollTop, cache.current);
+      var stopIndex = getRowStopIndexForStartIndex(props, startIndex, nextState.current.scrollTop, cache.current);
+      var cacheBackward = !nextState.current.isScrolling || nextState.current.yAxisScrollDir === BACKWARD ? Math.max(1, rowCache) : 1;
+      var cacheForward = !nextState.current.isScrolling || nextState.current.yAxisScrollDir === FORWARD ? Math.max(1, rowCache) : 1;
+      return [Math.max(0, startIndex - cacheBackward), Math.max(0, Math.min(totalRow - 1, stopIndex + cacheForward)), startIndex, stopIndex];
+    }, [totalColumn, totalRow, props, rowCache]);
+    var estimatedTotalHeight = useMemo(function () {
+      return getEstimatedTotalHeight(props, cache.current);
+    }, [props]);
+    var estimatedTotalWidth = useMemo(function () {
+      return getEstimatedTotalWidth(props, cache.current);
+    }, [props]);
+    var windowStyle = useMemo(function () {
+      return [{
+        position: 'relative',
+        overflow: 'hidden',
+        WebkitOverflowScrolling: 'touch',
+        willChange: 'transform'
+      }, {
+        direction: direction,
+        height: isNumber(height) ? "".concat(height, "px") : String(height),
+        width: isNumber(width) ? "".concat(width, "px") : String(width !== null && width !== void 0 ? width : '')
+      }, style !== null && style !== void 0 ? style : {}];
+    }, [direction, height, width, style]);
+    var innerStyle = useCallback(function () {
+      return {
+        height: "".concat(estimatedTotalHeight, "px"),
+        // pointerEvents: nextState.current.isScrolling ? 'none' : undefined,
+        width: "".concat(estimatedTotalWidth, "px"),
+        margin: 0,
+        boxSizing: 'border-box'
+      };
+    }, [estimatedTotalWidth, estimatedTotalHeight]);
+    var emitEvents = useCallback(function () {
+      if (totalColumn > 0 && totalRow > 0) {
+        var _columnsToRender = columnsToRender(),
+          _columnsToRender2 = _slicedToArray(_columnsToRender, 4),
+          columnCacheStart = _columnsToRender2[0],
+          columnCacheEnd = _columnsToRender2[1],
+          columnVisibleStart = _columnsToRender2[2],
+          columnVisibleEnd = _columnsToRender2[3];
+        var _rowsToRender = rowsToRender(),
+          _rowsToRender2 = _slicedToArray(_rowsToRender, 4),
+          rowCacheStart = _rowsToRender2[0],
+          rowCacheEnd = _rowsToRender2[1],
+          rowVisibleStart = _rowsToRender2[2],
+          rowVisibleEnd = _rowsToRender2[3];
+        // emit the render item event with
+        // [xAxisInvisibleStart, xAxisInvisibleEnd, xAxisVisibleStart, xAxisVisibleEnd]
+        // [yAxisInvisibleStart, yAxisInvisibleEnd, yAxisVisibleStart, yAxisVisibleEnd]
+        itemRendered === null || itemRendered === void 0 || itemRendered({
+          columnCacheStart: columnCacheStart,
+          columnCacheEnd: columnCacheEnd,
+          rowCacheStart: rowCacheStart,
+          rowCacheEnd: rowCacheEnd,
+          columnVisibleStart: columnVisibleStart,
+          columnVisibleEnd: columnVisibleEnd,
+          rowVisibleStart: rowVisibleStart,
+          rowVisibleEnd: rowVisibleEnd
+        });
+      }
+      var _nextState$current = nextState.current,
+        scrollLeft = _nextState$current.scrollLeft,
+        scrollTop = _nextState$current.scrollTop,
+        updateRequested = _nextState$current.updateRequested,
+        xAxisScrollDir = _nextState$current.xAxisScrollDir,
+        yAxisScrollDir = _nextState$current.yAxisScrollDir;
+      onScroll === null || onScroll === void 0 || onScroll({
+        xAxisScrollDir: xAxisScrollDir,
+        scrollLeft: scrollLeft,
+        yAxisScrollDir: yAxisScrollDir,
+        scrollTop: scrollTop,
+        updateRequested: updateRequested
+      });
+    }, [columnsToRender, itemRendered, onScroll, rowsToRender, totalColumn, totalRow]);
+    var resetIsScrolling = useCallback(function () {
+      // setStates(prev => ({ ...prev, isScrolling: false }));
+      nextState.current.isScrolling = false;
+      if (innerRef.current) {
+        innerRef.current.style.pointerEvents = '';
+      }
+      nextTick(function () {
+        getItemStyleCache(-1, null, null);
+      }, 0);
+    }, [getItemStyleCache]);
+    var onUpdated = useCallback(function () {
+      var _nextState$current2;
+      var windowElement = windowRef.current;
+      if ((_nextState$current2 = nextState.current) !== null && _nextState$current2 !== void 0 && _nextState$current2.updateRequested && windowElement) {
+        if (direction === RTL) {
+          switch (getRTLOffsetType()) {
+            case RTL_OFFSET_NAG:
+              {
+                windowElement.scrollLeft = -nextState.current.scrollLeft;
+                break;
+              }
+            case RTL_OFFSET_POS_ASC:
+              {
+                windowElement.scrollLeft = nextState.current.scrollLeft;
+                break;
+              }
+            default:
+              {
+                var clientWidth = windowElement.clientWidth,
+                  scrollWidth = windowElement.scrollWidth;
+                windowElement.scrollLeft = scrollWidth - clientWidth - nextState.current.scrollLeft;
+                break;
+              }
+          }
+        } else {
+          windowElement.scrollLeft = Math.max(0, nextState.current.scrollLeft);
+        }
+        windowElement.scrollTop = Math.max(0, nextState.current.scrollTop);
+      }
+    }, [direction]);
+    var scrollTo = useCallback(function (_ref3) {
+      var _ref3$scrollLeft = _ref3.scrollLeft,
+        scrollLeft = _ref3$scrollLeft === void 0 ? nextState.current.scrollLeft : _ref3$scrollLeft,
+        _ref3$scrollTop = _ref3.scrollTop,
+        scrollTop = _ref3$scrollTop === void 0 ? nextState.current.scrollTop : _ref3$scrollTop;
+      scrollLeft = Math.max(scrollLeft, 0);
+      scrollTop = Math.max(scrollTop, 0);
+      if (scrollTop === nextState.current.scrollTop && scrollLeft === nextState.current.scrollLeft) {
+        return;
+      }
+      nextState.current = _objectSpread(_objectSpread({}, nextState.current), {}, {
+        xAxisScrollDir: getScrollDir(nextState.current.scrollLeft, scrollLeft),
+        yAxisScrollDir: getScrollDir(nextState.current.scrollTop, scrollTop),
+        scrollLeft: scrollLeft,
+        scrollTop: scrollTop,
+        updateRequested: true
+      });
+      // setStates(nextState.current);
+
+      // nextTick(() => resetIsScrolling());
+      resetIsScrolling();
+      onUpdated();
+      emitEvents();
+    }, [onUpdated, emitEvents, resetIsScrolling]);
+    var handleScroll = useCallback(function (e) {
+      var _e$currentTarget = e.currentTarget,
+        clientHeight = _e$currentTarget.clientHeight,
+        clientWidth = _e$currentTarget.clientWidth,
+        scrollHeight = _e$currentTarget.scrollHeight,
+        scrollLeft = _e$currentTarget.scrollLeft,
+        scrollTop = _e$currentTarget.scrollTop,
+        scrollWidth = _e$currentTarget.scrollWidth;
+      if (nextState.current.scrollTop === scrollTop && nextState.current.scrollLeft === scrollLeft) {
+        return;
+      }
+      var _scrollLeft = scrollLeft;
+      if (isRTL(direction)) {
+        switch (getRTLOffsetType()) {
+          case RTL_OFFSET_NAG:
+            _scrollLeft = -scrollLeft;
+            break;
+          case RTL_OFFSET_POS_DESC:
+            _scrollLeft = scrollWidth - clientWidth - scrollLeft;
+            break;
+        }
+      }
+      nextState.current = _objectSpread(_objectSpread({}, nextState.current), {}, {
+        isScrolling: true,
+        scrollLeft: _scrollLeft,
+        scrollTop: Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight)),
+        updateRequested: true,
+        xAxisScrollDir: getScrollDir(nextState.current.scrollLeft, _scrollLeft),
+        yAxisScrollDir: getScrollDir(nextState.current.scrollTop, scrollTop)
+      });
+      if (innerRef.current) {
+        innerRef.current.style.pointerEvents = 'none';
+      }
+      // setStates(nextState.current);
+
+      nextTick(function () {
+        return resetIsScrolling();
+      });
+      // resetIsScrolling();
+      onUpdated();
+      emitEvents();
+    }, [direction, onUpdated, emitEvents, resetIsScrolling]);
+    var onVerticalScroll = useCallback(function (distance, totalSteps) {
+      var offset = (estimatedTotalHeight - parsedHeight) / totalSteps * distance;
+      scrollTo({
+        scrollTop: Math.min(estimatedTotalHeight - parsedHeight, offset)
+      });
+    }, [estimatedTotalHeight, parsedHeight, scrollTo]);
+    var onHorizontalScroll = useCallback(function (distance, totalSteps) {
+      var offset = (estimatedTotalWidth - parsedWidth) / totalSteps * distance;
+      scrollTo({
+        scrollLeft: Math.min(estimatedTotalWidth - parsedWidth, offset)
+      });
+    }, [estimatedTotalWidth, parsedWidth, scrollTo]);
+    var _useGridWheel = useGridWheel({
+        atXStartEdge: states.scrollLeft <= 0,
+        atXEndEdge: states.scrollLeft >= estimatedTotalWidth - parsedWidth,
+        atYStartEdge: states.scrollTop <= 0,
+        atYEndEdge: states.scrollTop >= estimatedTotalHeight - parsedHeight
+      }, function (x, y) {
+        var _hScrollbarRef$curren, _hScrollbarRef$curren2, _vScrollbarRef$curren, _vScrollbarRef$curren2;
+        (_hScrollbarRef$curren = hScrollbarRef.current) === null || _hScrollbarRef$curren === void 0 || (_hScrollbarRef$curren2 = _hScrollbarRef$curren.onMouseUp) === null || _hScrollbarRef$curren2 === void 0 || _hScrollbarRef$curren2.call(_hScrollbarRef$curren);
+        (_vScrollbarRef$curren = vScrollbarRef.current) === null || _vScrollbarRef$curren === void 0 || (_vScrollbarRef$curren2 = _vScrollbarRef$curren.onMouseUp) === null || _vScrollbarRef$curren2 === void 0 || _vScrollbarRef$curren2.call(_vScrollbarRef$curren);
+        scrollTo({
+          scrollLeft: Math.min(states.scrollLeft + x, estimatedTotalWidth - parsedWidth),
+          scrollTop: Math.min(states.scrollTop + y, estimatedTotalHeight - parsedHeight)
+        });
+      }),
+      onWheel = _useGridWheel.onWheel;
+    var handleWheel = useCallback(function (e) {
+      if (!windowRef.current) {
+        return;
+      }
+      onWheel(e);
+    }, [onWheel]);
+    useEffect(function () {
+      var element = windowRef.current;
+      if (!element) {
+        return;
+      }
+      element.addEventListener('wheel', handleWheel, {
+        passive: false
+      });
+      return function () {
+        element.removeEventListener('wheel', handleWheel);
+      };
+    }, [handleWheel]);
+    var _useGridTouch = useGridTouch(windowRef, states, scrollTo, estimatedTotalWidth, estimatedTotalHeight, parsedWidth, parsedHeight),
+      touchStartX = _useGridTouch.touchStartX,
+      touchStartY = _useGridTouch.touchStartY,
+      handleTouchStart = _useGridTouch.handleTouchStart,
+      handleTouchMove = _useGridTouch.handleTouchMove;
+    var scrollToItem = useCallback(function () {
+      var rowIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var columnIdx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var alignment = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : AUTO_ALIGNMENT;
+      columnIdx = Math.max(0, Math.min(columnIdx, totalColumn - 1));
+      rowIndex = Math.max(0, Math.min(rowIndex, totalRow - 1));
+      var scrollBarWidth = getScrollBarWidth(namespace);
+      scrollTo({
+        scrollLeft: getColumnOffset(props, columnIdx, alignment, nextState.current.scrollLeft, cache.current, estimatedTotalWidth > width ? scrollBarWidth : 0),
+        scrollTop: getRowOffset(props, rowIndex, alignment, nextState.current.scrollTop, cache.current, estimatedTotalHeight > height ? scrollBarWidth : 0)
+      });
+    }, [totalColumn, totalRow, scrollTo, props, estimatedTotalWidth, width, estimatedTotalHeight, height]);
+    var getItemStyle = useCallback(function (rowIndex, columnIndex) {
+      var itemStyleCache = getItemStyleCache(clearCache && props.columnWidth, clearCache && props.rowHeight, clearCache && direction);
+      var key = "".concat(rowIndex, ",").concat(columnIndex);
+      if (Object.prototype.hasOwnProperty.call(itemStyleCache, key)) {
+        return itemStyleCache[key];
+      } else {
+        var _getColumnPosition = getColumnPosition(props, columnIndex, cache.current),
+          _getColumnPosition2 = _slicedToArray(_getColumnPosition, 2),
+          left = _getColumnPosition2[1];
+        var rtl = isRTL(direction);
+        var _getRowPosition = getRowPosition(props, rowIndex, cache.current),
+          _getRowPosition2 = _slicedToArray(_getRowPosition, 2),
+          _height = _getRowPosition2[0],
+          top = _getRowPosition2[1];
+        var _getColumnPosition3 = getColumnPosition(props, columnIndex, cache.current),
+          _getColumnPosition4 = _slicedToArray(_getColumnPosition3, 1),
+          _width = _getColumnPosition4[0];
+        itemStyleCache[key] = {
+          position: 'absolute',
+          left: rtl ? undefined : "".concat(left, "px"),
+          right: rtl ? "".concat(left, "px") : undefined,
+          top: "".concat(top, "px"),
+          height: "".concat(_height, "px"),
+          width: "".concat(_width, "px")
+        };
+        return itemStyleCache[key];
+      }
+    }, [getItemStyleCache, direction, props]);
+
+    // Mount effect
+    useEffect(function () {
+      var windowElement = windowRef.current;
+      if (windowElement) {
+        if (isNumber(initScrollLeft)) {
+          windowElement.scrollLeft = initScrollLeft;
+        }
+        if (isNumber(initScrollTop)) {
+          windowElement.scrollTop = initScrollTop;
+        }
+      }
+      emitEvents();
+    }, []);
+    var resetAfter = useCallback(function (_ref4, forceUpdate) {
+      var columnIndex = _ref4.columnIndex,
+        rowIndex = _ref4.rowIndex;
+      forceUpdate = isUndefined(forceUpdate) ? true : forceUpdate;
+      if (isNumber(columnIndex)) {
+        cache.current.lastVisitedColumnIndex = Math.min(cache.current.lastVisitedColumnIndex, columnIndex - 1);
+      }
+      if (isNumber(rowIndex)) {
+        cache.current.lastVisitedRowIndex = Math.min(cache.current.lastVisitedRowIndex, rowIndex - 1);
+      }
+      getItemStyleCache(-1, null, null);
+      if (forceUpdate) {
+        $forceUpdate();
+      }
+    }, [$forceUpdate, getItemStyleCache]);
+    var resetAfterColumnIndex = useCallback(function (columnIndex, forceUpdate) {
+      resetAfter({
+        columnIndex: columnIndex
+      }, forceUpdate);
+    }, [resetAfter]);
+    var resetAfterRowIndex = useCallback(function (rowIndex, forceUpdate) {
+      resetAfter({
+        rowIndex: rowIndex
+      }, forceUpdate);
+    }, [resetAfter]);
+
+    // Expose methods via ref
+    React.useImperativeHandle(ref, function () {
+      return {
+        windowRef: windowRef,
+        innerRef: innerRef,
+        getItemStyleCache: getItemStyleCache,
+        touchStartX: touchStartX,
+        touchStartY: touchStartY,
+        handleTouchStart: handleTouchStart,
+        handleTouchMove: handleTouchMove,
+        scrollTo: scrollTo,
+        scrollToItem: scrollToItem,
+        states: states,
+        resetAfter: resetAfter,
+        resetAfterColumnIndex: resetAfterColumnIndex,
+        resetAfterRowIndex: resetAfterRowIndex,
+        forceUpdate: $forceUpdate
+      };
+    }, [getItemStyleCache, touchStartX, touchStartY, handleTouchStart, handleTouchMove, scrollTo, scrollToItem, states, resetAfter, resetAfterColumnIndex, resetAfterRowIndex, $forceUpdate]);
+    var renderScrollbars = function renderScrollbars() {
+      var horizontalScrollbar = /*#__PURE__*/React.createElement(Scrollbar, {
+        ref: hScrollbarRef,
+        alwaysOn: scrollbarAlwaysOn,
+        startGap: scrollbarStartGap,
+        endGap: scrollbarEndGap,
+        class: ns.e('horizontal'),
+        clientSize: parsedWidth,
+        layout: 'horizontal',
+        onScroll: onHorizontalScroll,
+        ratio: parsedWidth * 100 / estimatedTotalWidth,
+        scrollFrom: nextState.current.scrollLeft / (estimatedTotalWidth - parsedWidth),
+        total: totalRow,
+        visible: true
+      });
+      var verticalScrollbar = /*#__PURE__*/React.createElement(Scrollbar, {
+        ref: vScrollbarRef,
+        alwaysOn: scrollbarAlwaysOn,
+        startGap: scrollbarStartGap,
+        endGap: scrollbarEndGap,
+        class: ns.e('vertical'),
+        clientSize: parsedHeight,
+        layout: 'vertical',
+        onScroll: onVerticalScroll,
+        ratio: parsedHeight * 100 / estimatedTotalHeight,
+        scrollFrom: nextState.current.scrollTop / (estimatedTotalHeight - parsedHeight),
+        total: totalColumn,
+        visible: true
+      });
+      return {
+        horizontalScrollbar: horizontalScrollbar,
+        verticalScrollbar: verticalScrollbar
+      };
+    };
+    var renderItems = useCallback(function () {
+      var _columnsToRender3 = columnsToRender(),
+        _columnsToRender4 = _slicedToArray(_columnsToRender3, 2),
+        columnStart = _columnsToRender4[0],
+        columnEnd = _columnsToRender4[1];
+      var _rowsToRender3 = rowsToRender(),
+        _rowsToRender4 = _slicedToArray(_rowsToRender3, 2),
+        rowStart = _rowsToRender4[0],
+        rowEnd = _rowsToRender4[1];
+      var nodes = [];
+      if (totalRow > 0 && totalColumn > 0) {
+        for (var row = rowStart; row <= rowEnd; row++) {
+          for (var column = columnStart; column <= columnEnd; column++) {
+            var key = itemKey({
+              columnIndex: column,
+              data: data,
+              rowIndex: row
+            });
+            nodes.push( /*#__PURE__*/React.createElement(React.Fragment, {
+              key: key
+            }, children ? children({
+              columnIndex: column,
+              data: data,
+              isScrolling: useIsScrolling ? nextState.current.isScrolling : undefined,
+              style: getItemStyle(row, column),
+              rowIndex: row
+            }) : null));
+          }
+        }
+      }
+      return nodes;
+    }, [children, columnsToRender, data, getItemStyle, itemKey, rowsToRender, totalColumn, totalRow, useIsScrolling]);
+    var _renderScrollbars = renderScrollbars(),
+      horizontalScrollbar = _renderScrollbars.horizontalScrollbar,
+      verticalScrollbar = _renderScrollbars.verticalScrollbar;
+    var renderInner = useCallback(function () {
+      var childrenNodes = renderItems();
+      return /*#__PURE__*/React.createElement(Inner, _objectSpread(_objectSpread({}, innerProps), {}, {
+        style: innerStyle(),
+        ref: innerRef
+      }), childrenNodes);
+    }, [renderItems, Inner, innerProps, innerStyle]);
+    return /*#__PURE__*/React.createElement('div', {
+      key: 0,
+      className: ns.e('wrapper'),
+      role: props.role
+    }, [/*#__PURE__*/React.createElement(Container, {
+      className: className,
+      style: Object.assign.apply(Object, [{}].concat(_toConsumableArray(windowStyle))),
+      onScroll: handleScroll,
+      ref: windowRef
+    }, renderInner()), horizontalScrollbar, verticalScrollbar]);
+  });
+  GridComponent.displayName = name !== null && name !== void 0 ? name : 'ElVirtualGrid';
+  return GridComponent;
+};
+export default createGrid;

package/dist/VirtualList/builders/build-list.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { VirtualizedListProps } from '../props';
+import type { ListConstructorProps, ListExposes } from '../types';
+declare const createList: ({ name, getOffset, getItemSize, getItemOffset, getEstimatedTotalSize, getStartIndexForOffset, getStopIndexForStartIndex, initCache, clearCache, validateProps, }: ListConstructorProps<VirtualizedListProps>) => React.ForwardRefExoticComponent<VirtualizedListProps & {
+    children: (props: any) => React.ReactNode;
+} & React.RefAttributes<ListExposes>>;
+export default createList;