-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #19 from jenny-s51/upgradeBasicDemo
Upgrade Basic example
- Loading branch information
Showing
3 changed files
with
56 additions
and
116 deletions.
There are no files selected for viewing
169 changes: 55 additions & 114 deletions
169
packages/module/patternfly-docs/content/examples/Basic.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,123 +1,64 @@ | ||
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 { Caption, Table, TableGridBreakpoint, Td, Th, Thead, Tr } from '@patternfly/react-table'; | ||
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); | ||
export const VirtualizedExample: React.FunctionComponent = () => { | ||
// this StringArray type is just needed because something in our documentation framework crashes when it encounters | ||
// a string[][] type | ||
type StringArray = string[]; | ||
const rows: StringArray[] = []; | ||
for (let i = 0; i < 100; i++) { | ||
rows.push([`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]); | ||
} | ||
|
||
componentDidMount() { | ||
// re-render after resize | ||
window.addEventListener('resize', this._handleResize); | ||
} | ||
const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit']; | ||
|
||
componentWillUnmount() { | ||
window.removeEventListener('resize', this._handleResize); | ||
} | ||
|
||
_handleResize() { | ||
this.forceUpdate(); | ||
} | ||
const measurementCache = new CellMeasurerCache({ | ||
fixedWidth: true, | ||
minHeight: 44, | ||
keyMapper: (rowIndex) => rowIndex | ||
}); | ||
|
||
render() { | ||
const { columns, rows } = this.state; | ||
const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => ( | ||
<CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={rowIndex}> | ||
<Tr style={style}> | ||
{columns.map((col, index) => ( | ||
<Td key={`${rowIndex}-${index + 1}`}>{rows[rowIndex][index]}</Td> | ||
))} | ||
</Tr> | ||
</CellMeasurer> | ||
); | ||
|
||
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> | ||
); | ||
} | ||
} | ||
return ( | ||
<div aria-label="Scrollable Table" className="pf-v5-c-scrollablegrid"> | ||
<Table gridBreakPoint={TableGridBreakpoint.none} aria-rowcount={rows.length}> | ||
<Caption>Simple Table</Caption> | ||
<Thead> | ||
<Tr> | ||
{columns.map((col, index) => ( | ||
<Th key={++index}>{col}</Th> | ||
))} | ||
</Tr> | ||
</Thead> | ||
</Table> | ||
<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> | ||
); | ||
}; |
2 changes: 1 addition & 1 deletion
2
packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters