PF4 Table: Check All updates

patternfly · Feb 11, 2019 · 39bdd0f · 39bdd0f
1 parent 02ffb73
commit 39bdd0f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.js b/packages/patternfly-4/react-table/src/components/Table/Table.js
@@ -139,9 +139,29 @@ class Table extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      headerData: []
+      headerData: [],
+      allRowsSelected: props.onSelect ? this.areAllRowsSelected(props.rows) : false
     };
+    this.isSelected = this.isSelected.bind(this);
+    this.areAllRowsSelected = this.areAllRowsSelected.bind(this);
   }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.rows !== prevProps.rows) {
+      this.setState({
+        allRowsSelected: this.props.onSelect ? this.areAllRowsSelected(this.props.rows) : false
+      });
+    }
+  }
+
+  isSelected(row) {
+    return row.selected === true;
+  }
+
+  areAllRowsSelected(rows) {
+    return rows.every(this.isSelected);
+  }
+
   render() {
     const {
       caption,
@@ -165,10 +185,13 @@ class Table extends React.Component {
       ...props
     } = this.props;
 
+    const { allRowsSelected } = this.state;
+
     const headerData = calculateColumns(cells, {
       sortBy,
       onSort,
       onSelect,
+      allRowsSelected,
       actions,
       onCollapse,
       rowLabeledBy,

diff --git a/packages/patternfly-4/react-table/src/components/Table/examples/SelectableTable.js b/packages/patternfly-4/react-table/src/components/Table/examples/SelectableTable.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import { Table, TableHeader, TableBody, headerCol } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody } from '@patternfly/react-table';
 
 class SelectableTable extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
       columns: [
-        { title: 'Repositories', cellTransforms: [headerCol()] },
+        { title: 'Repositories' },
         'Branches',
         { title: 'Pull requests' },
         'Workspaces',

diff --git a/packages/patternfly-4/react-table/src/components/Table/utils/decorators/selectable.js b/packages/patternfly-4/react-table/src/components/Table/utils/decorators/selectable.js
@@ -7,7 +7,7 @@ export default (
   label,
   {
     column: {
-      extraParams: { onSelect, rowLabeledBy = 'simple-node' }
+      extraParams: { onSelect, allRowsSelected, rowLabeledBy = 'simple-node' }
     },
     rowIndex,
     rowData
@@ -21,9 +21,10 @@ export default (
     };
   }
   const rowId = rowIndex !== undefined ? rowIndex : -1;
+
   function selectClick(event) {
     const selected = rowIndex === undefined ? event.target.checked : rowData && !rowData.selected;
-    onSelect && onSelect(selected, selected, rowId);
+    onSelect && onSelect(event, selected, rowId);
   }
   const customProps = {
     ...(rowId !== -1
@@ -32,6 +33,7 @@ export default (
           'aria-labelledby': rowLabeledBy + rowIndex
         }
       : {
+          checked: allRowsSelected,
           'aria-label': 'Select all rows'
         })
   };