Skip to content

Commit

Permalink
chore(deps): Bump PatternFly versions to latest release candidates (#12)
Browse files Browse the repository at this point in the history
* chore(deps): Bump PatternFly versions to latest release candidates

* chore(docs): Extract examples to standalone files for debugging purposes

* chore(docs): Apply codemod auto fixes

* chore(docs): Run Prettier on extracted example files

* chore(docs): Fix broken Dropdown and missing event arguments

* chore(docs): Fix styling issues caused by missing class name

* chore(docs): Resolve linting issues
  • Loading branch information
wise-king-sullyman authored Jul 25, 2023
1 parent 97afa21 commit 6594004
Show file tree
Hide file tree
Showing 15 changed files with 1,515 additions and 1,514 deletions.
17 changes: 9 additions & 8 deletions packages/module/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@
"tag": "prerelease"
},
"dependencies": {
"@patternfly/react-core": "^5.0.0-prerelease.13",
"@patternfly/react-icons": "^5.0.0-prerelease.7",
"@patternfly/react-styles": "^5.0.0-prerelease.5",
"@patternfly/react-core": "^5.0.0-prerelease.26",
"@patternfly/react-icons": "^5.0.0-prerelease.9",
"@patternfly/react-styles": "^5.0.0-prerelease.7",
"linear-layout-vector": "0.0.1",
"react-virtualized": "^9.22.5",
"tslib": "^2.5.2"
Expand All @@ -51,12 +51,13 @@
"react-dom": "^17 || ^18"
},
"devDependencies": {
"@patternfly/documentation-framework": "^2.0.0-alpha.69",
"@patternfly/patternfly": "^5.0.0-prerelease.10",
"@patternfly/react-table": "^5.0.0-prerelease.13",
"@patternfly/react-code-editor": "^5.0.0-prerelease.13",
"@patternfly/documentation-framework": "^5.0.15",
"@patternfly/patternfly": "^5.0.0-prerelease.16",
"@patternfly/react-table": "^5.0.0-prerelease.26",
"@patternfly/react-code-editor": "^5.0.0-prerelease.26",
"rimraf": "^5.0.1",
"@patternfly/patternfly-a11y": "^4.3.1",
"react-monaco-editor": "^0.52.0"
"react-monaco-editor": "^0.51.0",
"monaco-editor": "0.34.1"
}
}
149 changes: 149 additions & 0 deletions packages/module/patternfly-docs/content/examples/Actions.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
/* eslint-disable no-console */
import React from 'react';
import { debounce } from '@patternfly/react-core';
import { ActionsColumn, TableGridBreakpoint } from '@patternfly/react-table';
import { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';
import { CellMeasurerCache, CellMeasurer } from 'react-virtualized';
import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';

export class ActionsExample extends React.Component {
constructor(props) {
super(props);
const rows = [];
for (let i = 0; i < 100; i++) {
rows.push({
disableActions: i % 3 === 2,
id: `actions-row-${i}`,
cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]
});
}

this.actionsVirtualBody = null;

this.state = {
columns: [
{ title: 'Name', props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' } },
{
title: 'Namespace',
props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }
},
{
title: 'Labels',
props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }
},
{ title: 'Status', props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' } },
{ title: 'Pod Selector', props: { className: 'pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-xl' } },
{ title: '', props: { className: 'pf-v5-c-table__action' } }
],
rows,
actions: [
{
title: 'Some action',
onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Some action, on row: ', rowId)
},
{
title: <div>Another action</div>,
onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Another action, on row: ', rowId)
},
{
isSeparator: true
},
{
title: 'Third action',
onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Third action, on row: ', rowId)
}
]
};

this._handleResize = debounce(this._handleResize.bind(this), 100);
}

componentDidMount() {
// re-render after resize
window.addEventListener('resize', this._handleResize);
}

componentWillUnmount() {
window.removeEventListener('resize', this._handleResize);
}

_handleResize() {
this.forceUpdate();
}

render() {
const { columns, rows } = this.state;

const measurementCache = new CellMeasurerCache({
fixedWidth: true,
minHeight: 44,
keyMapper: (rowIndex) => rowIndex
});

const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {
const { rows, columns, actions } = this.state;

return (
<CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
<tr data-id={index} style={style} role="row">
<td className={columns[0].props.className} role="gridcell">
{rows[index].cells[0]}
</td>
<td className={columns[1].props.className} role="gridcell">
{rows[index].cells[1]}
</td>
<td className={columns[2].props.className} role="gridcell">
{rows[index].cells[2]}
</td>
<td className={columns[3].props.className} role="gridcell">
{rows[index].cells[3]}
</td>
<td className={columns[4].props.className} role="gridcell">
{rows[index].cells[4]}
</td>
<td className={columns[5].props.className} role="gridcell">
<ActionsColumn
items={actions}
rowData={rows[index]}
extraData={{ rowIndex: index }}
isDisabled={rows[index].disableActions}
/>
</td>
</tr>
</CellMeasurer>
);
};

return (
<div aria-label="Scrollable Table" className="pf-v5-c-scrollablegrid">
<TableDeprecated
caption="Actions Virtualized Table"
cells={columns}
rows={rows}
gridBreakPoint={TableGridBreakpoint.none}
aria-rowcount={rows.length}
>
<TableHeaderDeprecated />
</TableDeprecated>
<AutoSizer disableHeight>
{({ width }) => (
<VirtualTableBody
ref={(ref) => (this.actionsVirtualBody = ref)}
className="pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller"
deferredMeasurementCache={measurementCache}
rowHeight={measurementCache.rowHeight}
height={400}
overscanRowCount={2}
columnCount={1}
rows={rows}
rowCount={rows.length}
rowRenderer={rowRenderer}
width={width}
role="grid"
/>
)}
</AutoSizer>
</div>
);
}
}
123 changes: 123 additions & 0 deletions packages/module/patternfly-docs/content/examples/Basic.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import React from 'react';
import { debounce } from '@patternfly/react-core';
import { TableGridBreakpoint } from '@patternfly/react-table';
import { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';
import { CellMeasurerCache, CellMeasurer } from 'react-virtualized';
import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';

export class VirtualizedExample extends React.Component {
constructor(props) {
super(props);
const rows = [];
for (let i = 0; i < 100; i++) {
rows.push({
id: `basic-row-${i}`,
cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]
});
}

this.state = {
columns: [
{
title: 'Repositories',
props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }
},
{
title: 'Branches',
props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }
},
{
title: 'Pull requests',
props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }
},
{
title: 'Workspaces',
props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' }
},
{ title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } }
],
rows
};
this._handleResize = debounce(this._handleResize.bind(this), 100);
}

