@infinite-table/infinite-react 0.3.0 → 0.3.1

package/index.d.ts

@@ -507,7 +507,6 @@ declare type InfiniteTablePropColumnPinningRecord = Record<string, true | 'start
 declare type InfiniteTablePropColumnPinning = InfiniteTablePropColumnPinningRecord | InfiniteTablePropColumnPinningMap;
 declare type InfiniteTableRowStyleFnParams<T> = {
     rowIndex: number;
-    groupBy?: (keyof T)[];
 } & InfiniteTableRowInfoDataDiscriminator<T>;
 declare type InfiniteTableRowStyleFn<T> = (params: InfiniteTableRowStyleFnParams<T>) => undefined | React$1.CSSProperties;
 declare type InfiniteTableRowClassNameFn<T> = (params: InfiniteTableRowStyleFnParams<T>) => string | undefined;
@@ -974,7 +973,6 @@ declare type InfiniteTable_RowInfoBase<_T> = {
     id: any;
     value?: any;
     indexInAll: number;
-    indexInGroup: number;
 };
 declare type InfiniteTable_HasGrouping_RowInfoNormal<T> = {
     dataSourceHasGrouping: true;
@@ -1024,7 +1022,7 @@ declare type InfiniteTable_HasGrouping_RowInfoGroup<T> = {
      * For lazy/batched grouping, this is true if the group has been expanded at least once (and if the remote call has been configured with cache: true),
      * since if the remote call is not cached, collapsing the row group should lose all the data that was loaded for it, and it's as if it was never loaded, so in that case, childrenAvailable is false.
      *
-     * NOTE: if this is true, it doesn't mean that (all or some of) the children have been loaded, it only means that at least some children have been requested.
+     * NOTE: if this is true, it doesn't mean that all the children have been loaded, it only means that some children have been loaded and are available
      *
      * Use directChildrenCount and directChildrenLoadedCount to know if all the children have been loaded or not.
      */
@@ -1047,6 +1045,7 @@ declare type InfiniteTable_NoGrouping_RowInfoNormal<T> = {
     selfLoaded: boolean;
 } & InfiniteTable_RowInfoBase<T>;
 declare type InfiniteTable_HasGrouping_RowInfoBase<T> = {
+    indexInGroup: number;
     /**
      * Available on all rowInfo objects when the datasource is grouped, otherwise, it will be undefined.
      *

package/index.esm.js

@@ -4519,6 +4519,8 @@ function InfiniteTableColumnCellFn(props) {
   var _a;
   const {
     rowInfo,
+    rowStyle,
+    rowClassName,
     width,
     column,
     onMouseLeave,
@@ -4555,24 +4557,25 @@ function InfiniteTableColumnCellFn(props) {
   const { componentState: computedDataSource } = useDataSourceContextValue();
   const rest = rowInfo.isGroupRow ? {
     rowInfo,
+    isGroupRow: rowInfo.isGroupRow,
     data: rowInfo.data
   } : {
     rowInfo,
+    isGroupRow: rowInfo.isGroupRow,
     data: rowInfo.data
   };
   const stylingRenderParam = __spreadValues({
     value,
-    column,
-    isGroupRow
+    column
   }, rest);
   const renderValue = value;
   const renderParam = __spreadProps(__spreadValues({
     value,
     column,
     domRef,
-    groupRowInfo,
-    isGroupRow
+    groupRowInfo
   }, rest), {
+    isGroupRow,
     rowIndex,
     toggleGroupRow,
     toggleCurrentGroupRow: () => {
@@ -4597,8 +4600,16 @@ function InfiniteTableColumnCellFn(props) {
     }
     return renderValue;
   };
+  const rowPropsAndStyleArgs = __spreadProps(__spreadValues({}, rest), {
+    rowIndex
+  });
+  const rowComputedClassName = typeof rowClassName === "function" ? rowClassName(rowPropsAndStyleArgs) : rowClassName;
   const colClassName = column.className ? typeof column.className === "function" ? column.className(stylingRenderParam) : column.className : void 0;
-  const style = column.style ? typeof column.style === "function" ? column.style(stylingRenderParam) || {} : __spreadValues({}, column.style) : {};
+  let style;
+  if (rowStyle) {
+    style = typeof rowStyle === "function" ? __spreadValues(__spreadValues({}, style), rowStyle(rowPropsAndStyleArgs)) : __spreadValues(__spreadValues({}, style), rowStyle);
+  }
+  style = column.style ? typeof column.style === "function" ? __spreadValues(__spreadValues({}, style), column.style(stylingRenderParam) || {}) : __spreadValues(__spreadValues({}, style), column.style) : style || {};
   style.width = width;
   style.height = rowHeight;
   const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
@@ -4614,7 +4625,7 @@ function InfiniteTableColumnCellFn(props) {
     onMouseLeave,
     onMouseEnter,
     cssEllipsis: (_a = column.cssEllipsis) != null ? _a : true,
-    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra }), colClassName),
+    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra }), colClassName, rowComputedClassName),
     renderChildren
   };
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
@@ -4851,6 +4862,8 @@ function useCellRendering(param) {
     groupRenderStrategy,
     brain,
     showZebraRows,
+    rowStyle,
+    rowClassName,
     onScrollToTop,
     onScrollToBottom,
     scrollToBottomOffset
@@ -4945,7 +4958,9 @@ function useCellRendering(param) {
       onMouseLeave,
       domRef,
       width,
-      column
+      column,
+      rowStyle,
+      rowClassName
     };
     return /* @__PURE__ */ React22.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
   }, [
@@ -4955,7 +4970,9 @@ function useCellRendering(param) {
     groupRenderStrategy,
     toggleGroupRow,
     showZebraRows,
-    repaintId
+    repaintId,
+    rowStyle,
+    rowClassName
   ]);
   return {
     renderCell
@@ -6355,7 +6372,7 @@ function lazyLoadRange(options, cache) {
       theGroupKeys.pop();
     }
     const cacheKeys = theGroupKeys.length ? theGroupKeys : rootGroupKeys;
-    const indexInGroup = rowInfo.indexInGroup;
+    const indexInGroup = rowInfo.isGroupRow ? rowInfo.indexInGroup : rowInfo.indexInAll;
     if (rowInfo.isGroupRow && !rowInfo.collapsed && !rowInfo.childrenAvailable) {
       const currentFnCall = {
         lazyLoadStartIndex: 0,
@@ -6378,7 +6395,7 @@ function lazyLoadRange(options, cache) {
     if (!rowLoaded) {
       let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
       const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
-      const offset = rowInfo.indexInGroup - batchStartIndexInGroup;
+      const offset = (rowInfo.isGroupRow ? rowInfo.indexInGroup : rowInfo.indexInAll) - batchStartIndexInGroup;
       const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
       const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
       const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
@@ -6978,7 +6995,6 @@ function toRowInfo(data, id, index) {
     data,
     id,
     indexInAll: index,
-    indexInGroup: index,
     isGroupRow: false,
     selfLoaded: true
   };
@@ -8516,7 +8532,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo10(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.0"
+      version: "0.3.1"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.js

@@ -4460,6 +4460,8 @@ function InfiniteTableColumnCellFn(props) {
   var _a;
   const {
     rowInfo,
+    rowStyle,
+    rowClassName,
     width,
     column,
     onMouseLeave,
@@ -4496,24 +4498,25 @@ function InfiniteTableColumnCellFn(props) {
   const { componentState: computedDataSource } = useDataSourceContextValue();
   const rest = rowInfo.isGroupRow ? {
     rowInfo,
+    isGroupRow: rowInfo.isGroupRow,
     data: rowInfo.data
   } : {
     rowInfo,
+    isGroupRow: rowInfo.isGroupRow,
     data: rowInfo.data
   };
   const stylingRenderParam = __spreadValues({
     value,
-    column,
-    isGroupRow
+    column
   }, rest);
   const renderValue = value;
   const renderParam = __spreadProps(__spreadValues({
     value,
     column,
     domRef,
-    groupRowInfo,
-    isGroupRow
+    groupRowInfo
   }, rest), {
+    isGroupRow,
     rowIndex,
     toggleGroupRow,
     toggleCurrentGroupRow: () => {
@@ -4538,8 +4541,16 @@ function InfiniteTableColumnCellFn(props) {
     }
     return renderValue;
   };
+  const rowPropsAndStyleArgs = __spreadProps(__spreadValues({}, rest), {
+    rowIndex
+  });
+  const rowComputedClassName = typeof rowClassName === "function" ? rowClassName(rowPropsAndStyleArgs) : rowClassName;
   const colClassName = column.className ? typeof column.className === "function" ? column.className(stylingRenderParam) : column.className : void 0;
-  const style = column.style ? typeof column.style === "function" ? column.style(stylingRenderParam) || {} : __spreadValues({}, column.style) : {};
+  let style;
+  if (rowStyle) {
+    style = typeof rowStyle === "function" ? __spreadValues(__spreadValues({}, style), rowStyle(rowPropsAndStyleArgs)) : __spreadValues(__spreadValues({}, style), rowStyle);
+  }
+  style = column.style ? typeof column.style === "function" ? __spreadValues(__spreadValues({}, style), column.style(stylingRenderParam) || {}) : __spreadValues(__spreadValues({}, style), column.style) : style || {};
   style.width = width;
   style.height = rowHeight;
   const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
@@ -4555,7 +4566,7 @@ function InfiniteTableColumnCellFn(props) {
     onMouseLeave,
     onMouseEnter,
     cssEllipsis: (_a = column.cssEllipsis) != null ? _a : true,
-    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra }), colClassName),
+    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra }), colClassName, rowComputedClassName),
     renderChildren
   };
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
@@ -4785,6 +4796,8 @@ function useCellRendering(param) {
     groupRenderStrategy,
     brain,
     showZebraRows,
+    rowStyle,
+    rowClassName,
     onScrollToTop,
     onScrollToBottom,
     scrollToBottomOffset
@@ -4879,7 +4892,9 @@ function useCellRendering(param) {
       onMouseLeave,
       domRef,
       width,
-      column
+      column,
+      rowStyle,
+      rowClassName
     };
     return /* @__PURE__ */ import_react24.default.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
   }, [
@@ -4889,7 +4904,9 @@ function useCellRendering(param) {
     groupRenderStrategy,
     toggleGroupRow,
     showZebraRows,
-    repaintId
+    repaintId,
+    rowStyle,
+    rowClassName
   ]);
   return {
     renderCell
@@ -6279,7 +6296,7 @@ function lazyLoadRange(options, cache) {
       theGroupKeys.pop();
     }
     const cacheKeys = theGroupKeys.length ? theGroupKeys : rootGroupKeys;
-    const indexInGroup = rowInfo.indexInGroup;
+    const indexInGroup = rowInfo.isGroupRow ? rowInfo.indexInGroup : rowInfo.indexInAll;
     if (rowInfo.isGroupRow && !rowInfo.collapsed && !rowInfo.childrenAvailable) {
       const currentFnCall = {
         lazyLoadStartIndex: 0,
@@ -6302,7 +6319,7 @@ function lazyLoadRange(options, cache) {
     if (!rowLoaded) {
       let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
       const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
-      const offset = rowInfo.indexInGroup - batchStartIndexInGroup;
+      const offset = (rowInfo.isGroupRow ? rowInfo.indexInGroup : rowInfo.indexInAll) - batchStartIndexInGroup;
       const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
       const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
       const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
@@ -6902,7 +6919,6 @@ function toRowInfo(data, id, index) {
     data,
     id,
     indexInAll: index,
-    indexInGroup: index,
     isGroupRow: false,
     selfLoaded: true
   };
@@ -8440,7 +8456,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react39.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.0"
+      version: "0.3.1"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "main": "index.js",
   "module": "index.esm.js",
   "typings": "index.d.ts",
@@ -14,5 +14,5 @@
   },
   "license": "Commercial & Open Source",
   "//": "will be updated at build time",
-  "publishedAt": 1651570757283
+  "publishedAt": 1651578366058
 }