@oliasoft-open-source/react-ui-library 4.4.8-beta-1 → 4.5.0-beta-1

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, cloneDeep } 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, convertAndGetValue, isNumeric, getAltUnitsListByQuantity } 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) {
@@ -55457,7 +55457,7 @@ const styles$b = {
   table,
   striped
 };
-const title$1 = "_title_11pbp_1";
+const title$1 = "_title_zn5s7_1";
 const styles$a = {
   title: title$1
 };
@@ -58212,6 +58212,7 @@ const Content = ({
   title: title2,
   okText,
   onClickOk,
+  disableConfirmButton,
   cancelText,
   onClickCancel,
   close: close2,
@@ -58226,6 +58227,7 @@ const Content = ({
         colored: true,
         label: okText,
         onClick: () => onClickOk(close2),
+        disabled: disableConfirmButton,
         testId: `${testId}-ok-button`
       }
     ),
@@ -58251,6 +58253,7 @@ const PopConfirm = ({
   okText = "Ok",
   onClickOk = () => {
   },
+  disableConfirmButton = false,
   overflowContainer = false,
   testId = void 0
 }) => {
@@ -58260,6 +58263,7 @@ const PopConfirm = ({
       title: title2,
       okText,
       onClickOk,
+      disableConfirmButton,
       cancelText,
       onClickCancel,
       testId
@@ -70537,6 +70541,209 @@ const UnitInput = ({
     }
   );
 };
+const STRUCTURE_TYPE = Object.freeze({
+  ARRAY: "array",
+  OBJECT: "object"
+});
+const getUnitCells = ({
+  tableDef,
+  displayedUnits,
+  handleUnitChange,
+  oldStructureType
+}) => {
+  return tableDef.map(({ convertible, unitKey, key: key2 }, ix) => {
+    var _a;
+    if (!convertible) {
+      return { value: "" };
+    }
+    const oldUnit = oldStructureType === STRUCTURE_TYPE.ARRAY ? displayedUnits[ix] : displayedUnits[key2];
+    const options = (_a = getAltUnitsListByQuantity(unitKey)) == null ? void 0 : _a.map(
+      ({ unit: unit2, label: label2 }) => ({
+        label: label2,
+        value: unit2
+      })
+    );
+    const onChange = ({
+      target: { value: newUnit }
+    }) => {
+      if (newUnit === oldUnit) {
+        return;
+      }
+      handleUnitChange(key2, newUnit, ix);
+    };
+    return {
+      value: oldUnit,
+      options,
+      type: "Select",
+      onChange
+    };
+  });
+};
+const getHeaders = ({ tableDef }) => tableDef.map(({ header: header2 }) => ({
+  value: header2
+}));
+const onConvertData = (data, displayedUnits, tableDef, oldStructureType) => {
+  if (!(data == null ? void 0 : data.length))
+    return [];
+  let storedUnits;
+  const tableData = cloneDeep(data);
+  if (oldStructureType) {
+    [storedUnits] = tableData.splice(0, 1);
+  }
+  const convertedTable = tableData.map((row2) => {
+    const convertedRow = tableDef.reduce((prev2, colDef, columnIx) => {
+      const { key: key2, defaultValue } = colDef;
+      const unitTo = oldStructureType === STRUCTURE_TYPE.ARRAY ? (
+        // @ts-ignore TODO Peter B
+        displayedUnits[columnIx]
+      ) : (
+        // @ts-ignore TODO Peter B
+        displayedUnits[key2]
+      );
+      const unitFrom = oldStructureType === STRUCTURE_TYPE.ARRAY ? (
+        // @ts-ignore TODO Peter B
+        storedUnits[columnIx]
+      ) : (
+        // @ts-ignore TODO Peter B
+        storedUnits == null ? void 0 : storedUnits[key2]
+      );
+      const value = oldStructureType === STRUCTURE_TYPE.ARRAY ? row2[columnIx] : row2[key2];
+      let displayedValue = value ?? defaultValue;
+      if (unitFrom && unitTo) {
+        displayedValue = convertAndGetValue(displayedValue, unitTo, unitFrom);
+      }
+      if (oldStructureType) {
+        if (oldStructureType === STRUCTURE_TYPE.ARRAY) {
+          row2[columnIx] = displayedValue;
+          return row2;
+        }
+      } else {
+        if (isValueWithUnit(value) && unitTo) {
+          const convertedValue = convertAndGetValue(displayedValue, unitTo);
+          displayedValue = isNumeric(convertedValue) ? withUnit(convertedValue, unitTo) : displayedValue;
+        }
+      }
+      return {
+        ...prev2,
+        [key2]: displayedValue
+      };
+    }, {});
+    return convertedRow;
+  });
+  return oldStructureType ? [displayedUnits, ...convertedTable] : convertedTable;
+};
+const addRowHeader = (addRow, data, displayedUnits) => ({
+  label: "Add",
+  icon: "plus",
+  primary: true,
+  onClick: () => addRow(data, displayedUnits),
+  testId: "lithology-table-add-new-row"
+});
+const getDisplayedUnits = (tableDef, unitTemplate, oldStructureType) => {
+  if (oldStructureType === STRUCTURE_TYPE.ARRAY) {
+    return tableDef.reduce((prev2, curr, ix) => {
+      const { unitKey } = curr;
+      prev2[ix] = unitTemplate[unitKey];
+      return prev2;
+    }, []);
+  }
+  return tableDef.reduce((prev2, curr) => {
+    const { key: key2, unitKey } = curr;
+    return {
+      ...prev2,
+      [key2]: unitTemplate[unitKey]
+    };
+  }, {});
+};
+const buildTable = ({
+  rows,
+  tableDef,
+  displayedUnits,
+  handleUnitChange,
+  tableActions,
+  oldStructureType = STRUCTURE_TYPE.OBJECT
+}) => {
+  if (!rows) {
+    return {
+      rows: [],
+      headers: []
+    };
+  }
+  const { addRow } = tableActions;
+  const headers = [
+    {
+      cells: getHeaders({ tableDef }),
+      actions: addRow ? [addRowHeader(addRow, rows, displayedUnits)] : []
+    },
+    {
+      cells: getUnitCells({
+        tableDef,
+        displayedUnits,
+        handleUnitChange,
+        oldStructureType
+      })
+    }
+  ];
+  return {
+    headers,
+    rows
+  };
+};
+const UnitTable = ({
+  data,
+  unitTemplate,
+  tableDef,
+  convertToCells,
+  tableActions,
+  testId,
+  oldStructureType = STRUCTURE_TYPE.OBJECT
+}) => {
+  const [displayedUnits, setDisplayedUnits] = useState(getDisplayedUnits(tableDef, unitTemplate, oldStructureType));
+  useEffect(() => {
+    setDisplayedUnits(
+      getDisplayedUnits(tableDef, unitTemplate, oldStructureType)
+    );
+  }, [unitTemplate]);
+  const handleUnitChange = (key2, unit2, ix) => {
+    if (oldStructureType === STRUCTURE_TYPE.ARRAY) {
+      setDisplayedUnits((prev2) => {
+        const newUnits = [...prev2];
+        newUnits[ix] = unit2;
+        return newUnits;
+      });
+    } else {
+      setDisplayedUnits((prev2) => ({ ...prev2, [key2]: unit2 }));
+    }
+  };
+  const { headers, rows } = useMemo$1(
+    () => buildTable({
+      rows: convertToCells(
+        onConvertData(data, displayedUnits, tableDef, oldStructureType),
+        displayedUnits
+      ),
+      tableDef,
+      displayedUnits,
+      handleUnitChange,
+      tableActions,
+      oldStructureType
+    }),
+    [displayedUnits, data]
+  );
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      table: {
+        testId,
+        headers,
+        rows,
+        columnAlignment: tableDef.map((def) => def.columnAlignment),
+        columnWidths: tableDef.map((def) => def.columnWidth),
+        fixedWidth: "auto"
+      },
+      onListReorder: (tableActions == null ? void 0 : tableActions.reorderComponents) || void 0
+    }
+  );
+};
 export {
   Accordion,
   AccordionWithDefaultToggle,
@@ -70616,6 +70823,7 @@ export {
   Tree,
   TriggerType,
   UnitInput,
+  UnitTable,
   dismissToast,
   readFile,
   toast,