feat(typing): add missing item metadata interface (#299)

* feat(typing): add missing item metadata interface

* refactor: fix build error with typings

* refactor: fix example typing issue
- nonetheless, tsc seems to be doing something wrong here, it should infer that '*' is valid, we'll have to check back in future version of tsc

packages/common/src/interfaces/gridOption.interface.ts

@@ -22,6 +22,7 @@ import {
   GridState,
   HeaderButton,
   HeaderMenu,
+  ItemMetadata,
   Locale,
   Pagination,
   RowDetailView,
@@ -117,7 +118,7 @@ export interface GridOption {
   createFooterRow?: boolean;
 
   /** A callback function that will be used to define row spanning accross multiple columns */
-  colspanCallback?: (item: any) => { columns: any };
+  colspanCallback?: (item: any) => ItemMetadata;
 
   /** Default to false, which leads to create an extra pre-header panel (on top of column header) for column grouping purposes */
   createPreHeaderPanel?: boolean;

packages/common/src/interfaces/groupItemMetadataProviderOption.interface.ts

@@ -1,20 +1,50 @@
-import { FormatterResultObject } from './formatterResultObject.interface';
+import { Formatter } from './formatter.interface';
+import { GroupTotalsFormatter } from './groupTotalsFormatter.interface';
 import { SlickCheckboxSelectColumn } from './slickCheckboxSelectColumn.interface';
 
 export interface GroupItemMetadataProviderOption {
+  /** Whether or not we want to use group select checkbox. */
   checkboxSelect: boolean;
+
+  /** Defaults to "slick-group-select-checkbox" */
   checkboxSelectCssClass: string;
+
+  /** Plugin to select row(s) via checkboxes typically shown as the 1st column in the grid. */
   checkboxSelectPlugin: SlickCheckboxSelectColumn;
+
+  /** Defaults to "slick-group" */
   groupCssClass: string;
+
+  /** Defaults to "slick-group-title" */
   groupTitleCssClass: string;
+
+  /** Defaults to "slick-group-totals" */
   totalsCssClass: string;
+
+  /** Whether or not the group is focusable. */
   groupFocusable: boolean;
+
+  /** Whether or not the group totals is focusable. */
   totalsFocusable: boolean;
+
+  /** Defaults to "slick-group-toggle" */
   toggleCssClass: string;
+
+  /** Defaults to "expanded" */
   toggleExpandedCssClass: string;
+
+  /** Defaults to "collapsed" */
   toggleCollapsedCssClass: string;
+
+  /** Whether or not we want to enable the group expanding/collapsing */
   enableExpandCollapse: boolean;
-  groupFormatter: HTMLElement,
-  totalsFormatter: string | FormatterResultObject;
+
+  /** A custom group cell formatter. */
+  groupFormatter: Formatter;
+
+  /** A custom total formatter. */
+  totalsFormatter: GroupTotalsFormatter;
+
+  /** Whether or not we want to include header totals */
   includeHeaderTotals: boolean;
 }

packages/common/src/interfaces/index.ts

@@ -92,6 +92,7 @@ export * from './headerMenu.interface';
 export * from './headerMenuOption.interface';
 export * from './hideColumnOption.interface';
 export * from './htmlElementPosition.interface';
+export * from './itemMetadata.interface';
 export * from './jQueryUiSliderOption.interface';
 export * from './jQueryUiSliderResponse.interface';
 export * from './keyTitlePair.interface';

packages/common/src/interfaces/itemMetadata.interface.ts

@@ -0,0 +1,44 @@
+import { Editor, Formatter, GroupTotalsFormatter } from './index';
+
+/**
+ * Provides a powerful way of specifying additional information about a data item that let the grid customize the appearance
+ * and handling of a particular data item. The method should return null if the item requires no special handling,
+ * or an object following the ItemMetadata interface
+ */
+export interface ItemMetadata {
+  // properties describing metadata related to the item (i.e. grid row) itself
+
+  /** One or more (space-separated) CSS classes to be added to the entire row. */
+  cssClasses?: string;
+
+  /** Whether or not any cells in the row can be set as "active". */
+  focusable?: boolean;
+
+  /** A custom group formatter. */
+  formatter?: GroupTotalsFormatter;
+
+  /** Whether or not a row or any cells in it can be selected. */
+  selectable?: boolean;
+
+  /** column-level metadata */
+  columns?: {
+    // properties describing metadata related to individual columns
+
+    [colIdOrIdx in string | number]: {
+      /** Number of columns this cell will span. Can also contain "*" to indicate that the cell should span the rest of the row. */
+      colspan?: number | string | '*';
+
+      /** A custom cell editor. */
+      editor?: Editor | null;
+
+      /** Whether or not a cell can be set as "active". */
+      focusable?: boolean;
+
+      /** A custom cell formatter. */
+      formatter?: Formatter | GroupTotalsFormatter;
+
+      /** Whether or not a cell can be selected. */
+      selectable?: boolean;
+    }
+  }
+}

packages/common/src/interfaces/slickDataView.interface.ts

@@ -1,11 +1,14 @@
-import { Grouping } from './grouping.interface';
-import { PagingInfo } from './pagingInfo.interface';
-import { SlickEvent } from './slickEvent.interface';
-import { SlickGrid } from './slickGrid.interface';
+import {
+  Grouping,
+  ItemMetadata,
+  PagingInfo,
+  SlickEvent,
+  SlickGrid
+} from './index';
 
 export interface SlickDataView {
   // --
-  // Available Methods
+  // Slick DataView Available Methods
 
   /** Add an item to the DataView */
   addItem(item: any): void;
@@ -99,7 +102,7 @@ export interface SlickDataView {
   getItemCount(): number;
 
   /** Get item metadata at specific index */
-  getItemMetadata(index: number): any;
+  getItemMetadata(index: number): ItemMetadata | null;
 
   /** Get row count (rows in displayed current page) */
   getLength(): number;
@@ -149,7 +152,7 @@ export interface SlickDataView {
   /** Set some Grouping */
   setGrouping(groupingInfo: Grouping | Grouping[]): void;
 
-  /** Set a Filter that:  will be used by the DataView */
+  /** Set a Filter that will be used by the DataView */
   // eslint-disable-next-line @typescript-eslint/ban-types
   setFilter(filterFn: Function): void;
 
@@ -159,6 +162,7 @@ export interface SlickDataView {
   /** Set Paging Options */
   setPagingOptions(args: Partial<PagingInfo>): void;
 
+  /** Set Refresh Hints */
   setRefreshHints(hints: any): void;
 
   /** Set extra Filter arguments which will be used by the Filter method */

packages/common/src/interfaces/slickGroupItemMetadataProvider.interface.ts

@@ -1,5 +1,5 @@
 import { GroupItemMetadataProviderOption } from './groupItemMetadataProviderOption.interface';
-import { GroupTotalsFormatter } from './groupTotalsFormatter.interface';
+import { ItemMetadata } from './itemMetadata.interface';
 import { SlickGrid } from './slickGrid.interface';
 
 /**
@@ -14,7 +14,7 @@ import { SlickGrid } from './slickGrid.interface';
 export interface SlickGroupItemMetadataProvider {
 
   /** Constructor of the Slick 3rd party plugin, it can optionally receive options */
-  constructor: (options?: GroupItemMetadataProviderOption) => void;
+  constructor: (options?: Partial<GroupItemMetadataProviderOption>) => void;
 
   /** Initialize the SlickGrid 3rd party plugin */
   init(grid: SlickGrid): void;
@@ -23,28 +23,10 @@ export interface SlickGroupItemMetadataProvider {
   destroy(): void;
 
   /** Get the Group Row Metadata information */
-  getGroupRowMetadata: (item: any) => {
-    selectable: false;
-    focusable: boolean;
-    cssClasses: string;
-    formatter: GroupTotalsFormatter;
-    columns: {
-      0: {
-        colspan: string;
-        formatter: GroupTotalsFormatter;
-        editor: null
-      }
-    }
-  };
+  getGroupRowMetadata: (item: any) => ItemMetadata;
 
   /** Get the Totals Row Metadata information */
-  getTotalsRowMetadata: (item: any) => {
-    selectable: false;
-    focusable: boolean;
-    cssClasses: string;
-    formatter: GroupTotalsFormatter;
-    editor: null
-  };
+  getTotalsRowMetadata: (item: any) => Omit<ItemMetadata, 'columns'>;
 
   /** Get the options defined for the GroupItemMetadataProvider */
   getOptions: () => GroupItemMetadataProviderOption;