diff --git a/packages/module/patternfly-docs/content/examples/WindowScroller.tsx b/packages/module/patternfly-docs/content/examples/WindowScroller.tsx index 403fbe9..e70318c 100644 --- a/packages/module/patternfly-docs/content/examples/WindowScroller.tsx +++ b/packages/module/patternfly-docs/content/examples/WindowScroller.tsx @@ -25,14 +25,9 @@ export const WindowScrollerExample = () => { rows.push(cells); } - const [selected, setSelected] = React.useState(rows.map((_row) => false)); const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit']; const scrollToIndex = -1; // can be used to programmatically set current index - const onSelect = (event, isSelected, rowId) => { - setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel))); - }; - const measurementCache = new CellMeasurerCache({ fixedWidth: true, minHeight: 44, @@ -45,14 +40,6 @@ export const WindowScrollerExample = () => { return ( - {columns.map((col, index) => ( {text} ))} @@ -90,7 +77,6 @@ export const WindowScrollerExample = () => { Virtualized table with composable table components - {columns.map((col, index) => ( {col} ))} diff --git a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js index 1baeffa..a72e826 100644 --- a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js +++ b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js @@ -178,7 +178,7 @@ pageData.liveContext = { pageData.relativeImports = "import 'content/examples/./VirtualGrid.example.css';,import 'content/examples/./WindowScroller.example.css';" pageData.examples = { 'Window scroller': props => - {\n const [scrollableElement, setScrollableElement] = React.useState();\n React.useEffect(() => {\n const scrollableElement = document.getElementById('content-scrollable-2');\n setScrollableElement(scrollableElement);\n });\n const rows = [];\n for (let i = 0; i < 100000; i++) {\n const cells = [];\n const num = Math.floor(Math.random() * Math.floor(2)) + 1;\n for (let j = 0; j < 5; j++) {\n const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num);\n cells.push(cellValue);\n }\n rows.push(cells);\n }\n const [selected, setSelected] = React.useState(rows.map((_row) => false));\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n const scrollToIndex = -1; // can be used to programmatically set current index\n\n const onSelect = (event, isSelected, rowId) => {\n setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel)));\n };\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => {\n const text = rows[rowIndex][0];\n\n return (\n \n \n \n {columns.map((col, index) => (\n {text}\n ))}\n \n \n );\n };\n\n const scrollableContainerStyle = {\n height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n overflowX: 'auto',\n overflowY: 'scroll',\n scrollBehavior: 'smooth',\n WebkitOverflowScrolling: 'touch',\n position: 'relative'\n };\n\n return (\n \n \n \n \n \n \n ))}\n \n \n
Virtualized table with composable table components
\n {columns.map((col, index) => (\n {col}
\n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
\n \n
\n )}\n
\n )}\n
\n \n );\n};\n","title":"Window scroller","lang":"js"}}> + {\n const [scrollableElement, setScrollableElement] = React.useState();\n React.useEffect(() => {\n const scrollableElement = document.getElementById('content-scrollable-2') as HTMLElement;\n setScrollableElement(scrollableElement);\n }, []);\n \n // this StringArray type is just needed because something in our documentation framework crashes when it encounters\n // a string[][] type\n type StringArray = string[];\n const rows: StringArray[] = [];\n\n for (let i = 0; i < 100000; i++) {\n const cells: string[] = [];\n const num = Math.floor(Math.random() * Math.floor(2)) + 1;\n for (let j = 0; j < 5; j++) {\n const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num);\n cells.push(cellValue);\n }\n rows.push(cells);\n }\n\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n const scrollToIndex = -1; // can be used to programmatically set current index\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => {\n const text = rows[rowIndex][0];\n\n return (\n \n \n {columns.map((col, index) => (\n {text}\n ))}\n \n \n );\n };\n\n interface ScrollableContainerStyle {\n height: number;\n overflowX: 'auto';\n overflowY: 'scroll';\n scrollBehavior: 'smooth';\n WebkitOverflowScrolling: 'touch';\n position: 'relative';\n }\n\n const scrollableContainerStyle: ScrollableContainerStyle = {\n height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n overflowX: 'auto',\n overflowY: 'scroll',\n scrollBehavior: 'smooth',\n WebkitOverflowScrolling: 'touch',\n position: 'relative'\n };\n\n return (\n \n \n \n \n \n {columns.map((col, index) => (\n \n ))}\n \n \n
Virtualized table with composable table components
{col}
\n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
void}>\n \n
\n )}\n
\n )}\n
\n \n );\n};\n","title":"Window scroller","lang":"js"}}>
};