@oliasoft-open-source/react-ui-library 5.0.7 → 5.0.8-beta-1

package/dist/index.d.ts

@@ -1357,6 +1357,10 @@ export declare interface ITableProps {
         to: number;
     }) => boolean;
     table: ITableTableProps;
+    beforeRenderRow?: ({ row, rowIndex, }: {
+        row: TRowType;
+        rowIndex: number;
+    }) => TRowType;
 }
 
 declare interface ITableTableProps {

package/dist/index.js

@@ -169508,6 +169508,7 @@ const Table = (props) => {
     onListReorder = () => {
     },
     canListReorder = () => true,
+    beforeRenderRow = null,
     table: propTable
   } = props;
   const {
@@ -169627,36 +169628,44 @@ const Table = (props) => {
                   `0_${rowIndex}`
                 );
               }) }),
-              /* @__PURE__ */ jsx("tbody", { ref: tbodyRef, children: virtualizer ? virtualizer.getVirtualItems().map((virtualRow2) => /* @__PURE__ */ jsx(
-                Row,
-                {
-                  rowIndex: virtualRow2.index,
-                  row: rows[virtualRow2.index],
-                  columnCount,
-                  columnWidths,
-                  colSpan,
-                  hasRowActions: rowActions,
-                  columnAlignment,
-                  draggableTable: draggable,
-                  height: virtualRow2.size,
-                  dropDisabled
-                },
-                `1_${virtualRow2.index}`
-              )) : rows.map((row2, index2) => /* @__PURE__ */ jsx(
-                Row,
-                {
-                  rowIndex: index2,
-                  row: row2,
-                  columnCount,
-                  columnWidths,
-                  colSpan,
-                  hasRowActions: rowActions,
-                  columnAlignment,
-                  draggableTable: draggable,
-                  dropDisabled
-                },
-                `1_${index2}`
-              )) })
+              /* @__PURE__ */ jsx("tbody", { ref: tbodyRef, children: virtualizer ? virtualizer.getVirtualItems().map((virtualRow2) => {
+                const rowIndex = virtualRow2.index;
+                const row2 = rows[rowIndex];
+                const preparedRow = beforeRenderRow ? beforeRenderRow({ row: row2, rowIndex }) : row2;
+                return /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    rowIndex,
+                    row: preparedRow,
+                    columnCount,
+                    columnWidths,
+                    colSpan,
+                    hasRowActions: rowActions,
+                    columnAlignment,
+                    draggableTable: draggable,
+                    height: virtualRow2.size,
+                    dropDisabled
+                  },
+                  `1_${rowIndex}`
+                );
+              }) : rows.map((row2, index2) => {
+                const preparedRow = beforeRenderRow ? beforeRenderRow({ row: row2, rowIndex: index2 }) : row2;
+                return /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    rowIndex: index2,
+                    row: preparedRow,
+                    columnCount,
+                    columnWidths,
+                    colSpan,
+                    hasRowActions: rowActions,
+                    columnAlignment,
+                    draggableTable: draggable,
+                    dropDisabled
+                  },
+                  `1_${index2}`
+                );
+              }) })
             ]
           }
         ) })
@@ -183882,17 +183891,77 @@ const normalizeUnits = (unitConfig) => unitConfig.reduce(
   },
   { preferredUnits: {}, storageUnits: {} }
 );
