W.I.P. React virtualized extension

jest.config.js

@@ -1,53 +1,46 @@
 module.exports = {
   collectCoverage: true,
   clearMocks: true,
-  coverageReporters: [
-    "lcov"
-  ],
+  coverageReporters: ['lcov'],
   modulePathIgnorePatterns: [
-    "<rootDir>/packages/*.*/dist/*.*",
-    "<rootDir>/packages/*.*/public/*.*",
-    "<rootDir>/packages/*.*/.cache/*.*"
+    '<rootDir>/packages/*.*/dist/*.*',
+    '<rootDir>/packages/*.*/public/*.*',
+    '<rootDir>/packages/*.*/.cache/*.*'
   ],
   coveragePathIgnorePatterns: [
-    "<rootDir>/packages/*.*/dist/*.*",
-    "<rootDir>/packages/*.*/examples/*.*",
-    "<rootDir>/packages/*.docs.*",
-    "<rootDir>/packages/react-docs/*.*"
+    '<rootDir>/packages/*.*/dist/*.*',
+    '<rootDir>/packages/*.*/examples/*.*',
+    '<rootDir>/packages/*.docs.*',
+    '<rootDir>/packages/react-docs/*.*'
   ],
   modulePaths: [
-    "<rootDir>/**/node_modules/",
-    "<rootDir>/packages/",
-    "<rootDir>/packages/patternfly-3/",
-    "<rootDir>/packages/patternfly-4/"
-  ],
-  roots: [
-    "<rootDir>/packages"
-  ],
-  setupFiles: [
-    "./test.env.js"
+    '<rootDir>/**/node_modules/',
+    '<rootDir>/packages/',
+    '<rootDir>/packages/patternfly-3/',
+    '<rootDir>/packages/patternfly-4/'
   ],
+  roots: ['<rootDir>/packages'],
+  setupFiles: ['./test.env.js'],
   snapshotSerializers: [
-    "enzyme-to-json/serializer",
-    "<rootDir>/packages/patternfly-4/react-core/build/snapshot-serializer"
+    'enzyme-to-json/serializer',
+    '<rootDir>/packages/patternfly-4/react-core/build/snapshot-serializer'
   ],
   transform: {
-    "^.+\\.(ts|tsx)?$": "ts-jest",
-    "^.+\\.jsx?$": "babel-jest",
-    "\\.(css)$": "<rootDir>/packages/patternfly-4/react-styles/jest-transform.js"
+    '^.+\\.(ts|tsx)?$': 'ts-jest',
+    '^.+\\.jsx?$': 'babel-jest',
+    '\\.(css)$': '<rootDir>/packages/patternfly-4/react-styles/jest-transform.js'
   },
   testPathIgnorePatterns: [
-    "<rootDir>/scripts/generators/",
-    "<rootDir>/packages/patternfly-4/react-integration/"
-  ],
-  transformIgnorePatterns: [
-    "node_modules/(?!@patternfly|@novnc|tippy.js)"
+    '<rootDir>/scripts/generators/',
+    '<rootDir>/packages/patternfly-4/react-integration/',
+    '<rootDir>/node_modules/(?!lodash-es/.*)'
   ],
+  transformIgnorePatterns: ['node_modules/(?!@patternfly|@novnc|tippy.js|lodash-es)'],
   // https://github.com/kulshekhar/ts-jest/blob/master/docs/user/config/index.md
-  preset: "ts-jest/presets/js-with-babel",
+  preset: 'ts-jest/presets/js-with-babel',
   globals: {
-    "ts-jest": {
-      tsConfig: "packages/patternfly-4/react-core/tsconfig.jest.json"
+    'ts-jest': {
+      tsConfig: 'packages/patternfly-4/react-core/tsconfig.jest.json'
     }
   }
-};
+};

packages/patternfly-4/react-docs/gatsby-node.js

@@ -92,6 +92,7 @@ exports.onCreateWebpackConfig = ({ stage, actions }) => {
         '@patternfly/react-core': path.resolve(__dirname, '../react-core'),
         '@patternfly/react-icons': path.resolve(__dirname, '../../react-icons'),
         '@patternfly/react-inline-edit-extension': path.resolve(__dirname, '../react-inline-edit-extension'),
+        '@patternfly/react-virtualized-extension': path.resolve(__dirname, '../react-virtualized-extension'),
         '@patternfly/react-styled-system': path.resolve(__dirname, '../react-styled-system'),
         '@patternfly/react-styles': path.resolve(__dirname, '../react-styles'),
         '@patternfly/react-table': path.resolve(__dirname, '../react-table'),
@@ -101,4 +102,4 @@ exports.onCreateWebpackConfig = ({ stage, actions }) => {
       }
     },
   })
-};
+};

packages/patternfly-4/react-table/package.json

@@ -31,13 +31,14 @@
     "@patternfly/react-core": "^3.18.1",
     "@patternfly/react-icons": "^3.9.2",
     "@patternfly/react-styles": "^3.2.2",
