feat(virtualized): add virtualized table extensions

patternfly · Jun 5, 2019 · 709c3e7 · 709c3e7
1 parent 7633986
commit 709c3e7
Show file tree

Hide file tree

Showing 52 changed files with 4,876 additions and 54 deletions.
diff --git a/jest.config.js b/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'
     }
   }
 };
diff --git a/packages/patternfly-4/react-docs/gatsby-config.js b/packages/patternfly-4/react-docs/gatsby-config.js
@@ -63,6 +63,7 @@ module.exports = {
       }
     },
     // The plugin for package.json files (to get version numbers)
-    `gatsby-transformer-json`
+    `gatsby-transformer-json`,
+    `gatsby-plugin-flow`
   ]
 };
diff --git a/packages/patternfly-4/react-docs/gatsby-node.js b/packages/patternfly-4/react-docs/gatsby-node.js
@@ -91,6 +91,7 @@ exports.onCreateWebpackConfig = ({ 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'),

diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json
@@ -21,6 +21,7 @@
     "@patternfly/react-icons": "^3.9.3",
     "gatsby": "2.3.14",
     "gatsby-mdx": "0.6.3",
+    "gatsby-plugin-flow": "^1.0.5",
     "gatsby-plugin-react-helmet": "^3.0.11",
     "gatsby-plugin-sass": "^2.0.11",
     "gatsby-source-filesystem": "^2.0.28",

diff --git a/packages/patternfly-4/react-table/package.json b/packages/patternfly-4/react-table/package.json
@@ -31,13 +31,15 @@
     "@patternfly/react-core": "^3.34.2",
     "@patternfly/react-icons": "^3.9.3",
     "@patternfly/react-styles": "^3.2.3",
+    "classnames": "^2.2.5",
     "exenv": "^1.2.2",
     "reactabular-table": "^8.14.0"
   },
   "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",

diff --git a/packages/patternfly-4/react-table/src/components/Table/Body.js b/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',

diff --git a/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js b/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js
@@ -7,30 +7,42 @@ import PropTypes from 'prop-types';
 // eslint-disable-next-line react/prefer-stateless-function
 class BodyWrapper extends Component {
   render() {
-    const { children, 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 (
         <React.Fragment>
-          {mapOpenedRows(mappedRows, children).map((oneRow, key) => (
-            <tbody {...props} className={css(oneRow.isOpen && styles.modifiers.expanded)} key={`tbody-${key}`}>
+          {mapOpenedRows(mappedRows, this.props.children).map((oneRow, key) => (
+            <tbody
+              {...props}
+              className={css(oneRow.isOpen && styles.modifiers.expanded)}
+              key={`tbody-${key}`}
+              ref={tbodyRef}
+            >
               {oneRow.rows}
             </tbody>
           ))}
         </React.Fragment>
       );
     }
-    return <tbody {...props}>{children}</tbody>;
+
+    return <tbody {...props} ref={tbodyRef} />;
   }
 }
 
 BodyWrapper.propTypes = {
   children: PropTypes.node,
-  mappedRows: PropTypes.array
+  mappedRows: PropTypes.array,
+  rows: PropTypes.array,
+  onCollapse: PropTypes.func,
+  tbodyRef: PropTypes.func
 };
 
 BodyWrapper.defaultProps = {
   children: null,
-  mappedRows: undefined
+  mappedRows: undefined,
+  rows: [],
+  onCollapse: null,
+  tbodyRef: null
 };
 
 export default BodyWrapper;
diff --git a/packages/patternfly-4/react-table/src/components/Table/Header.js b/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';
 

diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.js b/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';
@@ -125,25 +125,26 @@ const propTypes = {
   dropdownDirection: PropTypes.oneOf(Object.values(DropdownDirection)),
   /** Header to display above table for accessibility reasons. */
   header: props => {
-    if (!props['aria-label'] && !props.caption && !props.header) {
+    if (!props['aria-label'] && !props.caption && !props.header && !props.role === 'presentation') {
       throw new Error('Specify at least one of: header, caption, aria-label');
     }
     return null;
   },
   /** Caption to display in table for accessibility reasons. */
   caption: props => {
-    if (!props['aria-label'] && !props.caption && !props.header) {
+    if (!props['aria-label'] && !props.caption && !props.header && !props.role === 'presentation') {
       throw new Error('Specify at least one of: header, caption, aria-label');
     }
     return null;
   },
   /** aria-label in table for accessibility reasons. */
   'aria-label': props => {
-    if (!props['aria-label'] && !props.caption && !props.header) {
+    if (!props['aria-label'] && !props.caption && !props.header && !props.role === 'presentation') {
       throw new Error('Specify at least one of: header, caption, aria-label');
     }
     return null;
-  }
+  },
+  role: PropTypes.string
 };
 
 const defaultProps = {
@@ -169,7 +170,8 @@ const defaultProps = {
   header: undefined,
   caption: undefined,
   'aria-label': undefined,
-  gridBreakPoint: TableGridBreakpoint.gridMd
+  gridBreakPoint: TableGridBreakpoint.gridMd,
+  role: 'grid'
 };
 
 export const TableContext = React.createContext();
@@ -206,6 +208,7 @@ class Table extends React.Component {
       bodyWrapper,
       rowWrapper,
       borders,
+      role,
       ...props
     } = this.props;
 
@@ -248,7 +251,7 @@ class Table extends React.Component {
             }
           }}
           columns={headerData}
-          role="grid"
+          role={role}
           className={css(
             styles.table,
             gridBreakPoint && getModifier(stylesGrid, gridBreakPoint),