npm - @oliasoft-open-source/react-ui-library - Versions diffs - 4.5.0-beta-2 → 4.5.1 - Mend

@oliasoft-open-source/react-ui-library 4.5.0-beta-2 → 4.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/dist/404.html ADDED Viewed

@@ -0,0 +1 @@

+ <!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-neKlYvgy.js"></script><link rel="stylesheet" crossorigin href="/react-ui-library/assets/index-AkeNwthw.css"></head><body><div id="content"></div></body>

package/dist/index.d.ts CHANGED Viewed

@@ -1497,6 +1497,12 @@ export declare interface ITreeProps {
     allowParentReassignment?: boolean;
 }
+declare interface IUnitConfigItem {
+    unitKey: string;
+    storageUnit: string;
+    preferredUnit: string;
+}
 export declare interface IUnitInputProps {
     name: string | {
         fieldName?: string;
@@ -1533,6 +1539,46 @@ export declare interface IUnitInputProps {
     unitTemplate?: Record<string, any>;
 }
+declare interface IUnitTable extends Omit<ITableProps['table'], 'rows'> {
+    rows?: IUnitTableRow[];
+}
+declare interface IUnitTableCell {
+    autoUnit: boolean;
+    unitKey: string;
+    formatDisplayValue?: (value: string | number) => void;
+}
+declare interface IUnitTableInputCell extends IInputCell, IUnitTableCell {
+    onChange: (args: any) => void;
+}
+declare interface IUnitTableNumberInputCell extends INumberInputCell, IUnitTableCell {
+    onChange: (args: any) => void;
+}
+export declare interface IUnitTableOnChangeEvent extends React_2.ChangeEvent<HTMLInputElement> {
+    target: EventTarget & HTMLInputElement & {
+        rowIndex: number;
+        cellIndex: number;
+        unit: string;
+    };
+}
+export declare interface IUnitTableProps extends Omit<ITableProps, 'table'> {
+    table: IUnitTable;
+    unitConfig: IUnitConfigItem[];
+    convertBackToStorageUnit: boolean;
+    enableCosmeticRounding: boolean;
+}
+export declare interface IUnitTableRow extends Omit<TRowType, 'cells'> {
+    cells: TUnitTableCellShape[];
+}
+declare interface IUnitTableStaticCell extends IStaticCell, IUnitTableCell {
+}
 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;
@@ -1747,8 +1793,12 @@ declare type TTopBarContent = TLinkElement | TButtonElement | TMenuElement | TCo
 export declare type TTriggerType = 'Text' | 'Button' | 'DropDownButton' | 'Component';
+declare type TUnitTableCellShape = TCellShape | IUnitTableStaticCell | IUnitTableInputCell | IUnitTableNumberInputCell;
 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, enableCosmeticRounding, }: IUnitTableProps) => JSX_2.Element;
 export declare const useFocus: () => UseFocusReturnType;
 declare type UseFocusReturnType = [MutableRefObject<HTMLInputElement | null>, TEmpty];

package/dist/index.js CHANGED Viewed

@@ -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, isScientificStringNum, 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) {
@@ -56126,6 +56126,7 @@ var CellType = /* @__PURE__ */ ((CellType2) => {
   CellType2["SLIDER"] = "Slider";
   CellType2["CHECKBOX"] = "CheckBox";
   CellType2["ACTIONS"] = "Actions";
+  CellType2["AUTO_UNIT"] = "AutoUnit";
   return CellType2;
 })(CellType || {});
 const Cell = ({
@@ -70595,6 +70596,141 @@ 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,
+  enableCosmeticRounding
+}) => {
+  const convertedHeaders = headers ? headers.map((headerRow) => ({
+    ...headerRow,
+    cells: headerRow.cells.map((headerCell) => {
+      if (headerCell.type === CellType.AUTO_UNIT) {
+        const { unitKey } = headerCell;
+        return {
+          value: selectedUnits[unitKey],
+          type: CellType.SELECT,
+          options: getUnitsForQuantity(unitKey),
+          native: true,
+          onChange: (evt) => onChangeUnit({ unitKey, value: evt.target.value })
+        };
+      }
+      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 { formatDisplayValue, unitKey, value } = cell2;
+        const selectedUnit = selectedUnits[unitKey];
+        const storageUnit = storageUnits[unitKey];
+        const unitChanged = selectedUnit !== storageUnit;
+        const convertedValue = unitChanged ? convertAndGetValue(value, selectedUnit, storageUnit) : cell2.value;
+        const isScientific = isScientificStringNum(value);
+        const displayValue = enableCosmeticRounding && (unitChanged || !isScientific) ? (
+          /*
+           Optionally do Excel-style "cosmetic rounding" of display values (only if enableCosmeticRounding prop on)
+           This means rounding to slightly less precision than the underlying floating-point number type, to
+           resolve floating-point "rounding noise" associated with storing values in one unit but converting
+           and displaying them in another unit. This solution was evaluated by Tools Team in relation to
+           tickets OW-10614 and OW-15745.
+          */
+          roundToPrecision(convertedValue, 14)
+        ) : convertedValue;
+        const formattedDisplayValue = formatDisplayValue ? formatDisplayValue(displayValue) : displayValue;
+        return {
+          ...cell2,
+          value: formattedDisplayValue,
+          onChange: (evt) => {
+            const { value: value2 } = evt.target;
+            const storageUnit2 = storageUnits[unitKey];
+            const selectedUnit2 = selectedUnits[unitKey];
+            const unitChanged2 = selectedUnit2 !== storageUnit2;
+            const nextValueConverted = unitChanged2 ? convertAndGetValue(value2, storageUnit2, selectedUnit2) : value2;
+            const nextUnit = convertBackToStorageUnit ? storageUnit2 : selectedUnit2;
+            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,
+  unitConfig,
+  convertBackToStorageUnit = true,
+  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,
+    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, selectedUnits]);
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      table: {
+        ...otherProps,
+        headers: viewData.convertedHeaders,
+        rows: viewData.convertedRows
+      }
+    }
+  );
+};
 export {
   Accordion,
   AccordionWithDefaultToggle,
@@ -70674,6 +70810,7 @@ export {
   Tree,
   TriggerType,
   UnitInput,
+  UnitTable,
   dismissToast,
   readFile,
   toast,