@qsxy/element-plus-react 1.0.2 → 2.0.0

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

@@ -0,0 +1,408 @@
+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 classNames from 'classnames';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useClassNames } from "../../hooks";
+import Scrollbar from "../components/scrollbar";
+import { AUTO_ALIGNMENT, BACKWARD, FORWARD, HORIZONTAL, RTL, RTL_OFFSET_NAG, RTL_OFFSET_POS_ASC, RTL_OFFSET_POS_DESC } from "../defaults";
+import { useCache } from "../hooks/use-cache";
+import { useWheel } from "../hooks/use-wheel";
+import { getRTLOffsetType, getScrollDir, isHorizontal } from "../utils";
+import { isClient, isNumber, isString } from "../../Util";
+var createList = function createList(_ref) {
+  var name = _ref.name,
+    getOffset = _ref.getOffset,
+    getItemSize = _ref.getItemSize,
+    getItemOffset = _ref.getItemOffset,
+    getEstimatedTotalSize = _ref.getEstimatedTotalSize,
+    getStartIndexForOffset = _ref.getStartIndexForOffset,
+    getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,
+    initCache = _ref.initCache,
+    clearCache = _ref.clearCache,
+    validateProps = _ref.validateProps;
+  var ListComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
+    var total = props.total,
+      _props$cache = props.cache,
+      cache = _props$cache === void 0 ? 2 : _props$cache,
+      _props$data = props.data,
+      data = _props$data === void 0 ? [] : _props$data,
+      _props$layout = props.layout,
+      layout = _props$layout === void 0 ? 'vertical' : _props$layout,
+      _props$initScrollOffs = props.initScrollOffset,
+      initScrollOffset = _props$initScrollOffs === void 0 ? 0 : _props$initScrollOffs,
+      itemSize = props.itemSize,
+      _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,
+      children = props.children;
+    validateProps(props);
+    var ns = useClassNames('vl');
+    var dynamicSizeCache = useRef(initCache(props));
+    var getItemStyleCache = useCache();
+
+    // refs
+    var windowRef = useRef(null);
+    var innerRef = useRef(null);
+    var scrollbarRef = useRef(null);
+    var _useState = useState({
+        isScrolling: false,
+        scrollDir: 'forward',
+        scrollOffset: isNumber(initScrollOffset) ? initScrollOffset : 0,
+        updateRequested: false,
+        isScrollbarDragging: false,
+        scrollbarAlwaysOn: scrollbarAlwaysOn
+      }),
+      _useState2 = _slicedToArray(_useState, 2),
+      states = _useState2[0],
+      setStates = _useState2[1];
+    var itemsToRender = useMemo(function () {
+      if (total === 0) {
+        return [0, 0, 0, 0];
+      }
+      var startIndex = getStartIndexForOffset(props, states.scrollOffset, dynamicSizeCache.current);
+      var stopIndex = getStopIndexForStartIndex(props, startIndex, states.scrollOffset, dynamicSizeCache.current);
+      var cacheBackward = !states.isScrolling || states.scrollDir === BACKWARD ? Math.max(1, cache) : 1;
+      var cacheForward = !states.isScrolling || states.scrollDir === FORWARD ? Math.max(1, cache) : 1;
+      return [Math.max(0, startIndex - cacheBackward), Math.max(0, Math.min(total - 1, stopIndex + cacheForward)), startIndex, stopIndex];
+    }, [total, cache, states.isScrolling, states.scrollDir, states.scrollOffset, props]);
+    var estimatedTotalSize = useMemo(function () {
+      return getEstimatedTotalSize(props, dynamicSizeCache.current);
+    }, [props]);
+    var _isHorizontal = useMemo(function () {
+      return isHorizontal(layout);
+    }, [layout]);
+    var windowStyle = useMemo(function () {
+      return [_defineProperty(_defineProperty(_defineProperty({
+        position: 'relative'
+      }, "overflow-".concat(_isHorizontal ? 'x' : 'y'), 'scroll'), "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 : {}];
+    }, [_isHorizontal, direction, height, width, style]);
+    var innerStyle = useMemo(function () {
+      var size = estimatedTotalSize;
+      var horizontal = _isHorizontal;
+      return {
+        height: horizontal ? '100%' : "".concat(size, "px"),
+        pointerEvents: states.isScrolling ? 'none' : undefined,
+        width: horizontal ? "".concat(size, "px") : '100%',
+        margin: 0,
+        boxSizing: 'border-box'
+      };
+    }, [estimatedTotalSize, _isHorizontal, states.isScrolling]);
+    var clientSize = useMemo(function () {
+      return _isHorizontal ? width : height;
+    }, [_isHorizontal, width, height]);
+    var resetIsScrolling = useCallback(function () {
+      setStates(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          isScrolling: false
+        });
+      });
+      setTimeout(function () {
+        getItemStyleCache(-1, null, null);
+      }, 0);
+    }, [getItemStyleCache]);
+    var scrollTo = useCallback(function (offset) {
+      offset = Math.max(offset, 0);
+      if (offset === states.scrollOffset) {
+        return;
+      }
+      setStates(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          scrollOffset: offset,
+          scrollDir: getScrollDir(prev.scrollOffset, offset),
+          updateRequested: true
+        });
+      });
+      requestAnimationFrame(function () {
+        return resetIsScrolling();
+      });
+    }, [states.scrollOffset, resetIsScrolling]);
+    var scrollToItem = useCallback(function (idx) {
+      var alignment = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : AUTO_ALIGNMENT;
+      idx = Math.max(0, Math.min(idx, total - 1));
+      scrollTo(getOffset(props, idx, alignment, states.scrollOffset, dynamicSizeCache.current));
+    }, [total, props, states.scrollOffset]);
+    var _useWheel = useWheel({
+        atStartEdge: states.scrollOffset <= 0,
+        atEndEdge: states.scrollOffset >= estimatedTotalSize - clientSize,
+        layout: layout
+      }, function (offset) {
+        var _scrollbarRef$current, _scrollbarRef$current2;
+        (_scrollbarRef$current = scrollbarRef.current) === null || _scrollbarRef$current === void 0 || (_scrollbarRef$current2 = _scrollbarRef$current.onMouseUp) === null || _scrollbarRef$current2 === void 0 || _scrollbarRef$current2.call(_scrollbarRef$current);
+        scrollTo(Math.min(states.scrollOffset + offset, estimatedTotalSize - clientSize));
+      }),
+      onWheel = _useWheel.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 emitEvents = useCallback(function () {
+      // In React, we don't have emits, but we can keep this for API compatibility
+      if (total > 0) {
+        var _itemsToRender = _slicedToArray(itemsToRender, 4),
+          cacheStart = _itemsToRender[0],
+          cacheEnd = _itemsToRender[1],
+          visibleStart = _itemsToRender[2],
+          visibleEnd = _itemsToRender[3];
+        // Could emit events here if needed
+      }
+    }, [total, itemsToRender]);
+    var scrollVertically = useCallback(function (e) {
+      var _e$currentTarget = e.currentTarget,
+        clientHeight = _e$currentTarget.clientHeight,
+        scrollHeight = _e$currentTarget.scrollHeight,
+        scrollTop = _e$currentTarget.scrollTop;
+      if (states.scrollOffset === scrollTop) {
+        return;
+      }
+      var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
+      setStates(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          isScrolling: true,
+          scrollDir: getScrollDir(prev.scrollOffset, scrollOffset),
+          scrollOffset: scrollOffset,
+          updateRequested: false
+        });
+      });
+      requestAnimationFrame(function () {
+        return resetIsScrolling();
+      });
+    }, [states.scrollOffset, resetIsScrolling]);
+    var scrollHorizontally = useCallback(function (e) {
+      var _e$currentTarget2 = e.currentTarget,
+        clientWidth = _e$currentTarget2.clientWidth,
+        scrollLeft = _e$currentTarget2.scrollLeft,
+        scrollWidth = _e$currentTarget2.scrollWidth;
+      if (states.scrollOffset === scrollLeft) {
+        return;
+      }
+      var scrollOffset = scrollLeft;
+      if (direction === RTL) {
+        switch (getRTLOffsetType()) {
+          case RTL_OFFSET_NAG:
+            {
+              scrollOffset = -scrollLeft;
+              break;
+            }
+          case RTL_OFFSET_POS_DESC:
+            {
+              scrollOffset = scrollWidth - clientWidth - scrollLeft;
+              break;
+            }
+        }
+      }
+      scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
+      setStates(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          isScrolling: true,
+          scrollDir: getScrollDir(prev.scrollOffset, scrollOffset),
+          scrollOffset: scrollOffset,
+          updateRequested: false
+        });
+      });
+      requestAnimationFrame(function () {
+        return resetIsScrolling();
+      });
+    }, [direction, resetIsScrolling]);
+    var onScroll = useCallback(function (e) {
+      if (_isHorizontal) {
+        scrollHorizontally(e);
+      } else {
+        scrollVertically(e);
+      }
+      emitEvents();
+    }, [_isHorizontal, scrollHorizontally, scrollVertically, emitEvents]);
+    var onScrollbarScroll = useCallback(function (distanceToGo, totalSteps) {
+      var offset = (estimatedTotalSize - clientSize) / totalSteps * distanceToGo;
+      scrollTo(Math.min(estimatedTotalSize - clientSize, offset));
+    }, [estimatedTotalSize, clientSize, scrollTo]);
+    var getItemStyle = useCallback(function (idx) {
+      var itemStyleCache = getItemStyleCache(clearCache && itemSize, clearCache && layout, clearCache && direction);
+      var style;
+      if (Object.prototype.hasOwnProperty.call(itemStyleCache, String(idx))) {
+        style = itemStyleCache[idx];
+      } else {
+        var offset = getItemOffset(props, idx, dynamicSizeCache.current);
+        var size = getItemSize(props, idx, dynamicSizeCache.current);
+        var horizontal = _isHorizontal;
+        var isRtl = direction === RTL;
+        var offsetHorizontal = horizontal ? offset : 0;
+        itemStyleCache[idx] = style = {
+          position: 'absolute',
+          left: isRtl ? undefined : "".concat(offsetHorizontal, "px"),
+          right: isRtl ? "".concat(offsetHorizontal, "px") : undefined,
+          top: !horizontal ? "".concat(offset, "px") : 0,
+          height: !horizontal ? "".concat(size, "px") : '100%',
+          width: horizontal ? "".concat(size, "px") : '100%'
+        };
+      }
+      return style;
+    }, [getItemStyleCache, clearCache, itemSize, layout, direction, getItemOffset, getItemSize, props, _isHorizontal]);
+    var resetScrollTop = useCallback(function () {
+      var window = windowRef.current;
+      if (window) {
+        window.scrollTop = 0;
+      }
+    }, []);
+
+    // Mount effect
+    useEffect(function () {
+      if (!isClient) {
+        return;
+      }
+      var windowElement = windowRef.current;
+      if (isNumber(initScrollOffset) && windowElement) {
+        if (_isHorizontal) {
+          windowElement.scrollLeft = initScrollOffset;
+        } else {
+          windowElement.scrollTop = initScrollOffset;
+        }
+      }
+      emitEvents();
+    }, []);
+
+    // Update effect for scroll position sync
+    useLayoutEffect(function () {
+      var windowElement = windowRef.current;
+      if (states.updateRequested && windowElement) {
+        if (layout === HORIZONTAL) {
+          if (direction === RTL) {
+            switch (getRTLOffsetType()) {
+              case RTL_OFFSET_NAG:
+                {
+                  windowElement.scrollLeft = -states.scrollOffset;
+                  break;
+                }
+              case RTL_OFFSET_POS_ASC:
+                {
+                  windowElement.scrollLeft = states.scrollOffset;
+                  break;
+                }
+              default:
+                {
+                  var clientWidth = windowElement.clientWidth,
+                    scrollWidth = windowElement.scrollWidth;
+                  windowElement.scrollLeft = scrollWidth - clientWidth - states.scrollOffset;
+                  break;
+                }
+            }
+          } else {
+            windowElement.scrollLeft = states.scrollOffset;
+          }
+        } else {
+          windowElement.scrollTop = states.scrollOffset;
+        }
+      }
+    }, [states.updateRequested, states.scrollOffset, layout, direction]);
+
+    // Expose methods via ref
+    React.useImperativeHandle(ref, function () {
+      return {
+        windowRef: windowRef,
+        innerRef: innerRef,
+        getItemStyleCache: getItemStyleCache,
+        scrollTo: scrollTo,
+        scrollToItem: scrollToItem,
+        resetScrollTop: resetScrollTop,
+        states: states
+      };
+    }, [scrollTo, scrollToItem, resetScrollTop, states, getItemStyleCache]);
+    var _itemsToRender2 = _slicedToArray(itemsToRender, 2),
+      start = _itemsToRender2[0],
+      end = _itemsToRender2[1];
+    var childrenNodes = useMemo(function () {
+      var nodes = [];
+      if (total > 0) {
+        for (var i = start; i <= end; i++) {
+          nodes.push( /*#__PURE__*/React.createElement(React.Fragment, {
+            key: i
+          }, children === null || children === void 0 ? void 0 : children({
+            data: data,
+            index: i,
+            isScrolling: useIsScrolling ? states.isScrolling : undefined,
+            style: getItemStyle(i)
+          })));
+        }
+      }
+      return nodes;
+    }, [start, end, total, data, useIsScrolling, states.isScrolling, getItemStyle, children]);
+    var InnerNode = /*#__PURE__*/React.createElement(Inner, _objectSpread(_objectSpread({}, innerProps), {}, {
+      style: innerStyle,
+      ref: innerRef
+    }), childrenNodes);
+    var listContainer = /*#__PURE__*/React.createElement(Container, {
+      className: classNames(ns.e('window'), className),
+      style: Object.assign.apply(Object, [{}].concat(_toConsumableArray(windowStyle))),
+      onScroll: onScroll,
+      ref: windowRef,
+      key: 0,
+      children: !isString(Container) ? {
+        default: function _default() {
+          return [InnerNode];
+        }
+      } : [InnerNode]
+    });
+    var scrollbar = /*#__PURE__*/React.createElement(Scrollbar, {
+      ref: scrollbarRef,
+      clientSize: clientSize,
+      layout: layout,
+      onScroll: onScrollbarScroll,
+      ratio: clientSize * 100 / estimatedTotalSize,
+      scrollFrom: states.scrollOffset / (estimatedTotalSize - clientSize),
+      total: total,
+      alwaysOn: states.scrollbarAlwaysOn
+    });
+    return /*#__PURE__*/React.createElement('div', {
+      key: 0,
+      className: classNames(ns.e('wrapper'), states.scrollbarAlwaysOn ? 'always-on' : '')
+    }, [listContainer, scrollbar]);
+  });
+  ListComponent.displayName = name !== null && name !== void 0 ? name : 'ElVirtualList';
+  return ListComponent;
+};
+export default createList;

