@oliasoft-open-source/react-ui-library 4.20.10 → 4.20.11-beta-2

package/README.md

@@ -142,6 +142,7 @@ To quickly start a new project using the React UI Library with Vite, you can use
 - [Tree](#tree)
 - [NumberInput](#numberinput)
 - [UnitInput](#unitinput)
+- [UnitTable](#unittable)
 
 ## Storybook
 
@@ -2062,6 +2063,60 @@ The `Table` component renders tabular data with various customization options.
 
 <hr style="border: none; border-right: 2px solid black; width: 100%; height: 1px;">
 
+## UnitTable Component <a id="unittable"></a>
+
+The `UnitTable` component is a wrapper around `Table`, with local state and additional logic to handle displaying tables in preferred units, and converting return values when cells are edited.
+
+### Props
+
+| Prop                     | Description                                                                                                            | Default Value |
+|--------------------------|------------------------------------------------------------------------------------------------------------------------|---------------|
+| `table`                  | An object containing table configuration, similar to `ITableTableProps`.                                               |          |
+| `unitConfig`             | Array of unit configuration objects, each with `unitKey`, `storageUnit`, optional `preferredUnit`, and `onChange` callback. See [unitConfig item structure](#unitconfig-item-structure). |          |
+| `convertBackToStorageUnit` | Whether values should be converted back to the storage unit when edited.                                                | `true`        |
+| `enableCosmeticRounding` | Enables cosmetic rounding of displayed values (Excel-style) to reduce visual precision noise.                          | `true`        |
+| `enableDisplayRounding`  | Enables rounding of displayed values in number inputs until the cell is focused.                                        | `true`        |
+| `onListReorder`          | Function called when rows are reordered via drag-and-drop. Receives `{ from: number; to: number }` as an argument.     | `() => {}`    |
+| `canListReorder`         | Function to determine whether a row can be reordered. Receives `{ from: number; to: number }` as an argument and returns `boolean`. | `() => true`  |
+
+---
+
+### `unitConfig` Item Structure
+
+Each object in the `unitConfig` array should have the following shape:
+
+| Key              | Type                                  | Description                                                                                                           |
+|------------------|---------------------------------------|------------------------------------------------------------------------------------------------------------------------|
+| `unitKey`        | `string`                              | Key representing the type of unit (e.g., `length`, `temperature`, `density`).                                         |
+| `storageUnit`    | `string`                              | The unit in which data is stored internally (e.g., `m`, `ft`, `C`, `sg`).                                             |
+| `preferredUnit`  | `string` _(optional)_                  | The user's preferred display unit (e.g., `ft`, `F`, `ppg`).                                                           |
+| `onChange`       | `(params: { oldUnit: string; newUnit: string; unitKey: string }) => void` _(optional)_ | Callback when the display unit is changed by the user.                                                               |
+
+---
+
+### Usage Example
+
+```jsx
+<UnitTable
+  table={{
+    draggable: true,
+    headers: [...],
+    rows: [...],
+  }}
+  unitConfig={[
+    {
+      unitKey: 'length',
+      storageUnit: 'm',
+      preferredUnit: 'ft',
+      onChange: ({ oldUnit, newUnit, unitKey }) =>
+        console.log(`Unit changed for ${unitKey} from ${oldUnit} to ${newUnit}`),
+    },
+  ]}
+  onListReorder={({ from, to }) => console.log(`Moved row from ${from} to ${to}`)}
+  canListReorder={({ from, to }) => from !== to}
+/>
+```
+
 ## Tabs Component <a id="tabs"></a>
 
 The `Tabs` component creates a tabbed interface for organizing content.

package/dist/index.d.ts

@@ -1652,6 +1652,14 @@ export declare interface IUnitTableProps extends Omit<ITableProps, 'table'> {
     convertBackToStorageUnit?: boolean;
     enableCosmeticRounding?: boolean;
     enableDisplayRounding?: boolean;
+    onListReorder?: (obj: {
+        from: number;
+        to: number;
+    }) => void;
+    canListReorder?: (obj: {
+        from: number;
+        to: number;
+    }) => boolean;
 }
 
 export declare interface IUnitTableRow extends Omit<TRowType, 'cells'> {
@@ -1919,7 +1927,7 @@ declare type UnitContextType = any;
 
 export declare const UnitInput: ({ name, placeholder, disabled, disabledUnit, error, left, small, width, value, unitkey, initUnit, noConversion, onChange, onClick, onFocus, onSwitchUnit, unitTemplate, testId, warning, predefinedOptions, initialPredefinedOption, shouldLinkAutomaticly, selectedPredefinedOptionKey, validationCallback, disabledValidation, allowEmpty, convertBackToStorageUnit, enableCosmeticRounding, enableDisplayRounding, roundDisplayValue, selectOnFocus, groupOrder, }: IUnitInputProps) => JSX_2.Element;
 
-export declare const UnitTable: ({ table, unitConfig, convertBackToStorageUnit, enableCosmeticRounding, enableDisplayRounding, }: IUnitTableProps) => JSX_2.Element;
+export declare const UnitTable: ({ table, unitConfig, convertBackToStorageUnit, enableCosmeticRounding, enableDisplayRounding, onListReorder, canListReorder, }: IUnitTableProps) => JSX_2.Element;
 
 export declare const useFocus: () => UseFocusReturnType;
 

package/dist/index.js

@@ -66704,7 +66704,9 @@ const UnitTable = ({
   unitConfig,
   convertBackToStorageUnit = true,
   enableCosmeticRounding = true,
-  enableDisplayRounding = true
+  enableDisplayRounding = true,
+  onListReorder,
+  canListReorder
 }) => {
   const { rows, headers, ...otherProps } = table2;
   const { storageUnits, preferredUnits } = normalizeUnits(unitConfig);
@@ -66764,7 +66766,9 @@ const UnitTable = ({
         ...otherProps,
         headers: viewData.convertedHeaders,
         rows: viewData.convertedRows
-      }
+      },
+      onListReorder,
+      canListReorder
     }
   );
 };