@oliasoft-open-source/react-ui-library 4.2.1 → 4.3.0-beta-2

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;
@@ -257,6 +273,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)
@@ -1271,6 +1292,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;
@@ -1521,6 +1561,18 @@ 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;
+    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;
@@ -1735,6 +1787,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, }: IUnitTableProps) => JSX_2.Element;
+
 export declare const useFocus: () => UseFocusReturnType;
 
 declare type UseFocusReturnType = [MutableRefObject<HTMLInputElement | null>, TEmpty];

package/dist/index.js

@@ -11,7 +11,7 @@ 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 { 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";
 const global$2 = "";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -70545,6 +70545,155 @@ const UnitInput = ({
     }
   );
 };
+const getUnitCells = ({
+  tableDef,
+  displayedUnits,
+  handleUnitChange
+}) => {
+  return tableDef.map(({ convertible, unitKey, key: key2 }) => {
+    var _a;
+    if (!convertible) {
+      return { value: "" };
+    }
+    const oldUnit = 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);
+    };
+    return {
+      value: oldUnit,
+      options,
+      type: "Select",
+      onChange
+    };
+  });
+};
+const getHeaders = ({ tableDef }) => tableDef.map(({ header: header2 }) => ({
+  value: header2
+}));
+const onConvertData = (data, displayedUnits, tableDef) => {
+  if (!(data == null ? void 0 : data.length))
+    return [];
+  return data.map((row2) => {
+    const convertedRow = tableDef.reduce((prev2, colDef) => {
+      const { key: key2, defaultValue } = colDef;
+      const unitTo = displayedUnits[key2];
+      let value = row2[key2];
+      let displayedValue = value ?? defaultValue;
+      if (isValueWithUnit(value) && unitTo) {
+        displayedValue = convertAndGetValue(displayedValue, unitTo) || 0;
+      }
+      return {
+        ...prev2,
+        [key2]: isNumeric(displayedValue) ? withUnit(displayedValue, unitTo) : displayedValue
+      };
+    }, {});
+    return convertedRow;
+  });
+};
+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) => {
+  return tableDef.reduce((prev2, curr) => {
+    const { key: key2, unitKey } = curr;
+    return {
+      ...prev2,
+      [key2]: unitTemplate[unitKey]
+    };
+  }, {});
+};
+const buildTable = ({
+  rows,
+  tableDef,
+  displayedUnits,
+  handleUnitChange,
+  tableActions
+}) => {
+  if (!rows) {
+    return {
+      rows: [],
+      headers: []
+    };
+  }
+  const { addRow } = tableActions;
+  const headers = [
+    {
+      cells: getHeaders({ tableDef }),
+      actions: addRow ? [addRowHeader(addRow, rows, displayedUnits)] : []
+    },
+    {
+      cells: getUnitCells({
+        tableDef,
+        displayedUnits,
+        handleUnitChange
+      })
+    }
+  ];
+  return {
+    headers,
+    rows
+  };
+};
+const UnitTable = ({
+  data,
+  unitTemplate,
+  tableDef,
+  convertToCells,
+  tableActions,
+  testId
+}) => {
+  const [displayedUnits, setDisplayedUnits] = useState(
+    getDisplayedUnits(tableDef, unitTemplate)
+  );
+  useEffect(() => {
+    setDisplayedUnits(getDisplayedUnits(tableDef, unitTemplate));
+  }, [unitTemplate]);
+  const handleUnitChange = (key2, unit2) => {
+    setDisplayedUnits((prev2) => ({ ...prev2, [key2]: unit2 }));
+  };
+  const { headers, rows } = useMemo$1(
+    () => buildTable({
+      rows: convertToCells(
+        onConvertData(data, displayedUnits, tableDef),
+        displayedUnits
+      ),
+      tableDef,
+      displayedUnits,
+      handleUnitChange,
+      tableActions
+    }),
+    [data, displayedUnits]
+  );
+  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,
@@ -70624,6 +70773,7 @@ export {
   Tree,
   TriggerType,
   UnitInput,
+  UnitTable,
   dismissToast,
   readFile,
   toast,