Skip to content

Commit

Permalink
feat(virtualized): add virtualized table extensions
Browse files Browse the repository at this point in the history
  • Loading branch information
@priley86
priley86 committed May 2, 2019
1 parent 252966d commit b240e65
Show file tree
Hide file tree
Showing 30 changed files with 2,004 additions and 69 deletions.
61 changes: 27 additions & 34 deletions jest.config.js
View file
Original file line number Diff line number Diff line change
@@ -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)'],
// 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'
}
}
};
};
46 changes: 23 additions & 23 deletions packages/patternfly-4/react-docs/gatsby-node.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const navHelpers = require("./src/helpers/navHelpers");
const path = require("path");
const navHelpers = require('./src/helpers/navHelpers');
const path = require('path');

// Add map PR-related environment variables to gatsby nodes
exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
Expand All @@ -8,33 +8,33 @@ exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
// Docs https://www.gatsbyjs.org/docs/actions/#createNode
actions.createNode({
name: 'PR_INFO',
num: num ? num : '',
url: url ? url : '',
num: num || '',
url: url || '',
id: createNodeId(`PR_INFO`),
parent: null,
children: [],
internal: {
contentDigest: createContentDigest({ a: 'PR_INFO' }),
type: `EnvVars`,
},
type: `EnvVars`
}
});
};
}

// Create pages for markdown files
exports.createPages = ({ graphql, actions }) => {
const mdx = graphql(`
{
allMdx {
nodes {
fileAbsolutePath
frontmatter {
title
section
fullscreen
{
allMdx {
nodes {
fileAbsolutePath
frontmatter {
title
section
fullscreen
}
}
}
}
}
`);

return mdx.then(({ data }) => {
Expand All @@ -54,7 +54,7 @@ exports.createPages = ({ graphql, actions }) => {
component: path.resolve('./src/templates/mdxFullscreenTemplate.js'),
context: {
title: node.frontmatter.title,
fileAbsolutePath: node.fileAbsolutePath, // Helps us get the markdown
fileAbsolutePath: node.fileAbsolutePath // Helps us get the markdown
}
});
} else {
Expand All @@ -72,9 +72,8 @@ exports.createPages = ({ graphql, actions }) => {
});
}
});
});
};

})
}

exports.onCreateWebpackConfig = ({ stage, actions }) => {
actions.setWebpackConfig({
Expand All @@ -90,13 +89,14 @@ 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'),
'@patternfly/react-tokens': path.resolve(__dirname, '../react-tokens'),
// Hack to work downstream in https://github.com/patternfly/patternfly-org
'@content': path.resolve(__dirname, 'src/components/componentDocs'),
}
},
})
};
}
});
}
19 changes: 13 additions & 6 deletions packages/patternfly-4/react-table/src/components/Table/Body.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,16 @@ const propTypes = {
/** Specify key which should be used for labeling each row. */
rowKey: PropTypes.string,
/** Function that is fired when user clicks on row. */
onRowClick: PropTypes.func
onRowClick: PropTypes.func,
/** Virtualized rows (optional provided in place of rows) */
rowsToRender: PropTypes.array
};

const defaultProps = {
rowKey: 'id',
className: '',
onRowClick: () => undefined
onRowClick: () => undefined,
rowsToRender: undefined
};

const flagVisibility = rows => {
Expand All @@ -29,10 +32,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',
Expand Down Expand Up @@ -78,7 +85,7 @@ class ContextBody extends React.Component {
};

render() {
const { className, headerData, rows, rowKey, children, onRowClick, ...props } = this.props;
const { className, headerData, rows, rowKey, rowsToRender, children, onRowClick, ...props } = this.props;

let mappedRows;
if (headerData.length > 0) {
Expand Down Expand Up @@ -113,7 +120,7 @@ class ContextBody extends React.Component {

const TableBody = props => (
<TableContext.Consumer>
{({ headerData, rows }) => <ContextBody headerData={headerData} rows={rows} {...props} />}
{({ headerData, rows }) => <ContextBody headerData={headerData} rows={props.rowsToRender || rows} {...props} />}
</TableContext.Consumer>
);

Expand Down
19 changes: 13 additions & 6 deletions packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Loading

0 comments on commit b240e65

Please sign in to comment.