@cloud-app-dev/vidc 3.2.10 → 3.2.13

package/es/List/DynamicList/index.js

@@ -1,85 +1,105 @@
 import "antd/lib/skeleton/style";
 import _Skeleton from "antd/lib/skeleton";
 import _useUpdateEffect from "ahooks/es/useUpdateEffect";
+
 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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 import React, { useMemo, useRef } from 'react';
-import useVirtualList from '../../useVirtualList';
-import { LIMIT, skeletonList } from './utils';
-import useInfiniteScroll from '../../useInfiniteScroll';
-import "./index.css";
+import useVirtualList from "../../useVirtualList";
+import { LIMIT, skeletonList } from "./utils";
+import useInfiniteScroll from "../../useInfiniteScroll";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
 function DynamicList(_ref) {
   var renderItem = _ref.renderItem,
-    itemHeight = _ref.itemHeight,
-    itemClassName = _ref.itemClassName,
-    reloadDeps = _ref.reloadDeps,
-    loadPage = _ref.loadPage;
+      itemHeight = _ref.itemHeight,
+      itemClassName = _ref.itemClassName,
+      reloadDeps = _ref.reloadDeps,
+      loadPage = _ref.loadPage;
   var containerRef = useRef();
   var wrapperRef = useRef();
+
   var _useInfiniteScroll = useInfiniteScroll(loadPage, {
-      target: containerRef,
-      threshold: 50,
-      isNoMore: function isNoMore(d) {
-        var _a;
-        return ((_a = d === null || d === void 0 ? void 0 : d.list) === null || _a === void 0 ? void 0 : _a.length) >= (d === null || d === void 0 ? void 0 : d.count);
-      },
-      reloadDeps: reloadDeps
-    }),
-    data = _useInfiniteScroll.data,
-    loading = _useInfiniteScroll.loading,
-    noMore = _useInfiniteScroll.noMore;
+    target: containerRef,
+    threshold: 50,
+    isNoMore: function isNoMore(d) {
+      var _d$list;
+
+      return (d === null || d === void 0 ? void 0 : (_d$list = d.list) === null || _d$list === void 0 ? void 0 : _d$list.length) >= (d === null || d === void 0 ? void 0 : d.count);
+    },
+    reloadDeps: reloadDeps
+  }),
+      data = _useInfiniteScroll.data,
+      loading = _useInfiniteScroll.loading,
+      noMore = _useInfiniteScroll.noMore;
+
   var isSkeleton = useMemo(function () {
     return !noMore && loading;
   }, [noMore, loading]);
   var dataList = useMemo(function () {
     return data ? data.list || [] : [];
   }, [data]);
+
   var _useVirtualList = useVirtualList(dataList, {
-      containerTarget: containerRef,
-      wrapperTarget: wrapperRef,
-      itemHeight: itemHeight,
-      overscan: 10
-    }),
-    _useVirtualList2 = _slicedToArray(_useVirtualList, 2),
-    list = _useVirtualList2[0],
-    scrollTo = _useVirtualList2[1];
+    containerTarget: containerRef,
+    wrapperTarget: wrapperRef,
+    itemHeight: itemHeight,
+    overscan: 10
+  }),
+      _useVirtualList2 = _slicedToArray(_useVirtualList, 2),
+      list = _useVirtualList2[0],
+      scrollTo = _useVirtualList2[1];
+
   _useUpdateEffect(function () {
     return scrollTo(0);
   }, reloadDeps ? reloadDeps : []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "l-c-dynamic-list-layout"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "l-c-dynamic-box",
-    ref: containerRef
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: wrapperRef
-  }, list.map(function (item) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: item.index,
-      style: {
-        height: itemHeight
-      },
-      className: itemClassName
-    }, renderItem(item));
-  })), isSkeleton && skeletonList.map(function (_, index) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: index,
-      style: {
-        padding: '0 10px',
-        height: itemHeight
-      },
-      className: itemClassName
-    }, /*#__PURE__*/React.createElement(_Skeleton, {
-      paragraph: false,
-      loading: true,
-      active: true
-    }));
-  })));
+
+  return /*#__PURE__*/_jsx("div", {
+    className: "l-c-dynamic-list-layout",
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "l-c-dynamic-box",
+      ref: containerRef,
+      children: [/*#__PURE__*/_jsx("div", {
+        ref: wrapperRef,
+        children: list.map(function (item) {
+          return /*#__PURE__*/_jsx("div", {
+            style: {
+              height: itemHeight
+            },
+            className: itemClassName,
+            children: renderItem(item)
+          }, item.index);
+        })
+      }), isSkeleton && skeletonList.map(function (_, index) {
+        return /*#__PURE__*/_jsx("div", {
+          style: {
+            padding: '0 10px',
+            height: itemHeight
+          },
+          className: itemClassName,
+          children: /*#__PURE__*/_jsx(_Skeleton, {
+            paragraph: false,
+            loading: true,
+            active: true
+          })
+        }, index);
+      })]
+    })
+  });
 }
