@@ -96,7 +113,7 @@ class ContextBody extends React.Component {
const TableBody = props => (
- {({ headerData, rows }) => }
+ {({ headerData, rows }) => }
);
diff --git a/packages/patternfly-4/react-table/src/components/Table/RowWrapper.d.ts b/packages/patternfly-4/react-table/src/components/Table/RowWrapper.d.ts
new file mode 100644
index 00000000000..f0b070b1e55
--- /dev/null
+++ b/packages/patternfly-4/react-table/src/components/Table/RowWrapper.d.ts
@@ -0,0 +1,16 @@
+import { UIEventHandler } from 'react';
+
+export interface RowWrapperRow {
+ isOpen: Boolean;
+ isExpanded: Boolean;
+}
+
+export interface RowWrapper {
+ trRef?: Function;
+ onScroll?: UIEventHandler;
+ onResize?: UIEventHandler;
+ row?: RowWrapperRow;
+ rowProps?: Object;
+}
+
+export default RowWrapper;
diff --git a/packages/patternfly-4/react-table/src/components/Table/RowWrapper.js b/packages/patternfly-4/react-table/src/components/Table/RowWrapper.js
index fb26feb314b..6cbd20df65a 100644
--- a/packages/patternfly-4/react-table/src/components/Table/RowWrapper.js
+++ b/packages/patternfly-4/react-table/src/components/Table/RowWrapper.js
@@ -1,24 +1,103 @@
import React from 'react';
import PropTypes from 'prop-types';
+import { debounce } from '@patternfly/react-core';
import styles from '@patternfly/patternfly/components/Table/table.css';
import { css } from '@patternfly/react-styles';
-const RowWrapper = ({ isOpen, isExpanded, ...props }) => (
- |
-);
+class RowWrapper extends React.Component {
+ constructor(props) {
+ super(props);
+
+ if (props.onScroll) {
+ this.handleScroll = debounce(this.handleScroll, 100);
+ }
+ if (props.onResize) {
+ this.handleResize = debounce(this.handleResize, 100);
+ }
+ }
+
+ componentDidMount() {
+ this._unmounted = false;
+
+ if (this.props.onScroll) {
+ window.addEventListener('scroll', this.handleScroll);
+ }
+ if (this.props.onResize) {
+ window.addEventListener('resize', this.handleResize);
+ }
+ }
+
+ componentWillUnmount() {
+ this._unmounted = true;
+
+ if (this.props.onScroll) {
+ window.removeEventListener('scroll', this.handleScroll);
+ }
+ if (this.props.onResize) {
+ window.removeEventListener('resize', this.handleResize);
+ }
+ }
+
+ handleScroll = event => {
+ if (!this._unmounted) {
+ this.props.onScroll(event);
+ }
+ };
+
+ handleResize = event => {
+ if (!this._unmounted) {
+ this.props.onResize(event);
+ }
+ };
+
+ render() {
+ const {
+ trRef,
+ className,
+ onScroll,
+ onResize,
+ row: { isExpanded },
+ rowProps,
+ ...props
+ } = this.props;
+
+ return (
+ |
+ );
+ }
+}
RowWrapper.propTypes = {
- isOpen: PropTypes.bool,
- isExpanded: PropTypes.bool
+ trRef: PropTypes.func,
+ className: PropTypes.string,
+ onScroll: PropTypes.func,
+ onResize: PropTypes.func,
+ row: PropTypes.shape({
+ isOpen: PropTypes.bool,
+ isExpanded: PropTypes.bool
+ }),
+ rowProps: PropTypes.object
};
RowWrapper.defaultProps = {
- isOpen: undefined,
- isExpanded: undefined
+ trRef: undefined,
+ className: '',
+ onScroll: undefined,
+ onResize: undefined,
+ row: {
+ isOpen: undefined,
+ isExpanded: undefined
+ },
+ rowProps: null
};
export default RowWrapper;
diff --git a/packages/patternfly-4/react-table/src/components/Table/RowWrapper.test.js b/packages/patternfly-4/react-table/src/components/Table/RowWrapper.test.js
new file mode 100644
index 00000000000..08b3f3fa5ee
--- /dev/null
+++ b/packages/patternfly-4/react-table/src/components/Table/RowWrapper.test.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import RowWrapper from './RowWrapper';
+
+const getRowWrapper = props => (
+
+);
+
+describe('RowWrapper', () => {
+ test('renders correctly', () => {
+ const trRef = jest.fn();
+ const view = mount(getRowWrapper({ onScroll: jest.fn(), onResize: jest.fn(), trRef }));
+ expect(view).toMatchSnapshot();
+ expect(trRef.mock.calls).toHaveLength(1);
+ });
+ test('renders expanded correctly', () => {
+ const view = mount(getRowWrapper({ row: { isExpanded: true } }));
+ expect(view).toMatchSnapshot();
+ });
+});
diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.d.ts b/packages/patternfly-4/react-table/src/components/Table/Table.d.ts
index f77bcebd135..00db3aad6f3 100644
--- a/packages/patternfly-4/react-table/src/components/Table/Table.d.ts
+++ b/packages/patternfly-4/react-table/src/components/Table/Table.d.ts
@@ -26,14 +26,18 @@ export interface IColumn {
}
}
+export interface IExtraRowData {
+ rowIndex: number;
+ rowKey?: string;
+}
+
export interface IExtraColumnData {
columnIndex: number,
column: IColumn,
property: string,
}
-export interface IExtraData extends IExtraColumnData {
- rowIndex: number
+export interface IExtraData extends IExtraColumnData, IExtraRowData {
}
export interface IExtra extends IExtraData {
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 ba41eb1bea2..3a1a4d58cd4 100644
--- a/packages/patternfly-4/react-table/src/components/Table/Table.js
+++ b/packages/patternfly-4/react-table/src/components/Table/Table.js
@@ -51,8 +51,12 @@ const propTypes = {
),
/** Function should resolve an array of actions for each row in the same format as actions. */
actionResolver: PropTypes.func,
- /** Function should resolve if action is disabled for each row */
+ /** Function should resolve if action kebap is disabled for each row */
areActionsDisabled: PropTypes.func,
+ /** Override to the default BodyWrapper renderer */
+ bodyWrapper: PropTypes.func,
+ /** Override to the default RowWrapper renderer */
+ rowWrapper: PropTypes.func,
/** Actual rows to display in table. Either array of strings or row objects.
* If you want to use components in row cells you can pass them as title prop in cells definition.
* Ex: rows:[
@@ -188,6 +192,8 @@ class Table extends React.Component {
variant,
rows,
cells,
+ bodyWrapper,
+ rowWrapper,
...props
} = this.props;
@@ -220,8 +226,8 @@ class Table extends React.Component {
{...props}
renderers={{
body: {
- wrapper: BodyWrapper,
- row: RowWrapper,
+ wrapper: bodyWrapper || BodyWrapper,
+ row: rowWrapper || RowWrapper,
cell: BodyCell
},
header: {
diff --git a/packages/patternfly-4/react-table/src/components/Table/__snapshots__/RowWrapper.test.js.snap b/packages/patternfly-4/react-table/src/components/Table/__snapshots__/RowWrapper.test.js.snap
new file mode 100644
index 00000000000..9103b6971ca
--- /dev/null
+++ b/packages/patternfly-4/react-table/src/components/Table/__snapshots__/RowWrapper.test.js.snap
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RowWrapper renders correctly 1`] = `
+
+
+ ,
+ ],
+ ],
+ "results": Array [
+ Object {
+ "isThrow": false,
+ "value": undefined,
+ },
+ ],
+ }
+ }
+ >
+ |
+
+
+
+`;
+
+exports[`RowWrapper renders expanded correctly 1`] = `
+.pf-c-table__expandable-row.pf-m-expanded {
+ display: block;
+ position: relative;
+ border-bottom: 0 solid transparent;
+ box-shadow: 0 0.3125rem 0.625rem -0.25rem rgba(3, 3, 3, 0.25);
+ transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
+ border-bottom-color: #ededed;
+ border-bottom-width: 1px;
+}
+
+
+`;
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 d1e102a80b7..734b9b0008c 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
@@ -463,6 +463,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -503,6 +504,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -542,6 +544,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -581,6 +584,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -620,6 +624,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -660,6 +665,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -745,6 +751,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -785,6 +792,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -824,6 +832,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -863,6 +872,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -902,6 +912,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -942,6 +953,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -1128,6 +1140,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -1168,6 +1181,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -1207,6 +1221,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -1246,6 +1261,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -1285,6 +1301,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -1325,6 +1342,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -1472,6 +1490,10 @@ exports[`Actions table 1`] = `
},
"id": 0,
"isExpanded": undefined,
+ "isFirst": true,
+ "isFirstVisible": true,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -1513,6 +1535,10 @@ exports[`Actions table 1`] = `
},
"id": 1,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -1554,6 +1580,10 @@ exports[`Actions table 1`] = `
},
"id": 2,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -1595,6 +1625,10 @@ exports[`Actions table 1`] = `
},
"id": 3,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -1636,6 +1670,10 @@ exports[`Actions table 1`] = `
},
"id": 4,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -1677,6 +1715,10 @@ exports[`Actions table 1`] = `
},
"id": 5,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -1718,6 +1760,10 @@ exports[`Actions table 1`] = `
},
"id": 6,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -1759,6 +1805,10 @@ exports[`Actions table 1`] = `
},
"id": 7,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -1800,6 +1850,10 @@ exports[`Actions table 1`] = `
},
"id": 8,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": true,
+ "isLastVisible": true,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -1847,6 +1901,10 @@ exports[`Actions table 1`] = `
},
"id": 0,
"isExpanded": undefined,
+ "isFirst": true,
+ "isFirstVisible": true,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -1888,6 +1946,10 @@ exports[`Actions table 1`] = `
},
"id": 1,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -1929,6 +1991,10 @@ exports[`Actions table 1`] = `
},
"id": 2,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -1970,6 +2036,10 @@ exports[`Actions table 1`] = `
},
"id": 3,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2011,6 +2081,10 @@ exports[`Actions table 1`] = `
},
"id": 4,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2052,6 +2126,10 @@ exports[`Actions table 1`] = `
},
"id": 5,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2093,6 +2171,10 @@ exports[`Actions table 1`] = `
},
"id": 6,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2134,6 +2216,10 @@ exports[`Actions table 1`] = `
},
"id": 7,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2175,6 +2261,10 @@ exports[`Actions table 1`] = `
},
"id": 8,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": true,
+ "isLastVisible": true,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2223,6 +2313,10 @@ exports[`Actions table 1`] = `
},
"id": 0,
"isExpanded": undefined,
+ "isFirst": true,
+ "isFirstVisible": true,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2264,6 +2358,10 @@ exports[`Actions table 1`] = `
},
"id": 1,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2305,6 +2403,10 @@ exports[`Actions table 1`] = `
},
"id": 2,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2346,6 +2448,10 @@ exports[`Actions table 1`] = `
},
"id": 3,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2387,6 +2493,10 @@ exports[`Actions table 1`] = `
},
"id": 4,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2428,6 +2538,10 @@ exports[`Actions table 1`] = `
},
"id": 5,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2469,6 +2583,10 @@ exports[`Actions table 1`] = `
},
"id": 6,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2510,6 +2628,10 @@ exports[`Actions table 1`] = `
},
"id": 7,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2551,6 +2673,10 @@ exports[`Actions table 1`] = `
},
"id": 8,
"isExpanded": undefined,
+ "isFirst": false,
+ "isFirstVisible": false,
+ "isLast": true,
+ "isLastVisible": true,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2590,6 +2716,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -2630,6 +2757,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -2669,6 +2797,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -2708,6 +2837,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -2747,6 +2877,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -2787,6 +2918,7 @@ exports[`Actions table 1`] = `
[Function],
],
},
+ "data": undefined,
"extraParams": Object {
"actionResolver": [Function],
"actions": undefined,
@@ -2852,6 +2984,10 @@ exports[`Actions table 1`] = `
},
"id": 0,
"isExpanded": undefined,
+ "isFirst": true,
+ "isFirstVisible": true,
+ "isLast": false,
+ "isLastVisible": false,
"last-commit": Object {
"props": Object {
"isVisible": true,
@@ -2876,12 +3012,66 @@ exports[`Actions table 1`] = `
rowKey="0-row"
>