From d5fe031126e9d39a7f23bfd05190b0ba6dfe1410 Mon Sep 17 00:00:00 2001
From: Karel Hala
Date: Tue, 19 Feb 2019 13:21:58 +0100
Subject: [PATCH] fix(Table): Pass calculated rows to body wrapper to eliminate
re-renders
---
.../react-table/src/components/Table/Body.js | 2 +-
.../src/components/Table/BodyWrapper.js | 43 +-
.../react-table/src/components/Table/Table.js | 2 +-
.../Table/__snapshots__/Table.test.js.snap | 11175 +++++++++++++++-
4 files changed, 10793 insertions(+), 429 deletions(-)
diff --git a/packages/patternfly-4/react-table/src/components/Table/Body.js b/packages/patternfly-4/react-table/src/components/Table/Body.js
index e79f76215b2..1893b0adc2c 100644
--- a/packages/patternfly-4/react-table/src/components/Table/Body.js
+++ b/packages/patternfly-4/react-table/src/components/Table/Body.js
@@ -70,7 +70,7 @@ class ContextBody extends React.Component {
}));
return (
- {mappedRows && }
+ {mappedRows && }
)
}
diff --git a/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js b/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js
index fa0595d03b3..dfd626e4ddc 100644
--- a/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js
+++ b/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js
@@ -2,30 +2,35 @@ import React, { Component, Children, Fragment } from 'react';
import styles from '@patternfly/patternfly/components/Table/table.css';
import { css } from '@patternfly/react-styles';
import { mapOpenedRows } from './utils/headerUtils';
+import PropTypes from 'prop-types';
-const BodyWrapper = (rows, onCollapse) => {
- class TableBody extends Component {
- render() {
- if (onCollapse) {
- return (
-
- {mapOpenedRows(rows, Children.toArray(this.props.children)).map((oneRow, key) => (
-
- {oneRow.rows}
-
- ))}
-
- )
- }
+class BodyWrapper extends Component {
+ render() {
+ const { mappedRows, ...props } = this.props;
+ if (mappedRows.some(row => row.hasOwnProperty('isOpen'))) {
return (
- row.isOpen && !row.hasOwnProperty('parent')) && styles.modifiers.expanded
- )} />
+
+ {mapOpenedRows(mappedRows, this.props.children).map((oneRow, key) => (
+
+ {oneRow.rows}
+
+ ))}
+
)
}
- };
+ return (
+
+ )
+ }
+}
+
+BodyWrapper.propTypes = {
+ rows: PropTypes.array,
+ onCollapse: PropTypes.func
+}
- return TableBody;
+BodyWrapper.defaultProps = {
+ rows: []
}
export default BodyWrapper;
diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.js b/packages/patternfly-4/react-table/src/components/Table/Table.js
index 5c142c9095c..2163fa285c2 100644
--- a/packages/patternfly-4/react-table/src/components/Table/Table.js
+++ b/packages/patternfly-4/react-table/src/components/Table/Table.js
@@ -202,7 +202,7 @@ class Table extends React.Component {
{...props}
renderers={{
body: {
- wrapper: BodyWrapper(rows, onCollapse),
+ wrapper: BodyWrapper,
row: RowWrapper,
cell: BodyCell
},
diff --git a/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap b/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap
index 23799383edb..624db856edc 100644
--- a/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap
+++ b/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap
@@ -1737,6 +1737,370 @@ exports[`Actions table 1`] = `
>
-
-
+
@@ -8991,6 +9721,370 @@ exports[`Cell header table 1`] = `
>
-
-
+
@@ -13583,6 +15043,379 @@ exports[`Collapsible nested table 1`] = `
>
-
-
+
@@ -18899,6 +21112,376 @@ exports[`Collapsible table 1`] = `
>
+
-
-
+
@@ -23858,6 +26819,379 @@ exports[`Header width table 1`] = `
>
+
-
+
+
+
+
+
+
+
+
+
+
-
+
@@ -28442,6 +32182,379 @@ exports[`Selectable table 1`] = `
>
+
-
+
+
+
+
+
+
+
+
+
+
-
+
@@ -33216,6 +37735,370 @@ exports[`Simple table aria-label 1`] = `
>
-
-
+
@@ -37376,6 +42625,370 @@ exports[`Simple table caption 1`] = `
>
-
-
+
@@ -41540,6 +47519,370 @@ exports[`Simple table header 1`] = `
>
-
-
+
@@ -45793,6 +52502,370 @@ exports[`Sortable table 1`] = `
>
-
-
+
@@ -50053,6 +57492,370 @@ exports[`Table variants Breakpoint - grid 1`] = `
>
-
-
+
@@ -54313,6 +62482,370 @@ exports[`Table variants Breakpoint - grid-lg 1`] = `
>
-
-
+
@@ -58573,6 +67472,370 @@ exports[`Table variants Breakpoint - grid-md 1`] = `
>
-
-
+
@@ -62833,6 +72462,370 @@ exports[`Table variants Size - compact 1`] = `
>
-
-
+