-    "exenv": "^1.2.2",
-    "reactabular-table": "^8.14.0"
+    "classnames": "^2.2.5",
+    "exenv": "^1.2.2"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",
     "react": "^16.4.0",
-    "react-dom": "^15.6.2 || ^16.4.0"
+    "react-dom": "^15.6.2 || ^16.4.0",
+    "lodash-es": "4.x"
   },
   "scripts": {
     "build": "yarn build:babel && node ./scripts/copyTS.js && node ./build/copyStyles.js",

packages/patternfly-4/react-table/src/components/Table/Body.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Body } from 'reactabular-table';
+import { Body } from './base';
 import PropTypes from 'prop-types';
 import { TableContext } from './Table';
 import { isRowExpanded } from './utils';
@@ -29,10 +29,14 @@ const flagVisibility = rows => {
 
 class ContextBody extends React.Component {
   onRow = (row, rowProps) => {
-    const { onRowClick } = this.props;
+    const { onRowClick, onRow } = this.props;
+    const extendedRowProps = {
+      ...rowProps,
+      ...(onRow ? onRow(row, rowProps) : {})
+    };
     return {
       row,
-      rowProps,
+      rowProps: extendedRowProps,
       onMouseDown: event => {
         const computedData = {
           isInput: event.target.tagName !== 'INPUT',

packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js

@@ -6,29 +6,36 @@ import PropTypes from 'prop-types';
 
 class BodyWrapper extends Component {
   render() {
-    const { mappedRows, ...props } = this.props;
-    if (mappedRows.some(row => row.hasOwnProperty('parent'))) {
+    const { mappedRows, tbodyRef, ...props } = this.props;
+    if (mappedRows && mappedRows.some(row => row.hasOwnProperty('parent'))) {
       return (
         <Fragment>
           {mapOpenedRows(mappedRows, this.props.children).map((oneRow, key) => (
-            <tbody {...props} className={css(oneRow.isOpen && styles.modifiers.expanded)} key={`tbody-${key}`}>
+            <tbody
+              {...props}
+              className={css(oneRow.isOpen && styles.modifiers.expanded)}
+              key={`tbody-${key}`}
+              ref={tbodyRef}
+            >
               {oneRow.rows}
             </tbody>
           ))}
         </Fragment>
       );
     }
-    return <tbody {...props} />;
+    return <tbody {...props} ref={tbodyRef} />;
   }
 }
 
 BodyWrapper.propTypes = {
   rows: PropTypes.array,
-  onCollapse: PropTypes.func
+  onCollapse: PropTypes.func,
+  tbodyRef: PropTypes.func
 };
 
 BodyWrapper.defaultProps = {
-  rows: []
+  rows: [],
+  tbodyRef: null
 };
 
 export default BodyWrapper;

packages/patternfly-4/react-table/src/components/Table/Header.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Header } from 'reactabular-table';
+import { Header } from './base';
 import PropTypes from 'prop-types';
 import { TableContext } from './Table';
 

packages/patternfly-4/react-table/src/components/Table/Table.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from '@patternfly/patternfly/components/Table/table.css';
 import stylesGrid from '@patternfly/patternfly/components/Table/table-grid.css';
-import { Provider } from 'reactabular-table';
+import { Provider } from './base';
 import { DropdownPosition, DropdownDirection } from '@patternfly/react-core';
 import { css, getModifier } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';

packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap

@@ -2399,6 +2399,7 @@ exports[`Actions table 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -11434,6 +11435,7 @@ exports[`Cell header table 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -17695,6 +17697,7 @@ exports[`Collapsible nested table 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -24754,6 +24757,7 @@ exports[`Collapsible table 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className="pf-m-expanded"
@@ -30236,6 +30240,7 @@ exports[`Compound Expandable table 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className="pf-m-expanded"
@@ -33506,6 +33511,7 @@ exports[`Header width table 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -39856,6 +39862,7 @@ exports[`Selectable table 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -47263,6 +47270,7 @@ exports[`Simple Actions table 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -58256,6 +58264,7 @@ exports[`Simple table aria-label 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -64248,6 +64257,7 @@ exports[`Simple table caption 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -70244,6 +70254,7 @@ exports[`Simple table header 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -76287,6 +76298,7 @@ exports[`Sortable table 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -82337,6 +82349,7 @@ exports[`Table variants Breakpoint - grid 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -88387,6 +88400,7 @@ exports[`Table variants Breakpoint - grid-lg 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -94437,6 +94451,7 @@ exports[`Table variants Breakpoint - grid-md 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -100487,6 +100502,7 @@ exports[`Table variants Breakpoint - grid-xl 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -106537,6 +106553,7 @@ exports[`Table variants Breakpoint - null 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""
@@ -112587,6 +112604,7 @@ exports[`Table variants Size - compact 1`] = `
                 ]
               }
               rows={Array []}
+              tbodyRef={null}
             >
               <tbody
                 className=""