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

package/dist/index.d.ts

@@ -158,6 +158,8 @@ export declare interface IActionProps {
     closeLayer?: TEmpty;
 }
 
+declare type IActionsType = (IAction | ISubAction | IChildComponent)[];
+
 export declare interface IBadgeProps {
     children?: ReactNode;
     color?: string;
@@ -231,6 +233,20 @@ export declare interface ICardProps {
     children?: ReactNode;
 }
 
+declare interface ICell {
+    value: number | string;
+    type: string;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    testId?: string;
+    disabled?: boolean;
+    style?: object;
+    options?: {
+        label: string;
+        value: string | number;
+    }[];
+}
+
 declare interface ICheckBoxCell extends TCommonCell {
     label?: string | null;
     checked: boolean;
@@ -256,6 +272,11 @@ export declare interface ICheckBoxProps {
     onClickHelp?: TEmpty;
 }
 
+declare interface IChildComponent {
+    childComponent: ReactNode | (() => ReactNode);
+    testId?: string;
+}
+
 /**
  * Icon wrapper component to support different icon formats:
  *     - string names (default recommendation)
@@ -1281,6 +1302,25 @@ declare interface ISubAction_2 {
     onClick: TEmpty;
 }
 
+declare interface ITableActions {
+    addRow?: () => void;
+    reorderComponents?: () => void;
+}
+
+declare interface ITableDefinition {
+    key: string;
+    header: string;
+    translationKey: string;
+    type: string;
+    convertible: boolean;
+    unitKey: string;
+    columnAlignment: string;
+    columnWidth: string;
+    defaultValue?: number | string | null;
+    options?: Array<any>;
+    placeholder?: string;
+}
+
 export declare interface ITableProps {
     onListReorder?: (obj: {
         from: number;
@@ -1532,6 +1572,19 @@ export declare interface IUnitInputProps {
     unitTemplate?: Record<string, any>;
 }
 
+declare interface IUnitTableProps {
+    data: Array<any>;
+    unitTemplate: Record<string, any>;
+    tableDef: ITableDefinition[];
+    convertToCells: (displayedData: Array<any>, displayedUnits: Record<string, any>) => {
+        cells: ICell[];
+        actions: IActionsType;
+    }[];
+    tableActions: ITableActions;
+    oldStructureType?: string | null;
+    testId: string;
+}
+
 export declare const Label: ({ label, width, helpText, helpTextMaxWidth, onClickHelp, lock, info, libraryIcon, labelLeft, }: ILabelProps) => JSX_2.Element;
 
 export declare const List: ({ list, bordered, expanding, narrow, toggleNarrow, onToggleNarrow, invokeEditOnRowClick, noHeader, stickyHeader, draggable, onListReorder, marginBottom, height, testId, scrollDetails, }: IListProps) => JSX_2.Element;
@@ -1748,6 +1801,8 @@ 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: ({ data, unitTemplate, tableDef, convertToCells, tableActions, testId, oldStructureType, }: IUnitTableProps) => 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, 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) {
@@ -55702,8 +55702,7 @@ const styles$7 = {
 const InputCell = ({
   cell: cell2,
   columnAlignment,
-  testId,
-  type
+  testId
 }) => {
   return /* @__PURE__ */ jsx(
     Input$1,
@@ -55727,8 +55726,7 @@ const InputCell = ({
       right: columnAlignment === Align.RIGHT,
       testId,
       tabIndex: cell2.disabled ? -1 : 0,
-      tooltip: cell2.tooltip,
-      type
+      tooltip: cell2.tooltip
     }
   );
 };
@@ -55910,7 +55908,7 @@ const InputCellWrapper = ({
       columnAlignment,
       testId
     }
-  ) : cell2.type === "NumberInput" ? /* @__PURE__ */ jsx(NumberInputCell, { cell: cell2, testId }) : cell2.type === "DateInput" ? /* @__PURE__ */ jsx(InputCell, { cell: cell2, testId, type: "date" }) : cell2.type === "Select" ? /* @__PURE__ */ jsx(
+  ) : cell2.type === "NumberInput" ? /* @__PURE__ */ jsx(NumberInputCell, { cell: cell2, testId }) : cell2.type === "Select" ? /* @__PURE__ */ jsx(
     SelectCell,
     {
       cell: cell2,
@@ -56092,7 +56090,6 @@ const CellWrapper = ({
   switch (cell2.type) {
     case "Input":
     case "NumberInput":
-    case "DateInput":
     case "Select":
       return /* @__PURE__ */ jsx(
         InputCellWrapper,
@@ -70544,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,
@@ -70623,6 +70823,7 @@ export {
   Tree,
   TriggerType,
   UnitInput,
+  UnitTable,
   dismissToast,
   readFile,
   toast,