chore(table): add types, examples, and demo for onRowClick

provide type for onRowClick handler add onRowClick example to docs add onRowClick test for table add on row click demo in react-integration clean up customRowWrapper demo/example only fire onRowClick when it is provided by user
patternfly · Nov 5, 2019 · 3fb644b · 3fb644b
1 parent 2c8ea98
commit 3fb644b
Show file tree

Hide file tree

Showing 9 changed files with 9,216 additions and 43 deletions.
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts b/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts
@@ -522,6 +522,11 @@ export const Demos: DemoInterface[] = [
     name: 'Table Row Wrapper Demo',
     componentType: Examples.TableRowWrapperDemo
   },
+  {
+    id: 'table-row-click-demo',
+    name: 'Table Row Click Demo',
+    componentType: Examples.TableRowClickDemo
+  },
   {
     id: 'table-selectable-demo',
     name: 'Table Selectable Demo',

diff --git a/...tegration/demo-app-ts/src/components/demos/TableDemo/RowWrapperForTableRowWrapperDemo.tsx b/...tegration/demo-app-ts/src/components/demos/TableDemo/RowWrapperForTableRowWrapperDemo.tsx
diff --git a/...nfly-4/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx b/...nfly-4/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  IRow,
+  IExtraRowData,
+  IComputedData,
+  TableProps,
+  ICell
+} from '@patternfly/react-table';
+
+interface ITableRowClickDemoState {
+  rows: IRow[];
+  columns: (ICell | string)[];
+}
+
+export class TableRowClickDemo extends React.Component<TableProps, ITableRowClickDemoState> {
+  rowClickHandler: (event: React.MouseEvent, row: IRow, rowProps: IExtraRowData, computedData: IComputedData) => void;
+  constructor(props) {
+    super(props);
+    this.state = {
+      columns: [
+        { title: 'Repositories' },
+        'Branches',
+        { title: 'Pull requests' },
+        'Workspaces'
+      ],
+      rows: [
+        {
+          cells: ['Repositories one', 'Branches one', 'Pull requests one', 'Workspaces one']
+        },
+        {
+          cells: ['Repositories two', 'Branches two', 'Pull requests two', 'Workspaces two']
+        },
+        {
+          cells: ['Repositories three', 'Branches three', 'Pull requests three', 'Workspaces three']
+        }
+      ]
+    };
+    this.rowClickHandler = (event: React.MouseEvent, row: IRow) => {
+      console.log('handle row click', row);
+    }
+  }
+
+  render() {
+    const { columns, rows } = this.state;
+
+    return (
+      <Table caption="Row Click Handler Table" cells={columns} rows={rows}>
+        <TableHeader />
+        <TableBody onRowClick={this.rowClickHandler} />
+      </Table>
+    );
+  }
+}
diff --git a/...ly-4/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx b/...ly-4/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx
@@ -2,17 +2,19 @@ import * as React from 'react';
 import {
   Table,
   TableHeader,
-  TableBody
+  TableBody,
+  RowWrapperProps
 } from '@patternfly/react-table';
-
-import customRowWrapper from './RowWrapperForTableRowWrapperDemo';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Table/table';
 
 interface ITableRowWrapperDemoState {
   rows: any;
   columns: any;
 }
 
 export class TableRowWrapperDemo extends React.Component<any, ITableRowWrapperDemoState> {
+  customRowWrapper: (props: RowWrapperProps) => JSX.Element;
   constructor(props: any) {
     super(props);
     this.state = {
@@ -34,6 +36,34 @@ export class TableRowWrapperDemo extends React.Component<any, ITableRowWrapperDe
         }
       ]
     };