+
 DynamicList.defaultProps = {
   limit: LIMIT,
   itemHeight: 40,

package/es/List/DynamicList/index.less

@@ -0,0 +1,15 @@
+.l-c-dynamic-list-layout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--gray2);
+  .dynamic-list-item {
+    padding: 0 10px;
+  }
+  .l-c-dynamic-box {
+    flex: 1;
+    overflow: auto;
+    contain: strict;
+  }
+}

package/es/List/GridList/Demo.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const App: () => JSX.Element;
 export default App;

package/es/List/GridList/Demo.js

@@ -1,13 +1,22 @@
 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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 import React, { useEffect, useState } from 'react';
-import GridList from './index';
-import data from './data.json';
+import GridList from "./index";
+import data from "./data.json";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var ITEM_WIDTH = 300;
+
 function getGridGap(elementWidth, windowHeight) {
   if (elementWidth > 720 && windowHeight > 480) {
     return 20;
@@ -15,12 +24,15 @@ function getGridGap(elementWidth, windowHeight) {
     return 10;
   }
 }
+
 function getColumnCount(elementWidth, gridGap) {
   return Math.floor((elementWidth + gridGap) / (ITEM_WIDTH + gridGap));
 }
+
 function getWindowMargin(windowHeight) {
   return Math.round(windowHeight * 1.5);
 }
+
 function getItemData(image, columnWidth) {
   return {
     key: image.index,
@@ -29,51 +41,61 @@ function getItemData(image, columnWidth) {
     url: image.url
   };
 }
+
 var App = function App() {
   var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    list = _useState2[0],
-    setlist = _useState2[1];
+      _useState2 = _slicedToArray(_useState, 2),
+      list = _useState2[0],
+      setlist = _useState2[1];
+
   useEffect(function () {
     setTimeout(function () {
       return setlist(data.data.list);
     }, 2000);
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     style: {
       height: 800,
       overflow: 'auto'
-    }
-  }, /*#__PURE__*/React.createElement(GridList, {
-    items: list,
-    getGridGap: getGridGap,
-    getColumnCount: getColumnCount,
-    getWindowMargin: getWindowMargin,
-    getItemData: getItemData,
-    renderItem: function renderItem(image, cell) {
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          border: '1px solid gray',
-          height: '100%',
-          display: 'flex',
-          flexDirection: 'column'
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          flex: 1,
-          overflow: 'hidden'
-        }
-      }, /*#__PURE__*/React.createElement("img", {
-        src: image.url,
-        alt: "",
-        style: {
-          objectFit: 'cover',
-          display: 'block',
-          width: '100%',
-          height: '100%'
-        }
-      })), /*#__PURE__*/React.createElement("p", null, image.deviceName), /*#__PURE__*/React.createElement("p", null, "\u63CF\u8FF0"));
-    }
-  }));
+    },
+    children: /*#__PURE__*/_jsx(GridList, {
+      items: list,
+      getGridGap: getGridGap,
+      getColumnCount: getColumnCount,
+      getWindowMargin: getWindowMargin,
+      getItemData: getItemData,
+      renderItem: function renderItem(image, cell) {
+        return /*#__PURE__*/_jsxs("div", {
+          style: {
+            border: '1px solid gray',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column'
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            style: {
+              flex: 1,
+              overflow: 'hidden'
+            },
+            children: /*#__PURE__*/_jsx("img", {
+              src: image.url,
+              alt: "",
+              style: {
+                objectFit: 'cover',
+                display: 'block',
+                width: '100%',
+                height: '100%'
+              }
+            })
+          }), /*#__PURE__*/_jsx("p", {
+            children: image.deviceName
+          }), /*#__PURE__*/_jsx("p", {
+            children: "\u63CF\u8FF0"
+          })]
+        });
+      }
+    })
+  });
 };
