Adding IColumn properties supported by tubular to the main model. (#646)

unosquare · Oct 8, 2024 · 8a178ee · 8a178ee
1 parent 5885201
commit 8a178ee
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 15 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -21,10 +21,4 @@ module.exports = {
     automock: false,
     setupFilesAfterEnv: ['./jest-setup.ts'],
     setupFiles: ['@testing-library/react/dont-cleanup-after-each'],
-    globals: {
-        'ts-jest': {
-            diagnostics: false,
-            tsconfig: 'tsconfig.json',
-        },
-    },
 };
diff --git a/sample/src/ColumnsDefinition.ts b/sample/src/ColumnsDefinition.ts
@@ -4,15 +4,14 @@ import { ITbColumnProxy } from '../../src/interfaces/ITbColumn';
 export const columns: ITbColumnProxy[] = [
     {
         name: 'Actions',
-        minWidth: 50,
         isComputed: true,
         dataType: ColumnDataType.String,
     },
     {
         name: 'OrderID',
         label: 'Order ID',
-        minWidth: 100,
-        maxWidth: 110,
+        minWidth: 80,
+        maxWidth: 90,
         isKey: true,
         dataType: ColumnDataType.Numeric,
         sortable: true,
@@ -42,8 +41,8 @@ export const columns: ITbColumnProxy[] = [
     {
         name: 'Amount',
         label: 'Amount',
-        minWidth: 100,
-        maxWidth: 110,
+        minWidth: 70,
+        maxWidth: 90,
         dataType: ColumnDataType.Numeric,
         sortable: true,
     },

diff --git a/src/interfaces/ITbColumn.ts b/src/interfaces/ITbColumn.ts
@@ -5,4 +5,6 @@ export interface ITbColumn extends IColumn {
     tb?: Partial<ColumnModel>;
 }
 
-export interface ITbColumnProxy extends Partial<ColumnModel>, Pick<IColumn, 'minWidth' | 'maxWidth'> {}
+export type TbSupportedIColumnProps = Partial<Pick<IColumn, 'minWidth' | 'maxWidth'>>;
+
+export interface ITbColumnProxy extends Partial<ColumnModel>, TbSupportedIColumnProps {}
diff --git a/src/useTbFabric.ts b/src/useTbFabric.ts
@@ -11,7 +11,7 @@ import {
     columnHasFilter,
 } from 'tubular-common/dist/Models';
 import { IColumn } from '@fluentui/react';
-import { ITbColumnProxy } from './interfaces/ITbColumn';
+import { ITbColumnProxy, TbSupportedIColumnProps } from './interfaces/ITbColumn';
 import { ITbFabricInstance } from './interfaces/ITbFabricInstance';
 import { ITbFabricApi } from './interfaces';
 
@@ -40,8 +40,12 @@ const createInitialTbColumns = (proxyColumns: ITbColumnProxy[]): ColumnModel[] =
         }),
     );
 
-const mapToFabricColumns = (tbColumns: ColumnModel[]): Partial<IColumn>[] =>
+const mapToFabricColumns = (
+    tbColumns: ColumnModel[],
+    fabricColumnProps: { [key: string]: Partial<TbSupportedIColumnProps> },
+): Partial<IColumn>[] =>
     tbColumns.map((column) => {
+        const fabricProps = fabricColumnProps[column.name];
         return {
             key: column.name!,
             name: column.label,
@@ -51,6 +55,7 @@ const mapToFabricColumns = (tbColumns: ColumnModel[]): Partial<IColumn>[] =>
                 column.sortDirection !== ColumnSortDirection.None
                     ? column.sortDirection === ColumnSortDirection.Descending
                     : false,
+            ...fabricProps,
         };
     });
 
@@ -60,6 +65,13 @@ const useTbFabric = (
     tubularOptions?: Partial<ITbOptions>,
 ): ITbFabricInstance => {
     const { deps, ...rest } = tubularOptions;
+    const fabricColumnProps: { [key: string]: Partial<TbSupportedIColumnProps> } = {};
+    initColumns.forEach((element) => {
+        fabricColumnProps[element.name] = {
+            maxWidth: element.maxWidth,
+            minWidth: element.minWidth,
+        };
+    });
     const tbColumns = React.useMemo(() => createInitialTbColumns(initColumns), [initColumns]);
     const { state: tbState, api: tbApi } = useTubular(tbColumns, source, rest);
     const [list, setListState] = React.useState({
@@ -248,7 +260,11 @@ const useTbFabric = (
     };
 
     const filteredFabricColumns = React.useMemo(
-        () => mapToFabricColumns(tbState.columns.filter((c) => c.visible)),
+        () =>
+            mapToFabricColumns(
+                tbState.columns.filter((c) => c.visible),
+                fabricColumnProps,
+            ),
         [tbState.columns],
     );