componentDidMount() {
// re-render after resize
window.addEventListener('resize', this._handleResize);
}

componentWillUnmount() {
window.removeEventListener('resize', this._handleResize);
}

_handleResize() {
this.forceUpdate();
}

render() {
const { columns, rows } = this.state;

const measurementCache = new CellMeasurerCache({
fixedWidth: true,
minHeight: 44,
keyMapper: (rowIndex) => rowIndex
});

const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {
const { rows, columns } = this.state;

return (
<CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
<tr style={style} role="row">
<td className={columns[0].props.className} role="gridcell">
{rows[index].cells[0]}
</td>
<td className={columns[1].props.className} role="gridcell">
{rows[index].cells[1]}
</td>
<td className={columns[2].props.className} role="gridcell">
{rows[index].cells[2]}
</td>
<td className={columns[3].props.className} role="gridcell">
{rows[index].cells[3]}
</td>
<td className={columns[4].props.className} role="gridcell">
{rows[index].cells[4]}
</td>
</tr>
</CellMeasurer>
);
};

return (
<div aria-label="Scrollable Table" className="pf-v5-c-scrollablegrid">
<TableDeprecated
caption="Simple Table"
cells={columns}
rows={rows}
gridBreakPoint={TableGridBreakpoint.none}
aria-rowcount={rows.length}
>
<TableHeaderDeprecated />
</TableDeprecated>
<AutoSizer disableHeight>
{({ width }) => (
<VirtualTableBody
className="pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller"
deferredMeasurementCache={measurementCache}
rowHeight={measurementCache.rowHeight}
height={400}
overscanRowCount={2}
columnCount={1}
rows={rows}
rowCount={rows.length}
rowRenderer={rowRenderer}
width={width}
role="grid"
/>
)}
</AutoSizer>
</div>
);
}
}
Loading

0 comments on commit 6594004

Please sign in to comment.