@oliasoft-open-source/react-ui-library 4.6.0-beta-1 → 4.7.0-beta-1

package/dist/index.d.ts

@@ -1494,7 +1494,6 @@ export declare interface ITreeProps {
         expand: React_2.ReactNode;
         collapse: React_2.ReactNode;
     };
-    allowParentReassignment?: boolean;
 }
 
 export declare interface IUnitInputProps {
@@ -1711,7 +1710,7 @@ export declare const Tooltip: ({ children, text, error, placement, possiblePlace
 
 export declare const TopBar: ({ title, appSwitcher, content, contentRight, warning, height, fixedPosition, }: ITopBarProps) => JSX_2.Element;
 
-export declare const Tree: ({ list, draggable, onListReorder, onChangeOpen, testId, isInitialOpen, treeRef, itemHasChild, onItemToggle, icons, allowParentReassignment, }: ITreeProps) => JSX_2.Element;
+export declare const Tree: ({ list, draggable, onListReorder, onChangeOpen, testId, isInitialOpen, treeRef, itemHasChild, onItemToggle, icons, }: ITreeProps) => JSX_2.Element;
 
 export declare enum TriggerType {
     TEXT = "Text",
@@ -1749,6 +1748,14 @@ export declare type TTriggerType = 'Text' | 'Button' | 'DropDownButton' | 'Compo
 
 export declare const UnitInput: ({ name, placeholder, disabled, disabledUnit, error, left, small, width, value, unitkey, initUnit, noConversion, onChange, onClick, onFocus, onSwitchUnit, unitTemplate, doNotConvertValue, testId, warning, predefinedOptions, initialPredefinedOption, shouldLinkAutomaticly, selectedPredefinedOptionKey, validationCallback, disabledValidation, allowEmpty, autoValue, }: IUnitInputProps) => JSX_2.Element;
 
+export declare const UnitTable: ({ table, unitConfig, convertBackToStorageUnit, convertBackToString, enableCosmeticRounding, }: {
+    table: any;
+    unitConfig: any;
+    convertBackToStorageUnit?: boolean | undefined;
+    convertBackToString?: boolean | undefined;
+    enableCosmeticRounding?: boolean | undefined;
+}) => JSX_2.Element;
+
 export declare const useFocus: () => UseFocusReturnType;
 
 declare type UseFocusReturnType = [MutableRefObject<HTMLInputElement | null>, TEmpty];

package/dist/index.js

@@ -10,8 +10,8 @@ import React__default, { useContext, isValidElement, useState, useRef, useEffect
 import * as PropTypes from "prop-types";
 import PropTypes__default from "prop-types";
 import ReactDOM, { createPortal, unstable_batchedUpdates, render } from "react-dom";
-import _$1, { set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isObjectLike, has as has$1 } from "lodash";
-import { validateNumber, cleanNumStr, unitFromQuantity, isValueWithUnit, withUnit, convertSamePrecision, getValue as getValue$1, getUnit, KNOWN_UNITS, split as split$1, checkAndCleanDecimalComma, label as label$b, altUnitsList } from "@oliasoft-open-source/units";
+import _$1, { set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isObjectLike, has as has$1, isEqual as isEqual$4 } from "lodash";
+import { validateNumber, cleanNumStr, unitFromQuantity, isValueWithUnit, withUnit, convertSamePrecision, getValue as getValue$1, getUnit, KNOWN_UNITS, split as split$1, checkAndCleanDecimalComma, label as label$b, altUnitsList, getUnitsForQuantity, convertAndGetValue, roundToPrecision } from "@oliasoft-open-source/units";
 import { isValueWithUnit as isValueWithUnit$1 } from "@oliasoft-open-source/units/dist/units";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x2) {
@@ -70010,75 +70010,24 @@ const Tree = ({
   treeRef,
   itemHasChild,
   onItemToggle,
-  icons: icons2,
-  allowParentReassignment
+  icons: icons2
 }) => {
   var _a;
-  const handleOpen = (id2) => {
-    if (onChangeOpen) {
-      onChangeOpen(id2);
-    }
-  };
-  const findNodeIndexById = (tree22, id2) => {
-    return (tree22 == null ? void 0 : tree22.findIndex((node2) => (node2 == null ? void 0 : node2.id) === id2)) ?? -1;
-  };
-  const setDragSourceParentToGrandparent = (dragSource, workingTree) => {
-    const dragSourceParentIndex = findNodeIndexById(
-      workingTree,
-      dragSource == null ? void 0 : dragSource.parent
-    );
-    if (dragSourceParentIndex >= 0) {
-      const grandparent = workingTree == null ? void 0 : workingTree.find(
-        (node2) => {
-          var _a2;
-          return (node2 == null ? void 0 : node2.id) === ((_a2 = workingTree[dragSourceParentIndex]) == null ? void 0 : _a2.parent);
-        }
-      );
-      dragSource.parent = grandparent ? grandparent.id : 0;
-    }
-  };
-  const removeDragSourceFromWorkingTree = (dragSource, workingTree) => {
-    return (workingTree == null ? void 0 : workingTree.filter((node2) => (node2 == null ? void 0 : node2.id) !== (dragSource == null ? void 0 : dragSource.id))) ?? [];
-  };
-  const insertDragSourceAfterParentInWorkingTree = (dragSource, dragSourceParentIndex, workingTree) => {
-    workingTree == null ? void 0 : workingTree.splice(dragSourceParentIndex, 0, dragSource);
-    return workingTree;
-  };
-  const transformTreeToList = (tree22) => {
-    return tree22.map(({ id: id2, parent, droppable: droppable2, data }) => {
-      return {
+  const handleDrop = (newTree) => {
+    if (onListReorder) {
+      const newList = newTree.map(({ id: id2, parent, droppable: droppable2, data }) => ({
         id: id2,
         parent,
         droppable: droppable2,
         ...data
-      };
-    });
+      }));
+      onListReorder(newList);
+    }
   };
-  const handleDrop = (newTree, option2) => {
-    const { dragSource, dropTarget: dropTarget2 } = option2;
-    let workingTree = [...newTree];
-    if (!onListReorder)
-      return;
-    const dragSourceIndex = findNodeIndexById(workingTree, dragSource == null ? void 0 : dragSource.id);
-    const dragSourceParentIndex = findNodeIndexById(
-      workingTree,
-      dragSource == null ? void 0 : dragSource.parent
-    );
-    let newList = [];
-    if ((dragSource == null ? void 0 : dragSource.parent) === (dropTarget2 == null ? void 0 : dropTarget2.id) && dragSourceIndex === 0 && allowParentReassignment) {
-      setDragSourceParentToGrandparent(dragSource, workingTree);
-      workingTree = removeDragSourceFromWorkingTree(
-        dragSource,
-        workingTree
-      );
-      workingTree = insertDragSourceAfterParentInWorkingTree(
-        dragSource,
-        dragSourceParentIndex,
-        workingTree
-      );
+  const handleOpen = (id2) => {
+    if (onChangeOpen) {
+      onChangeOpen(id2);
     }
-    newList = transformTreeToList(workingTree);
-    onListReorder(newList);
   };
   const tree2 = (_a = list2 == null ? void 0 : list2.items) == null ? void 0 : _a.map(({ id: id2, droppable: droppable2, parent, name: name2, ...rest }) => ({
     id: id2,
@@ -70595,6 +70544,129 @@ const UnitInput = ({
     }
   );
 };
+const normalizeUnits = (unitConfig) => unitConfig.reduce(
+  ({ preferredUnits, storageUnits }, { unitKey, preferredUnit, storageUnit }) => {
+    preferredUnits[unitKey] = preferredUnit;
+    storageUnits[unitKey] = storageUnit;
+    return { preferredUnits, storageUnits };
+  },
+  { preferredUnits: {}, storageUnits: {} }
+);
+const convertVisibleRows = ({
+  headers,
+  rows,
+  selectedUnits,
+  storageUnits,
+  onChangeUnit,
+  convertBackToStorageUnit,
+  convertBackToString,
+  enableCosmeticRounding
+}) => {
+  const convertedHeaders = headers.map((headerRow) => ({
+    ...headerRow,
+    cells: headerRow.cells.map((headerCell) => {
+      if (headerCell.type === "AutoUnit") {
+        const { unitKey } = headerCell;
+        return {
+          value: selectedUnits[unitKey],
+          type: "Select",
+          options: getUnitsForQuantity(unitKey),
+          native: true,
+          onChange: (evt) => onChangeUnit({ unitKey, value: evt.target.value })
+        };
+      }
+      return headerCell;
+    })
+  }));
+  const convertedRows = rows.map((row2, rowIndex) => ({
+    ...row2,
+    cells: row2.cells.map((cell2, cellIndex) => {
+      if (cell2.autoUnit) {
+        const { formatDisplayValue } = cell2;
+        const convertedValue = convertAndGetValue(
+          cell2.value,
+          selectedUnits[cell2.unitKey],
+          storageUnits[cell2.unitKey]
+        );
+        const displayValue = enableCosmeticRounding ? roundToPrecision(convertedValue, 14) : convertedValue;
+        const formattedDisplayValue = formatDisplayValue ? formatDisplayValue(displayValue) : displayValue;
+        return {
+          ...cell2,
+          value: formattedDisplayValue,
+          onChange: (evt) => {
+            const { value } = evt.target;
+            const { unitKey } = cell2;
+            const storageUnit = storageUnits[unitKey];
+            const selectedUnit = selectedUnits[unitKey];
+            const unitChanged = selectedUnit !== storageUnit;
+            const nextValueConverted = unitChanged && convertBackToStorageUnit ? convertAndGetValue(value, storageUnit, selectedUnit) : value;
+            const nextValue = convertBackToString ? String(nextValueConverted) : nextValueConverted;
+            const nextUnit = convertBackToStorageUnit ? storageUnit : selectedUnit;
+            cell2.onChange({
+              rowIndex,
+              cellIndex,
+              value: nextValue,
+              unit: nextUnit
+            });
+          }
+        };
+      }
+      return cell2;
+    })
+  }));
+  return { convertedHeaders, convertedRows };
+};
+const UnitTable = ({
+  table: table2,
+  unitConfig,
+  convertBackToStorageUnit = true,
+  convertBackToString = false,
+  enableCosmeticRounding = true
+}) => {
+  const { rows, headers, otherProps } = table2;
+  const { storageUnits, preferredUnits } = normalizeUnits(unitConfig);
+  const previousPreferredUnits = usePrevious(preferredUnits);
+  const [selectedUnits, setSelectedUnits] = useState(preferredUnits);
+  const onChangeUnit = ({ unitKey, value }) => setSelectedUnits({
+    ...selectedUnits,
+    [unitKey]: value
+  });
+  const convertViewData = (selectedUnits2) => convertVisibleRows({
+    headers,
+    rows,
+    selectedUnits: selectedUnits2,
+    storageUnits,
+    onChangeUnit,
+    convertBackToStorageUnit,
+    convertBackToString,
+    enableCosmeticRounding
+  });
+  const convertedViewData = convertViewData(selectedUnits);
+  const [viewData, setViewData] = useState(convertedViewData);
+  useEffect(() => {
+    const templateChanged = !isEqual$4(preferredUnits, previousPreferredUnits);
+    if (templateChanged) {
+      setSelectedUnits(preferredUnits);
+      setViewData(convertViewData(preferredUnits));
+    }
+  }, [unitConfig]);
+  useEffect(() => {
+    setViewData(convertViewData(selectedUnits));
+  }, [table2]);
+  useEffect(() => {
+    setViewData(convertViewData(selectedUnits));
+  }, [selectedUnits]);
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      table: {
+        ...otherProps,
+        headers: viewData.convertedHeaders,
+        rows: viewData.convertedRows
+      }
+    }
+  );
+};
 export {
   Accordion,
   AccordionWithDefaultToggle,
@@ -70674,6 +70746,7 @@ export {
   Tree,
   TriggerType,
   UnitInput,
+  UnitTable,
   dismissToast,
   readFile,
   toast,