package/dist/VirtualList/components/dynamic-size-grid.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { VirtualizedGridProps } from '../props';
+type Indices = {
+    columnIndex?: number;
+    rowIndex?: number;
+};
+declare const DynamicSizeGrid: React.ForwardRefExoticComponent<VirtualizedGridProps & React.RefAttributes<import("../types").GridExposes>>;
+export default DynamicSizeGrid;
+export type ResetAfterIndex = (idx: number, forceUpdate: boolean) => void;
+export type ResetAfterIndices = (indices: Indices, forceUpdate: boolean) => void;
+export type DynamicSizeGridInstance = React.ElementRef<typeof DynamicSizeGrid> & {
+    resetAfterColumnIndex: ResetAfterIndex;
+    resetAfterRowIndex: ResetAfterIndex;
+    resetAfter: ResetAfterIndices;
+};

package/dist/VirtualList/components/dynamic-size-grid.js

@@ -0,0 +1,242 @@
+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 _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 createGrid from "../builders/build-grid";
+import { AUTO_ALIGNMENT, CENTERED_ALIGNMENT, DEFAULT_DYNAMIC_LIST_ITEM_SIZE, END_ALIGNMENT, SMART_ALIGNMENT, START_ALIGNMENT } from "../defaults";
+var max = Math.max,
+  min = Math.min,
+  floor = Math.floor;
+var SCOPE = 'ElDynamicSizeGrid';
+// generates props access key via type
+var ACCESS_SIZER_KEY_MAP = {
+  column: 'columnWidth',
+  row: 'rowHeight'
+};
+
+// generates cache access key via type
+var ACCESS_LAST_VISITED_KEY_MAP = {
+  column: 'lastVisitedColumnIndex',
+  row: 'lastVisitedRowIndex'
+};
+var getItemFromCache = function getItemFromCache(props, index, gridCache, type) {
+  var _ref = [gridCache[type], props[ACCESS_SIZER_KEY_MAP[type]], gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]]],
+    cachedItems = _ref[0],
+    sizer = _ref[1],
+    lastVisited = _ref[2];
+  if (index > lastVisited) {
+    var offset = 0;
+    if (lastVisited >= 0) {
+      var item = cachedItems[lastVisited];
+      offset = item.offset + item.size;
+    }
+    for (var i = lastVisited + 1; i <= index; i++) {
+      var size = sizer(i);
+      cachedItems[i] = {
+        offset: offset,
+        size: size
+      };
+      offset += size;
+    }
+    gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]] = index;
+  }
+  return cachedItems[index];
+};
+var bs = function bs(props, gridCache, low, high, offset, type) {
+  while (low <= high) {
+    var mid = low + floor((high - low) / 2);
+    var currentOffset = getItemFromCache(props, mid, gridCache, type).offset;
+    if (currentOffset === offset) {
+      return mid;
+    } else if (currentOffset < offset) {
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+  return max(0, low - 1);
+};
+var es = function es(props, gridCache, idx, offset, type) {
+  var total = type === 'column' ? props.totalColumn : props.totalRow;
+  var exponent = 1;
+  while (idx < total && getItemFromCache(props, idx, gridCache, type).offset < offset) {
+    idx += exponent;
+    exponent *= 2;
+  }
+  return bs(props, gridCache, floor(idx / 2), min(idx, total - 1), offset, type);
+};
+var findItem = function findItem(props, gridCache, offset, type) {
+  var _ref2 = [gridCache[type], gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]]],
+    cache = _ref2[0],
+    lastVisitedIndex = _ref2[1];
+  var lastVisitedItemOffset = lastVisitedIndex > 0 ? cache[lastVisitedIndex].offset : 0;
+  if (lastVisitedItemOffset >= offset) {
+    return bs(props, gridCache, 0, lastVisitedIndex, offset, type);
+  }
+  return es(props, gridCache, max(0, lastVisitedIndex), offset, type);
+};
+var getEstimatedTotalHeight = function getEstimatedTotalHeight(_ref3, _ref4) {
+  var totalRow = _ref3.totalRow;
+  var estimatedRowHeight = _ref4.estimatedRowHeight,
+    lastVisitedRowIndex = _ref4.lastVisitedRowIndex,
+    row = _ref4.row;
+  var sizeOfVisitedRows = 0;
+  if (lastVisitedRowIndex >= totalRow) {
+    lastVisitedRowIndex = totalRow - 1;
+  }
+  if (lastVisitedRowIndex >= 0) {
+    var item = row[lastVisitedRowIndex];
+    sizeOfVisitedRows = item.offset + item.size;
+  }
+  var unvisitedItems = totalRow - lastVisitedRowIndex - 1;
+  var sizeOfUnvisitedItems = unvisitedItems * estimatedRowHeight;
+  return sizeOfVisitedRows + sizeOfUnvisitedItems;
+};
+var getEstimatedTotalWidth = function getEstimatedTotalWidth(_ref5, _ref6) {
+  var totalColumn = _ref5.totalColumn;
+  var column = _ref6.column,
+    estimatedColumnWidth = _ref6.estimatedColumnWidth,
+    lastVisitedColumnIndex = _ref6.lastVisitedColumnIndex;
+  var sizeOfVisitedColumns = 0;
+  if (lastVisitedColumnIndex > totalColumn) {
+    lastVisitedColumnIndex = totalColumn - 1;
+  }
+  if (lastVisitedColumnIndex >= 0) {
+    var item = column[lastVisitedColumnIndex];
+    sizeOfVisitedColumns = item.offset + item.size;
+  }
+  var unvisitedItems = totalColumn - lastVisitedColumnIndex - 1;
+  var sizeOfUnvisitedItems = unvisitedItems * estimatedColumnWidth;
+  return sizeOfVisitedColumns + sizeOfUnvisitedItems;
+};
+var ACCESS_ESTIMATED_SIZE_KEY_MAP = {
+  column: getEstimatedTotalWidth,
+  row: getEstimatedTotalHeight
+};
+var getOffset = function getOffset(props, index, alignment, scrollOffset, cache, type, scrollBarWidth) {
+  var _ref7 = [type === 'row' ? props.height : props.width, ACCESS_ESTIMATED_SIZE_KEY_MAP[type]],
+    _ref8 = _slicedToArray(_ref7, 2),
+    size = _ref8[0],
+    estimatedSizeAssociates = _ref8[1];
+  var item = getItemFromCache(props, index, cache, type);
+  var estimatedSize = estimatedSizeAssociates(props, cache);
+  var maxOffset = max(0, min(estimatedSize - size, item.offset));
+  var minOffset = max(0, item.offset - size + scrollBarWidth + item.size);
+  var finalAlignment = alignment;
+  if (alignment === SMART_ALIGNMENT) {
+    if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+      finalAlignment = AUTO_ALIGNMENT;
+    } else {
+      finalAlignment = CENTERED_ALIGNMENT;
+    }
+  }
+  switch (finalAlignment) {
+    case START_ALIGNMENT:
+      {
+        return maxOffset;
+      }
+    case END_ALIGNMENT:
+      {
+        return minOffset;
+      }
+    case CENTERED_ALIGNMENT:
+      {
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+      }
+    case AUTO_ALIGNMENT:
+    default:
+      {
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (minOffset > maxOffset) {
+          return minOffset;
+        } else if (scrollOffset < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+      }
+  }
+};
+var DynamicSizeGrid = createGrid({
+  name: 'ElDynamicSizeGrid',
+  getColumnPosition: function getColumnPosition(props, idx, cache) {
+    var item = getItemFromCache(props, idx, cache, 'column');
+    return [item.size, item.offset];
+  },
+  getRowPosition: function getRowPosition(props, idx, cache) {
+    var item = getItemFromCache(props, idx, cache, 'row');
+    return [item.size, item.offset];
+  },
+  getColumnOffset: function getColumnOffset(props, columnIndex, alignment, scrollLeft, cache, scrollBarWidth) {
+    return getOffset(props, columnIndex, alignment, scrollLeft, cache, 'column', scrollBarWidth);
+  },
+  getRowOffset: function getRowOffset(props, rowIndex, alignment, scrollTop, cache, scrollBarWidth) {
+    return getOffset(props, rowIndex, alignment, scrollTop, cache, 'row', scrollBarWidth);
+  },
+  getColumnStartIndexForOffset: function getColumnStartIndexForOffset(props, scrollLeft, cache) {
+    return findItem(props, cache, scrollLeft, 'column');
+  },
+  getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, cache) {
+    var item = getItemFromCache(props, startIndex, cache, 'column');
+    var maxOffset = scrollLeft + props.width;
+    var offset = item.offset + item.size;
+    var stopIndex = startIndex;
+    while (stopIndex < props.totalColumn - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemFromCache(props, startIndex, cache, 'column').size;
+    }
+    return stopIndex;
+  },
+  getEstimatedTotalHeight: getEstimatedTotalHeight,
+  getEstimatedTotalWidth: getEstimatedTotalWidth,
+  getRowStartIndexForOffset: function getRowStartIndexForOffset(props, scrollTop, cache) {
+    return findItem(props, cache, scrollTop, 'row');
+  },
+  getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(props, startIndex, scrollTop, cache) {
+    var totalRow = props.totalRow,
+      height = props.height;
+    var item = getItemFromCache(props, startIndex, cache, 'row');
+    var maxOffset = scrollTop + height;
+    var offset = item.size + item.offset;
+    var stopIndex = startIndex;
+    while (stopIndex < totalRow - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getItemFromCache(props, stopIndex, cache, 'row').size;
+    }
+    return stopIndex;
+  },
+  injectToInstance: function injectToInstance(cache) {
+    // In React, we'll expose these methods via ref
+  },
+  initCache: function initCache(_ref9) {
+    var _ref9$estimatedColumn = _ref9.estimatedColumnWidth,
+      estimatedColumnWidth = _ref9$estimatedColumn === void 0 ? DEFAULT_DYNAMIC_LIST_ITEM_SIZE : _ref9$estimatedColumn,
+      _ref9$estimatedRowHei = _ref9.estimatedRowHeight,
+      estimatedRowHeight = _ref9$estimatedRowHei === void 0 ? DEFAULT_DYNAMIC_LIST_ITEM_SIZE : _ref9$estimatedRowHei;
+    var cache = {
+      column: {},
+      estimatedColumnWidth: estimatedColumnWidth,
+      estimatedRowHeight: estimatedRowHeight,
+      lastVisitedColumnIndex: -1,
+      lastVisitedRowIndex: -1,
+      row: {}
+    };
+    return cache;
+  },
+  clearCache: false,
+  validateProps: function validateProps(_ref10) {
+    var columnWidth = _ref10.columnWidth,
+      rowHeight = _ref10.rowHeight;
+    if (typeof columnWidth !== 'function') {
+      throw new Error("[".concat(SCOPE, "] \"columnWidth\" must be passed as function, instead ").concat(_typeof(columnWidth), " was given."));
+    }
+    if (typeof rowHeight !== 'function') {
+      throw new Error("[".concat(SCOPE, "] \"rowHeight\" must be passed as function, instead ").concat(_typeof(rowHeight), " was given."));
+    }
+  }
+});
+export default DynamicSizeGrid;

package/dist/VirtualList/components/dynamic-size-list.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { VirtualizedListProps } from '../props';
+declare const DynamicSizeList: React.ForwardRefExoticComponent<VirtualizedListProps & {
+    children: (props: any) => React.ReactNode;
+} & React.RefAttributes<import("../types").ListExposes>>;
+export type DynamicSizeListInstance = React.ElementRef<typeof DynamicSizeList> & unknown;
+export default DynamicSizeList;