-const convertVisibleRows = ({
-  headers,
-  rows,
+const convertRow = ({
+  row: row2,
+  rowIndex,
   selectedUnits,
   storageUnits,
-  onChangeUnit,
   convertBackToStorageUnit,
   enableCosmeticRounding,
   enableDisplayRounding
+}) => ({
+  ...row2,
+  cells: row2.cells.map((cell2, cellIndex) => {
+    if ("autoUnit" in cell2 && (cell2 == null ? void 0 : cell2.autoUnit) && (typeof (cell2 == null ? void 0 : cell2.value) === "string" || typeof (cell2 == null ? void 0 : cell2.value) === "number")) {
+      const { unitKey, value, formatDisplayValue } = cell2;
+      const roundDisplayValue = enableDisplayRounding && "roundDisplayValue" in cell2 ? cell2 == null ? void 0 : cell2.roundDisplayValue : null;
+      const selectedUnit = selectedUnits[unitKey];
+      const storageUnit = storageUnits[unitKey];
+      const unitChanged = selectedUnit !== storageUnit;
+      const { value: resultValue = value } = convertUnit({
+        value: safeToString(value),
+        unitkey: unitKey,
+        toUnit: selectedUnit,
+        fromUnit: storageUnit
+      });
+      const convertedValue = unitChanged ? resultValue : cell2.value;
+      const formattedDisplayValue = formatDisplayValue ? formatDisplayValue(convertedValue, selectedUnit) : convertedValue;
+      return {
+        ...cell2,
+        value: formattedDisplayValue,
+        enableCosmeticRounding,
+        enableDisplayRounding,
+        roundDisplayValue,
+        selectOnFocus: true,
+        onChange: (evt) => {
+          const { value: value2 } = evt.target;
+          const storageUnit2 = storageUnits[unitKey];
+          const selectedUnit2 = selectedUnits[unitKey];
+          const unitChanged2 = selectedUnit2 !== storageUnit2;
+          const nextUnit = convertBackToStorageUnit ? storageUnit2 : selectedUnit2;
+          const { value: resultValue2 = value2 } = convertUnit({
+            value: String(value2),
+            unitkey: unitKey,
+            toUnit: nextUnit,
+            fromUnit: selectedUnit2
+          });
+          const nextValueConverted = unitChanged2 ? resultValue2 : value2;
+          if ("onChange" in cell2) {
+            const { onChange } = cell2;
+            const event = {
+              ...evt,
+              target: {
+                ...evt.target,
+                value: String(nextValueConverted),
+                rowIndex,
+                cellIndex,
+                unit: nextUnit
+              }
+            };
+            onChange(event);
+          }
+        }
+      };
+    }
+    return cell2;
+  })
+});
+const convertHeaderRows = ({
+  headers,
+  selectedUnits,
+  onChangeUnit
 }) => {
-  const convertedHeaders = headers ? headers.map((headerRow) => ({
+  return headers ? headers.map((headerRow) => ({
     ...headerRow,
     cells: headerRow.cells.map((headerCell) => {
       var _a2;
@@ -183915,64 +183984,6 @@ const convertVisibleRows = ({
       return headerCell;
     })
   })) : [];
-  const convertedRows = rows ? rows.map((row2, rowIndex) => ({
-    ...row2,
-    cells: row2.cells.map((cell2, cellIndex) => {
-      if ("autoUnit" in cell2 && (cell2 == null ? void 0 : cell2.autoUnit) && (typeof (cell2 == null ? void 0 : cell2.value) === "string" || typeof (cell2 == null ? void 0 : cell2.value) === "number")) {
-        const { unitKey, value, formatDisplayValue } = cell2;
-        const roundDisplayValue = enableDisplayRounding && "roundDisplayValue" in cell2 ? cell2 == null ? void 0 : cell2.roundDisplayValue : null;
-        const selectedUnit = selectedUnits[unitKey];
-        const storageUnit = storageUnits[unitKey];
-        const unitChanged = selectedUnit !== storageUnit;
-        const { value: resultValue = value } = convertUnit({
-          value: safeToString(value),
-          unitkey: unitKey,
-          toUnit: selectedUnit,
-          fromUnit: storageUnit
-        });
-        const convertedValue = unitChanged ? resultValue : cell2.value;
-        const formattedDisplayValue = formatDisplayValue ? formatDisplayValue(convertedValue, selectedUnit) : convertedValue;
-        return {
-          ...cell2,
-          value: formattedDisplayValue,
-          enableCosmeticRounding,
-          enableDisplayRounding,
-          roundDisplayValue,
-          selectOnFocus: true,
-          onChange: (evt) => {
-            const { value: value2 } = evt.target;
-            const storageUnit2 = storageUnits[unitKey];
-            const selectedUnit2 = selectedUnits[unitKey];
-            const unitChanged2 = selectedUnit2 !== storageUnit2;
-            const nextUnit = convertBackToStorageUnit ? storageUnit2 : selectedUnit2;
-            const { value: resultValue2 = value2 } = convertUnit({
-              value: String(value2),
-              unitkey: unitKey,
-              toUnit: nextUnit,
-              fromUnit: selectedUnit2
-            });
-            const nextValueConverted = unitChanged2 ? resultValue2 : value2;
-            if ("onChange" in cell2) {
-              const { onChange } = cell2;
-              const event = {
-                ...evt,
-                target: {
-                  ...evt.target,
-                  value: String(nextValueConverted),
-                  rowIndex,
-                  cellIndex,
-                  unit: nextUnit
-                }
-              };
-              onChange(event);
-            }
-          }
-        };
-      }
-      return cell2;
-    })
-  })) : [];
-  return { convertedHeaders, convertedRows };
 };
 const UnitTable = ({
   table: table2,
@@ -183983,7 +183994,7 @@ const UnitTable = ({
   onListReorder,
   canListReorder
 }) => {
-  const { rows, headers, ...otherProps } = table2;
+  const { headers, ...otherProps } = table2;
   const { storageUnits, preferredUnits } = normalizeUnits(unitConfig);
   const previousPreferredUnits = usePrevious(preferredUnits);
   const [selectedUnits, setSelectedUnits] = useState(preferredUnits);
@@ -184006,18 +184017,26 @@ const UnitTable = ({
       });
     }
   };
-  const convertViewData = (selectedUnits2) => convertVisibleRows({
-    headers,
-    rows,
-    selectedUnits: selectedUnits2,
-    storageUnits,
-    onChangeUnit,
-    convertBackToStorageUnit,
-    enableCosmeticRounding,
-    enableDisplayRounding
-  });
-  const convertedViewData = convertViewData(selectedUnits);
-  const [viewData, setViewData] = useState(convertedViewData);
+  const beforeRenderRow = useCallback(
+    ({ row: row2, rowIndex }) => {
+      return convertRow({
+        row: row2,
+        rowIndex,
+        selectedUnits,
+        storageUnits,
+        convertBackToStorageUnit,
+        enableCosmeticRounding,
+        enableDisplayRounding
+      });
+    },
+    [
+      selectedUnits,
+      storageUnits,
+      convertBackToStorageUnit,
+      enableCosmeticRounding,
+      enableDisplayRounding
+    ]
+  );
   useEffect(() => {
     const templateChanged = !isEqual$3(preferredUnits, previousPreferredUnits);
     if (templateChanged) {
@@ -184028,22 +184047,22 @@ const UnitTable = ({
           onChangeUnit({ unitKey, value: newUnit });
         }
       });
-      setViewData(convertViewData(preferredUnits));
     }
   }, [unitConfig]);
-  useEffect(() => {
-    setViewData(convertViewData(selectedUnits));
-  }, [table2, selectedUnits]);
   return /* @__PURE__ */ jsx(
     Table,
     {
       table: {
         ...otherProps,
-        headers: viewData.convertedHeaders,
-        rows: viewData.convertedRows
+        headers: convertHeaderRows({
+          headers: table2.headers,
+          selectedUnits,
+          onChangeUnit
+        })
       },
       onListReorder,
-      canListReorder
+      canListReorder,
+      beforeRenderRow
     }
   );
 };