+
 export default App;

package/es/List/GridList/hook.d.ts

@@ -5,7 +5,7 @@ export declare function useConstRef<T>(value: T): ConstRef<T>;
 export declare function useWindowSize(): ElementSize;
 export declare function useElementSize(ref: RefObject<Element>): ElementSize | null;
 export declare function useWindowScroll(): ElementScroll;
-export declare function useElementWindowOffset(ref: RefObject<HTMLElement>): number;
+export declare function useElementWindowOffset(ref: RefObject<HTMLElement>): number | null;
 export declare function useIntersecting(ref: RefObject<HTMLElement>, rootMargin: string): boolean;
 export declare function useGridListContainerData(ref: RefObject<HTMLElement>): GridListContainerData;
 export declare function useGridListConfigData<P>(containerData: GridListContainerData, props: GridListProps<P>): GridListConfigData<P> | null;

package/es/List/GridList/hook.js

@@ -1,13 +1,21 @@
 import _useScroll from "ahooks/es/useScroll";
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
 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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { getColumnWidth, getElementOffset, getElementSize, getWindowScroll, getWindowSize, isSameElementScroll, isSameElementSize } from './utils';
+import { getColumnWidth, getElementOffset, getElementSize, getWindowScroll, getWindowSize, isSameElementScroll, isSameElementSize } from "./utils";
 export function useConstRef(value) {
   var ref = useRef(value);
   ref.current = value;
@@ -15,19 +23,22 @@ export function useConstRef(value) {
 }
 export function useWindowSize() {
   var _useState = useState(function () {
-      return getWindowSize();
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    windowSize = _useState2[0],
-    setWindowSize = _useState2[1];
+    return getWindowSize();
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      windowSize = _useState2[0],
+      setWindowSize = _useState2[1];
+
   var windowSizeRef = useConstRef(windowSize);
   useEffect(function () {
     function onResize() {
       var nextWindowSize = getWindowSize();
+
       if (!isSameElementSize(windowSizeRef.current, nextWindowSize)) {
         setWindowSize(nextWindowSize);
       }
     }
+
     window.addEventListener('resize', onResize);
     return function () {
       return window.removeEventListener('resize', onResize);
@@ -37,19 +48,21 @@ export function useWindowSize() {
 }
 export function useElementSize(ref) {
   var _useState3 = useState(function () {
-      if (ref.current) {
-        return getElementSize(ref.current);
-      } else {
-        return null;
-      }
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    elementSize = _useState4[0],
-    setElementSize = _useState4[1];
+    if (ref.current) {
+      return getElementSize(ref.current);
+    } else {
+      return null;
+    }
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      elementSize = _useState4[0],
+      setElementSize = _useState4[1];
+
   var elementSizeRef = useConstRef(elementSize);
   useEffect(function () {
     var observer = new ResizeObserver(function (entries) {
       var nextElementSize = getElementSize(entries[0].target);
+
       if (elementSizeRef.current === null || !isSameElementSize(elementSizeRef.current, nextElementSize)) {
         setElementSize(nextElementSize);
       }
@@ -63,17 +76,20 @@ export function useElementSize(ref) {
 }
 export function useWindowScroll() {
   var _useState5 = useState(getWindowScroll()),
-    _useState6 = _slicedToArray(_useState5, 2),
-    scrollPosition = _useState6[0],
-    setScrollPosition = _useState6[1];
+      _useState6 = _slicedToArray(_useState5, 2),
+      scrollPosition = _useState6[0],
+      setScrollPosition = _useState6[1];
+
   var ref = useConstRef(scrollPosition);
   useEffect(function () {
     function update() {
       var nextScrollPosition = getWindowScroll();
+
       if (!isSameElementScroll(ref.current, nextScrollPosition)) {
         setScrollPosition(nextScrollPosition);
       }
     }
+
     window.addEventListener('scroll', update);
     window.addEventListener('resize', update);
     return function () {
@@ -85,15 +101,16 @@ export function useWindowScroll() {
 }
 export function useElementWindowOffset(ref) {
   var _useState7 = useState(function () {
-      if (ref.current) {
-        return getElementOffset(ref.current);
-      } else {
-        return null;
-      }
-    }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    elementOffset = _useState8[0],
-    setElementOffset = _useState8[1];
+    if (ref.current) {
+      return getElementOffset(ref.current);
+    } else {
+      return null;
+    }
+  }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      elementOffset = _useState8[0],
+      setElementOffset = _useState8[1];
+
   useEffect(function () {
     var observer = new ResizeObserver(function (entries) {
       setElementOffset(getElementOffset(entries[0].target));
@@ -107,9 +124,10 @@ export function useElementWindowOffset(ref) {
 }
 export function useIntersecting(ref, rootMargin) {
   var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    intersecting = _useState10[0],
-    setIntersecting = _useState10[1];
+      _useState10 = _slicedToArray(_useState9, 2),
+      intersecting = _useState10[0],
+      setIntersecting = _useState10[1];
+
   useEffect(function () {
     var observer = new IntersectionObserver(function (entries) {
       setIntersecting(entries[0].isIntersecting);
@@ -125,7 +143,9 @@ export function useIntersecting(ref, rootMargin) {
 }
 export function useGridListContainerData(ref) {
   var windowSize = useWindowSize();
+
   var windowScroll = _useScroll(ref);
+
   var elementWindowOffset = useElementWindowOffset(ref);
   var elementSize = useElementSize(ref);
   return useMemo(function () {
@@ -142,10 +162,10 @@ export function useGridListContainerData(ref) {
 }
 export function useGridListConfigData(containerData, props) {
   var items = props.items,
-    getWindowMargin = props.getWindowMargin,
-    getGridGap = props.getGridGap,
-    getColumnCount = props.getColumnCount,
-    getItemData = props.getItemData;
+      getWindowMargin = props.getWindowMargin,
+      getGridGap = props.getGridGap,
+      getColumnCount = props.getColumnCount,
+      getItemData = props.getItemData;
   var elementWidth = containerData.elementSize ? containerData.elementSize.width : null;
   var windowMargin = useMemo(function () {
     if (getWindowMargin) {
@@ -156,6 +176,7 @@ export function useGridListConfigData(containerData, props) {
   }, [containerData.windowSize.height, getWindowMargin]);
   var gridGap = useMemo(function () {
     if (elementWidth === null) return null;
+
     if (getGridGap) {
       return getGridGap(elementWidth, containerData.windowSize.height);
     } else {
@@ -182,6 +203,7 @@ export function useGridListConfigData(containerData, props) {
     if (windowMargin === null || gridGap === null || columnCount === null || entries === null) {
       return null;
     }
+
     return {
       windowMargin: windowMargin,
       gridGap: gridGap,
@@ -200,11 +222,13 @@ export function useGridListLayoutData(configData) {
       var key = entry.data.key;
       var columnNumber = index % configData.columnCount + 1;
       var rowNumber = Math.floor(index / configData.columnCount) + 1;
+
       if (rowNumber !== currentRowNumber) {
         currentRowNumber = rowNumber;
         prevRowsTotalHeight += currentRowMaxHeight + configData.gridGap;
         currentRowMaxHeight = 0;
       }
+
       var offset = prevRowsTotalHeight;
       var height = Math.round(entry.data.height);
       var width = Math.round(entry.data.width);
@@ -232,10 +256,13 @@ export function useGridListRenderData(containerData, configData, layoutData) {
     var cellsToRender = [];
     var firstRenderedRowNumber = null;
     var firstRenderedRowOffset = null;
+
     if (containerData.elementWindowOffset !== null) {
       var elementWindowOffset = containerData.elementWindowOffset;
+
       var _iterator = _createForOfIteratorHelper(layoutData.cells),
-        _step;
+          _step;
+
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var cell = _step.value;
@@ -247,12 +274,15 @@ export function useGridListRenderData(containerData, configData, layoutData) {
           var renderBottom = windowBottom + configData.windowMargin;
           if (cellTop > renderBottom) continue;
           if (cellBottom < renderTop) continue;
+
           if (firstRenderedRowNumber === null) {
             firstRenderedRowNumber = cell.rowNumber;
           }
+
           if (cell.rowNumber === firstRenderedRowNumber) {
             firstRenderedRowOffset = firstRenderedRowOffset ? Math.min(firstRenderedRowOffset, cell.offset) : cell.offset;
           }
+
           cellsToRender.push(cell);
         }
       } catch (err) {
@@ -261,6 +291,7 @@ export function useGridListRenderData(containerData, configData, layoutData) {
         _iterator.f();
       }
     }
+
     return {
       cellsToRender: cellsToRender,
       firstRenderedRowNumber: firstRenderedRowNumber,

package/es/List/GridList/index.js

@@ -1,7 +1,8 @@
 import React, { useRef } from 'react';
-import { useGridListConfigData, useGridListContainerData, useGridListLayoutData, useGridListRenderData, useIntersecting } from './hook';
-import { getGridRowStart } from './utils';
-import "./index.css";
+import { useGridListConfigData, useGridListContainerData, useGridListLayoutData, useGridListRenderData, useIntersecting } from "./hook";
+import { getGridRowStart } from "./utils";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
 var GridList = /*#__PURE__*/React.forwardRef(function GridList(props, ref) {
   var containerRef = useRef(null);
   var domRef = ref !== null && ref !== void 0 ? ref : containerRef;
@@ -11,33 +12,36 @@ var GridList = /*#__PURE__*/React.forwardRef(function GridList(props, ref) {
   var renderData = useGridListRenderData(containerData, configData, layoutData);
   var intersecting = useIntersecting(domRef, "".concat(configData !== null ? configData.windowMargin : 0, "px"));
   var colWidth = props.fixedColumnWidth ? "".concat(props.fixedColumnWidth, "px") : '1fr';
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     ref: domRef,
-    className: "cloudapp-grid-list ".concat(props.className || '')
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      boxSizing: 'border-box',
-      height: layoutData !== null ? layoutData.totalHeight : undefined,
-      paddingTop: renderData !== null && renderData.firstRenderedRowOffset !== null ? renderData.firstRenderedRowOffset : 0
-    }
-  }, intersecting && /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'grid',
-      gridTemplateColumns: configData !== null ? "repeat(".concat(configData.columnCount, ", ").concat(colWidth, ")") : undefined,
-      gridGap: configData ? configData.gridGap : undefined,
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, renderData !== null && renderData.cellsToRender.map(function (cell) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: cell.key,
+    className: "cloudapp-grid-list ".concat(props.className || ''),
+    children: /*#__PURE__*/_jsx("div", {
       style: {
-        height: cell.height,
-        maxWidth: cell.width,
-        gridColumnStart: "".concat(cell.columnNumber),
-        gridRowStart: getGridRowStart(cell, renderData)
-      }
-    }, props.renderItem(cell.item, cell));
-  }))));
+        boxSizing: 'border-box',
+        height: layoutData !== null ? layoutData.totalHeight : undefined,
+        paddingTop: renderData !== null && renderData.firstRenderedRowOffset !== null ? renderData.firstRenderedRowOffset : 0
+      },
+      children: intersecting && /*#__PURE__*/_jsx("div", {
+        style: {
+          display: 'grid',
+          gridTemplateColumns: configData !== null ? "repeat(".concat(configData.columnCount, ", ").concat(colWidth, ")") : undefined,
+          gridGap: configData ? configData.gridGap : undefined,
+          justifyContent: 'center',
+          alignItems: 'center'
+        },
+        children: renderData !== null && renderData.cellsToRender.map(function (cell) {
+          return /*#__PURE__*/_jsx("div", {
+            style: {
+              height: cell.height,
+              maxWidth: cell.width,
+              gridColumnStart: "".concat(cell.columnNumber),
+              gridRowStart: getGridRowStart(cell, renderData)
+            },
+            children: props.renderItem(cell.item, cell)
+          }, cell.key);
+        })
+      })
+    })
+  });
 });
 export default GridList;

package/es/List/GridList/utils.d.ts

@@ -5,5 +5,5 @@ export declare function getElementSize(element: Element): ElementSize;
 export declare function isSameElementScroll(a: ElementScroll, b: ElementScroll): boolean;
 export declare function getWindowScroll(): ElementScroll;
 export declare function getElementOffset(element: Element): number;
-export declare function getColumnWidth(columnCount: number | null, gridGap: number | null, elementWidth: number | null): number;
-export declare function getGridRowStart<P>(cell: GridListCell<P>, renderData: GridListRenderData<P> | null): string;
+export declare function getColumnWidth(columnCount: number | null, gridGap: number | null, elementWidth: number | null): number | null;
+export declare function getGridRowStart<P>(cell: GridListCell<P>, renderData: GridListRenderData<P> | null): string | undefined;