fix(table): update types in table (#3296)

update/align onSelect event type from React.MouseEvent and React.ChangeEvent<HTMLInputElement> to React.FormEvent<HTMLInputElement>
clear todo and tslint error in selectable transform
types for ICustomCell and ISelectTransform
clear noImplicitAny errors for Table

Author: seanforyou23

packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableActionsDemo.tsx

@@ -50,7 +50,7 @@ export class TableActionsDemo extends React.Component<TableProps, TableState> {
 
   actionResolver(rowData: IRowData, { rowIndex }: IExtra) {
     if (rowIndex === 1) {
-      return null;
+      return [];
     }
 
     const thirdAction: IActions =

packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSelectableDemo.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Table, TableHeader, TableBody, TableProps, headerCol, ICell, IRow } from '@patternfly/react-table';
 import { Checkbox } from '@patternfly/react-core';
+import '@patternfly/patternfly/utilities/Spacing/spacing.css';
 
 interface TableState {
   columns: (ICell | string)[];
@@ -36,9 +37,10 @@ export class TableSelectableDemo extends React.Component<TableProps, TableState>
       canSelectAll: true
     };
     this.onSelect = this.onSelect.bind(this);
+    this.toggleSelect = this.toggleSelect.bind(this);
   }
 
-  onSelect(event: React.MouseEvent, isSelected: boolean, rowId: number) {
+  onSelect(event: React.FormEvent, isSelected: boolean, rowId: number) {
     let rows: IRow[];
     if (rowId === -1) {
       rows = this.state.rows.map(oneRow => {
@@ -65,28 +67,29 @@ export class TableSelectableDemo extends React.Component<TableProps, TableState>
   }
 
   render() {
-    const { columns, rows } = this.state;
+    const { columns, rows, canSelectAll } = this.state;
 
     return (
       <div>
+        <Checkbox
+          label="Can select all"
+          className="pf-u-mb-lg"
+          isChecked={canSelectAll}
+          onChange={this.toggleSelect}
+          aria-label="toggle select all checkbox"
+          id="toggle-select-all"
+          name="toggle-select-all"
+        />
         <Table
-          caption="Selectable Table"
           onSelect={this.onSelect}
+          canSelectAll={canSelectAll}
+          caption="Selectable Table"
           cells={columns}
           rows={rows}
-          canSelectAll={this.state.canSelectAll}
         >
           <TableHeader />
           <TableBody />
         </Table>
-        <Checkbox
-          label="canSelectAll"
-          isChecked={this.state.canSelectAll}
-          onChange={this.toggleSelect}
-          aria-label="toggle select all checkbox"
-          id="toggle-select-all"
-          name="toggle-select-all"
-        />
       </div>
     );
   }

packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSimpleActionsDemo.tsx

@@ -43,7 +43,7 @@ export class TableSimpleActionsDemo extends React.Component<TableProps, ITableSt
         },
         {
           isSeparator: true,
-          onClick: null
+          onClick: () => {}
         },
         {
           title: 'Third action',

packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSimpleDemo.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { Table, TableHeader, TableBody, TableProps, textCenter, ICell, IRow } from '@patternfly/react-table';
 
-export class TableSimpleDemo extends React.Component<TableProps, { columns: (ICell | string)[]; rows: IRow[] }> {
+export class TableSimpleDemo extends React.Component<
+  TableProps,
+  { columns: (ICell | string)[]; rows: (IRow | string[])[] }
+> {
   constructor(props: TableProps) {
     super(props);
     this.state = {
@@ -17,25 +20,31 @@ export class TableSimpleDemo extends React.Component<TableProps, { columns: (ICe
         }
       ],
       rows: [
-        ['one', 'two', 'three', 'four', 'five'],
-        [
-          {
-            title: <div>one - 2</div>,
-            props: { title: 'hover title', colSpan: 3 }
-          },
-          'four - 2',
-          'five - 2'
-        ],
-        [
-          'one - 3',
-          'two - 3',
-          'three - 3',
-          'four - 3',
-          {
-            title: 'five - 3 (not centered)',
-            props: { textCenter: false }
-          }
-        ]
+        {
+          cells: ['one', 'two', 'three', 'four', 'five']
+        },
+        {
+          cells: [
+            {
+              title: <div>one - 2</div>,
+              props: { title: 'hover title', colSpan: 3 }
+            },
+            'four - 2',
+            'five - 2'
+          ]
+        },
+        {
+          cells: [
+            'one - 3',
+            'two - 3',
+            'three - 3',
+            'four - 3',
+            {
+              title: 'five - 3 (not centered)',
+              props: { textCenter: false }
+            }
+          ]
+        }
       ]
     };
   }

packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSortableForCompoundExpandableDemo.tsx

@@ -9,7 +9,8 @@ import {
   SortByDirection,
   ICell,
   IRow,
-  ISortBy
+  ISortBy,
+  TableProps
 } from '@patternfly/react-table';
 
 export interface DemoSortableTableProps {
@@ -20,18 +21,27 @@ export interface DemoSortableTableProps {
   id?: string;
 }
 
-export class DemoSortableTable extends React.Component<DemoSortableTableProps> {
-  state = {
-    columns: [
-      { title: 'Repositories', transforms: [sortable] },
-      'Branches',
-      { title: 'Pull requests', transforms: [sortable] },
-      'Workspaces',
-      'Last Commit'
-    ],
-    rows: [this.props.firstColumnRows, ['a', 'two', 'k', 'four', 'five'], ['p', 'two', 'b', 'four', 'five']],
-    sortBy: {}
-  };
+interface DemoSortableTableState {
+  rows: (IRow | string[])[];
+  columns: (ICell | string)[];
+  sortBy: ISortBy;
+}
+
+export class DemoSortableTable extends React.Component<DemoSortableTableProps, DemoSortableTableState> {
+  constructor(props: TableProps) {
+    super(props);
+    this.state = {
+      columns: [
+        { title: 'Repositories', transforms: [sortable] },
+        'Branches',
+        { title: 'Pull requests', transforms: [sortable] },
+        'Workspaces',
+        'Last Commit'
+      ],
+      rows: [this.props.firstColumnRows, ['a', 'two', 'k', 'four', 'five'], ['p', 'two', 'b', 'four', 'five']],
+      sortBy: {}
+    };
+  }
 
   onSort = (_event: React.MouseEvent, index: number, direction: SortByDirection) => {
     const sortedRows = this.state.rows.sort((a, b) => {

packages/react-table/src/components/Table/SelectColumn.tsx

@@ -4,14 +4,14 @@ export interface SelectColumnProps {
   name?: string;
   children?: React.ReactNode;
   className?: string;
-  onSelect?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onSelect?: (event: React.FormEvent<HTMLInputElement>) => void;
 }
 
 export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
   children = null as React.ReactNode,
-  onSelect = null as (event: React.ChangeEvent<HTMLInputElement>) => void,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className,
+  onSelect = null as (event: React.FormEvent<HTMLInputElement>) => void,
   ...props
 }: SelectColumnProps) => (
   <React.Fragment>

packages/react-table/src/components/Table/Table.md

@@ -430,22 +430,28 @@ class SelectableTable extends React.Component {
   }
 
   render() {
-    const { columns, rows } = this.state;
+    const { columns, rows, canSelectAll } = this.state;
 
     return (
       <div>
-      <Table aria-label="Selectable Table" onSelect={this.onSelect} cells={columns} rows={rows} canSelectAll={this.state.canSelectAll}>
-        <TableHeader />
-        <TableBody />
-      </Table>
-      <Checkbox
-        label="canSelectAll"
-        isChecked={this.state.canSelectAll}
-        onChange={this.toggleSelect}
-        aria-label="toggle select all checkbox"
-        id="toggle-select-all"
-        name="toggle-select-all"
-      />
+        <Checkbox
+          label="Can select all"
+          className="pf-u-mb-lg"
+          isChecked={canSelectAll}
+          onChange={this.toggleSelect}
+          aria-label="toggle select all checkbox"
+          id="toggle-select-all"
+          name="toggle-select-all"
+          />
+        <Table
+          onSelect={this.onSelect}
+          canSelectAll={canSelectAll}
+          aria-label="Selectable Table"
+          cells={columns}
+          rows={rows}>
+          <TableHeader />
+          <TableBody />
+        </Table>
       </div>
     );
   }

packages/react-table/src/components/Table/Table.test.tsx

@@ -244,7 +244,7 @@ test('Selectable table with selected expandable row', () => {
         parent: 0
       }
     ],
-    onSelect: (e: React.MouseEvent) => e
+    onSelect: (e: React.FormEvent<HTMLInputElement>) => e
   };
 
   const view = mount(

packages/react-table/src/components/Table/Table.tsx

@@ -60,7 +60,7 @@ export type OnExpand = (
   extraData: IExtraData
 ) => void;
 export type OnSelect = (
-  event: React.MouseEvent,
+  event: React.FormEvent<HTMLInputElement>,
   isSelected: boolean,
   rowIndex: number,
   rowData: IRowData,

packages/react-table/src/components/Table/utils/decorators/selectable.tsx

@@ -27,13 +27,12 @@ export const selectable: ITransform = (
   const rowId = rowIndex !== undefined ? rowIndex : -1;
 
   /**
-   * @param {React.ChangeEvent} event - React change event
+   * @param {React.FormEvent} event - React form event
    */
-  function selectClick(event: React.ChangeEvent<HTMLInputElement>) {
-    const selected = rowIndex === undefined ? event.target.checked : rowData && !rowData.selected;
-    // todo: change event type to React.FormEvent<HTMLInputElement> in the future, breaking change a.t.m.
+  function selectClick(event: React.FormEvent<HTMLInputElement>) {
+    const selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected;
     // tslint:disable-next-line:no-unused-expression
-    onSelect && onSelect((event as unknown) as React.MouseEvent, selected, rowId, rowData, extraData);
+    onSelect && onSelect(event, selected, rowId, rowData, extraData);
   }
   const customProps = {
     ...(rowId !== -1