+    this.customRowWrapper = ({
+      trRef,
+      className,
+      rowProps,
+      row: { isExpanded, isHeightAuto },
+      ...props
+    }) => {
+      const isOddRow = (rowProps.rowIndex + 1) % 2;
+      const customStyle = {
+        borderLeft: '3px solid var(--pf-global--primary-color--100)'
+      };
+      return (
+        <tr
+          {...props}
+          ref={trRef as React.Ref<any>}
+          className={css(
+            className,
+            (isOddRow ? 'odd-row-class' : 'even-row-class'),
+            'custom-static-class',
+            isExpanded !== undefined && styles.tableExpandableRow,
+            isExpanded && styles.modifiers.expanded,
+            isHeightAuto && styles.modifiers.heightAuto
+          )}
+          hidden={isExpanded !== undefined && !isExpanded}
+          style={isOddRow ? customStyle : {}}
+        />
+      );
+    }
   }
 
   render() {
@@ -44,7 +74,7 @@ export class TableRowWrapperDemo extends React.Component<any, ITableRowWrapperDe
         caption="Table with custom row wrapper that styles odd rows"
         cells={columns}
         rows={rows}
-        rowWrapper={customRowWrapper}>
+        rowWrapper={this.customRowWrapper}>
         <TableHeader />
         <TableBody />
       </Table>

diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts
@@ -91,7 +91,6 @@ export * from './StackChartDemo/StackGoldBottomLegendDemo';
 export * from './StackChartDemo/StackColorZoomDemo';
 export * from './StackDemo/StackDemo';
 export * from './SwitchDemo/SwitchDemo';
-export * from './TableDemo/RowWrapperForTableRowWrapperDemo';
 export * from './TableDemo/TableActionsDemo';
 export * from './TableDemo/TableBreakpointModifiersDemo';
 export * from './TableDemo/TableCollapsibleDemo';
@@ -102,6 +101,7 @@ export * from './TableDemo/TableCompoundExpandableDemo';
 export * from './TableDemo/TableFirstCellAsHeaderDemo';
 export * from './TableDemo/TableHeadersWrappableDemo';
 export * from './TableDemo/TableRowWrapperDemo';
+export * from './TableDemo/TableRowClickDemo';
 export * from './TableDemo/TableSelectableDemo';
 export * from './TableDemo/TableSimpleActionsDemo';
 export * from './TableDemo/TableSimpleDemo';

diff --git a/packages/patternfly-4/react-table/src/components/Table/Body.tsx b/packages/patternfly-4/react-table/src/components/Table/Body.tsx
@@ -1,16 +1,21 @@
 import * as React from 'react';
 import { Body as BaseBody } from './base';
 import { RowType, RowKeyType } from './base/types';
-import { TableContext, IRow, IRowCell } from './Table';
+import { TableContext, IRow, IRowCell, IExtraRowData } from './Table';
 import { isRowExpanded } from './utils';
 
+export interface IComputedData {
+  isInput: boolean;
+  isButton: boolean;
+}
+
 export interface TableBodyProps {
   className?: string;
   children?: React.ReactNode;
   headerData?: IRow[];
   rows?: IRow[];
   rowKey?: RowKeyType;
-  onRowClick?: Function;
+  onRowClick?: (event: React.MouseEvent, row: IRow, rowProps: IExtraRowData, computedData: IComputedData) => void;
   onRow?: Function;
 }
 
@@ -37,6 +42,7 @@ class ContextBody extends React.Component<TableBodyProps, {}> {
           isInput: (event.target as HTMLElement).tagName !== 'INPUT',
           isButton: (event.target as HTMLElement).tagName !== 'BUTTON'
         };
+
         onRowClick(event, row, rowProps, computedData);
       }
     };

diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.md b/packages/patternfly-4/react-table/src/components/Table/Table.md
@@ -40,6 +40,8 @@ import {
   CodeIcon,
   CubeIcon
 } from '@patternfly/react-icons';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Table/table';
 
 import DemoSortableTable from './demo/DemoSortableTable';
 
@@ -113,13 +115,64 @@ class SimpleTable extends React.Component {
 }
 ```
 
-```js title=CustomRowWrapper
+
+```js title=Row-Click-Handler
+import React from 'react';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+} from '@patternfly/react-table';
+
+class RowClickTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      columns: [
+        { title: 'Repositories' },
+        'Branches',
+        { title: 'Pull requests' },
+        'Workspaces'
+      ],
+      rows: [
+        {
+          cells: ['Repositories one', 'Branches one', 'Pull requests one', 'Workspaces one']
+        },
+        {
+          cells: ['Repositories two', 'Branches two', 'Pull requests two', 'Workspaces two']
+        },
+        {
+          cells: ['Repositories three', 'Branches three', 'Pull requests three', 'Workspaces three']
+        }
+      ]
+    };
+    this.rowClickHandler = (event, row) => {
+      console.log('handle row click', row);
+    }
+  }
+
+  render() {
+    const { columns, rows } = this.state;
+
+    return (
+      <Table caption="Row Click Handler Table" cells={columns} rows={rows}>
+        <TableHeader />
+        <TableBody onRowClick={this.rowClickHandler} />
+      </Table>
+    );
+  }
+}
+```
+
+```js title=Custom-Row-Wrapper
 import React from 'react';
 import {
   Table,
   TableHeader,
   TableBody,
 } from '@patternfly/react-table';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Table/table';
 
 class RowWrapperTable extends React.Component {
   constructor(props) {

diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.test.tsx b/packages/patternfly-4/react-table/src/components/Table/Table.test.tsx
@@ -59,6 +59,21 @@ test('Sortable table', () => {
   expect(view).toMatchSnapshot();
 });
 
+test('Row click table', () => {
+  const rowClickHandler = jest.fn();
+  const view = mount(
+    <Table
+      aria-label="Row click table"
+      cells={columns}
+      rows={rows}
+    >
+      <TableHeader />
+      <TableBody onRowClick={rowClickHandler} />
+    </Table>
+  );
+  expect(view).toMatchSnapshot();
+});
+
 describe('Table variants', () => {
   Object.values(TableGridBreakpoint).forEach(oneBreakpoint => {
     test(`Breakpoint - ${oneBreakpoint}`, () => {