From 77bfc652da895a8728ca945a57111089a525dd85 Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Mon, 15 Apr 2024 19:23:32 +0530 Subject: [PATCH 1/5] DataList static pagination demo --- .../DataList/examples/DataListPagination.tsx | 315 ++++++++++++++++++ packages/react-core/src/demos/DataListDemo.md | 5 + 2 files changed, 320 insertions(+) create mode 100644 packages/react-core/src/demos/DataList/examples/DataListPagination.tsx diff --git a/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx b/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx new file mode 100644 index 00000000000..6e3de698476 --- /dev/null +++ b/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx @@ -0,0 +1,315 @@ +import React from 'react'; +import { + Button, + DataList, + DataListItem, + DataListCell, + DataListItemRow, + DataListItemCells, + Flex, + FlexItem, + MenuToggle, + MenuToggleCheckbox, + OverflowMenu, + OverflowMenuControl, + OverflowMenuItem, + PageSection, + PageSectionVariants, + Pagination, + Text, + TextContent, + TextVariants, + Toolbar, + ToolbarItem, + ToolbarContent +} from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; + +import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; +import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; +import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; +import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; + +export const DataListPagination: React.FunctionComponent = () => { + const renderPagination = () => ; + + const toolbarItems = ( + + + + ] + }} + > + + + Filter by creator name + + + + + + + + + + + + + + + {renderPagination()} + + + ); + + return ( + + + + + Projects + This is a demo that showcases PatternFly Data List + + + + + {toolbarItems} + + + + + + + + patternfly + + + + Working repo for + PatternFly + + + + + + 10 + + + 4 + + + 5 + + Updated 2 days ago + + + + , + + + + + + + Link + + + + ]} + /> + + + + + + + + patternfly-elements + + + PatternFly elements + + + + + 5 + + + 9 + + + 2 + + + + 11 + + + 4 + + + 1 + + Updated 2 days ago + + + + , + + + + + + + Link + + + + ]} + /> + + + + + + + + patternfly-unified-design-kit + + + , + + + + + + + Link + + + + ]} + /> + + + + + + + + patternfly + + + + Working repo for + PatternFly + + + + + + + 10 + + + 4 + + + 5 + + Updated 2 days ago + + + + , + + + + + + + Link + + + + ]} + /> + + + + + + + + patternfly-elements + + + PatternFly elements + + + + + 5 + + + 9 + + + 2 + + + 11 + + + 4 + + + 1 + + Updated 2 days ago + + + + , + + + + + + + Link + + + + ]} + /> + + + {renderPagination()} + + + + + ); +}; diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index b156dc8c192..1d48135b163 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -28,3 +28,8 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard ```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen ``` + +### Static pagination + +```js file="./DataList/examples/DataListPagination.tsx" isFullscreen +``` From 8290fc604b0acd0b91f16337c01aea32ed1f8157 Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Tue, 16 Apr 2024 12:53:02 +0530 Subject: [PATCH 2/5] add aria-labelledby --- .../src/demos/DataList/examples/DataListPagination.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx b/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx index 6e3de698476..5ff8b423982 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx @@ -306,7 +306,7 @@ export const DataListPagination: React.FunctionComponent = () => { /> - {renderPagination()} + {renderPagination()} From 69653d2de24f99fda9711f0fdcf38f3091cd2fe5 Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Fri, 19 Apr 2024 18:56:38 +0530 Subject: [PATCH 3/5] make pagination dynamic and implement review comments --- .../DataList/examples/DataListPagination.tsx | 318 ++++++------------ packages/react-core/src/demos/DataListDemo.md | 3 +- packages/react-table/src/demos/sampleData.tsx | 2 +- 3 files changed, 99 insertions(+), 224 deletions(-) diff --git a/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx b/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx index 5ff8b423982..5cbed1c6f9b 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx @@ -21,7 +21,8 @@ import { TextVariants, Toolbar, ToolbarItem, - ToolbarContent + ToolbarContent, + PaginationVariant } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; @@ -29,24 +30,64 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; +import { rows, getRandomInteger } from '@patternfly/react-table/dist/esm/demos/sampleData'; export const DataListPagination: React.FunctionComponent = () => { - const renderPagination = () => ; + const [page, setPage] = React.useState(1); + const [perPage, setPerPage] = React.useState(10); + const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10)); + + const handleSetPage = ( + _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, + newPage: number, + _perPage: number | undefined, + startIdx: number | undefined, + endIdx: number | undefined + ) => { + setPaginatedRows(rows?.slice(startIdx, endIdx)); + setPage(newPage); + }; + + const handlePerPageSelect = ( + _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, + newPerPage: number, + newPage: number | undefined, + startIdx: number | undefined, + endIdx: number | undefined + ) => { + setPaginatedRows(rows.slice(startIdx, endIdx)); + setPage(newPage); + setPerPage(newPerPage); + }; + + const renderPagination = (id: string, variant: PaginationVariant, isCompact: boolean, isSticky: boolean) => ( + + ); const toolbarItems = ( ] }} @@ -68,14 +109,14 @@ export const DataListPagination: React.FunctionComponent = () => { - {renderPagination()} + {renderPagination('top-pagination', PaginationVariant.top, false, false)} ); return ( - + Projects @@ -87,227 +128,60 @@ export const DataListPagination: React.FunctionComponent = () => { {toolbarItems} - - - - - - patternfly - - - - Working repo for - PatternFly - - - - - - 10 + {paginatedRows.map((row, rowIndex) => { + const { name, threads, applications, workspaces } = row; + return ( + + + + + + + {name} + + + + + Working repo for + PatternFly + + + + + + {threads} + + + {applications} + + + {workspaces} + + Updated {getRandomInteger(1, rowIndex)} days ago + - - 4 - - - 5 - - Updated 2 days ago - - - , - - - - - - - Link - - - - ]} - /> - - - - - - - - patternfly-elements - - - PatternFly elements - - - - - 5 - - - 9 - - - 2 - - - - 11 - - - 4 - - - 1 - - Updated 2 days ago - - - - , - - - - - - - Link - - - - ]} - /> - - - - - - - - patternfly-unified-design-kit - - - , - - - - - - - Link - - - - ]} - /> - - - - - - - - patternfly - - - - Working repo for - PatternFly - - - - - - - 10 - - - 4 - - - 5 - - Updated 2 days ago - - - - , - - - - - - - Link - - - - ]} - /> - - - - - - - - patternfly-elements - - - PatternFly elements - - - - - 5 - - - 9 - - - 2 - - - 11 - + , + + - 4 + - 1 + Link - Updated 2 days ago - - - , - - - - - - - Link - - - - ]} - /> - - - {renderPagination()} + + ]} + /> + + + ); + })} + {renderPagination('bottom-pagination', PaginationVariant.bottom, true, true)} diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index 1d48135b163..29414847e80 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -15,6 +15,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { rows, getRandomInteger } from '@patternfly/react-table/dist/esm/demos/sampleData'; ## Demos @@ -29,7 +30,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard ```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen ``` -### Static pagination +### Pagination ```js file="./DataList/examples/DataListPagination.tsx" isFullscreen ``` diff --git a/packages/react-table/src/demos/sampleData.tsx b/packages/react-table/src/demos/sampleData.tsx index bf3902f3169..43a45f5e780 100644 --- a/packages/react-table/src/demos/sampleData.tsx +++ b/packages/react-table/src/demos/sampleData.tsx @@ -1,4 +1,4 @@ -const getRandomInteger = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min; +export const getRandomInteger = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min; export interface SampleDataRow { name: string; From 6795a791d08ce5b2d60aaab726ad685ef1468f55 Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Mon, 22 Apr 2024 17:52:30 +0530 Subject: [PATCH 4/5] create sample data and fix issues --- .../DataList/examples/DataListPagination.tsx | 6 +- packages/react-core/src/demos/DataListDemo.md | 2 +- packages/react-core/src/demos/sampleData.tsx | 615 ++++++++++++++++++ 3 files changed, 619 insertions(+), 4 deletions(-) create mode 100644 packages/react-core/src/demos/sampleData.tsx diff --git a/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx b/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx index 5cbed1c6f9b..3d71818eecc 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx @@ -30,7 +30,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import { rows, getRandomInteger } from '@patternfly/react-table/dist/esm/demos/sampleData'; +import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData'; export const DataListPagination: React.FunctionComponent = () => { const [page, setPage] = React.useState(1); @@ -129,7 +129,7 @@ export const DataListPagination: React.FunctionComponent = () => { {paginatedRows.map((row, rowIndex) => { - const { name, threads, applications, workspaces } = row; + const { name, threads, applications, workspaces, lastModified } = row; return ( @@ -159,7 +159,7 @@ export const DataListPagination: React.FunctionComponent = () => { {workspaces} - Updated {getRandomInteger(1, rowIndex)} days ago + Updated {lastModified} diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index 29414847e80..0a833a04dd8 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -15,7 +15,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; -import { rows, getRandomInteger } from '@patternfly/react-table/dist/esm/demos/sampleData'; +import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData'; ## Demos diff --git a/packages/react-core/src/demos/sampleData.tsx b/packages/react-core/src/demos/sampleData.tsx new file mode 100644 index 00000000000..3195d55f3c0 --- /dev/null +++ b/packages/react-core/src/demos/sampleData.tsx @@ -0,0 +1,615 @@ +export const getRandomInteger = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min; + +export interface SampleDataRow { + name: string; + threads: number; + applications: number; + workspaces: number; + lastModified: string; + url: string; +} + +export const columns = ['Servers', 'Threads', 'Applications', 'Workspaces', 'Last Modified', 'URL']; + +export const rows: SampleDataRow[] = [ + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '2 hours ago', + url: 'http://www.redhat.com/en/office-locations/US-node1' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '5 hours ago', + url: 'http://www.redhat.com/en/office-locations/US-node2' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '20 minutes ago', + url: 'http://www.redhat.com/en/office-locations/US-node3' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '10 minutes ago', + url: 'http://www.redhat.com/en/office-locations/US-node4' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '15 minutes ago', + url: 'http://www.redhat.com/en/office-locations/US-node5' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '4 hours ago', + url: 'http://www.redhat.com/en/office-locations/US-node6' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '10 minutes ago', + url: 'http://www.redhat.com/en/office-locations/US-node7' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '8 hours ago', + url: 'http://www.redhat.com/en/office-locations/US-node8' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '1 hour ago', + url: 'http://www.redhat.com/en/office-locations/US-node9' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '2 hours ago', + url: 'http://www.redhat.com/en/office-locations/US-node10' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '55 minutes ago', + url: 'http://www.redhat.com/en/office-locations/US-node11' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '1 hour ago', + url: 'http://www.redhat.com/en/office-locations/US-node12' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '20 minutes ago', + url: 'http://www.redhat.com/en/office-locations/US-node13' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '4 hours ago', + url: 'http://www.redhat.com/en/office-locations/US-node14' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '10 minutes ago', + url: 'http://www.redhat.com/en/office-locations/US-node15' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '5 minutes ago', + url: 'http://www.redhat.com/en/office-locations/US-node16' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '5 hours ago', + url: 'http://www.redhat.com/en/office-locations/US-node17' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '10 minutes ago', + url: 'http://www.redhat.com/en/office-locations/US-node18' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '30 minutes ago', + url: 'http://www.redhat.com/en/office-locations/US-node19' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '3 hours ago', + url: 'http://www.redhat.com/en/office-locations/US-node20' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '15 minutes ago', + url: 'http://www.redhat.com/en/office-locations/US-node21' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '2 hours ago', + url: 'http://www.redhat.com/en/office-locations/US-node22' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '2 hours ago', + url: 'http://www.redhat.com/en/office-locations/US-node23' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '40 minutes ago', + url: 'http://www.redhat.com/en/office-locations/US-node24' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '1 hour ago', + url: 'http://www.redhat.com/en/office-locations/US-node25' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '2 hours ago', + url: 'http://www.redhat.com/en/office-locations/US-node26' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '7 hours ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node1' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '50 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node2' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '10 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node3' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '3 hours ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node4' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '2 hours ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node5' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '2 hours ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node6' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '25 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node7' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '1 hour ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node8' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '15 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node9' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '3 hours ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node10' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '30 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node11' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '5 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node12' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '45 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node13' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '2 hours ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node14' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '10 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-node15' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '20 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-Remote-node1' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '15 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-Remote-node2' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '2 hours ago', + url: 'http://www.redhat.com/en/office-locations/CZ-Remote-node3' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '1 hour ago', + url: 'http://www.redhat.com/en/office-locations/CZ-Remote-node4' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '30 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-Remote-node5' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '2 hours ago', + url: 'http://www.redhat.com/en/office-locations/CZ-Remote-node6' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '45 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-remote-node7' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '6 hours ago', + url: 'http://www.redhat.com/en/office-locations/CZ-remote-node8' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '50 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-remote-node9' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '3 hours ago', + url: 'http://www.redhat.com/en/office-locations/CZ-remote-node10' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '2 hours ago', + url: 'http://www.redhat.com/en/office-locations/CZ-remote-node11' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '20 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-remote-node12' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '5 hours ago', + url: 'http://www.redhat.com/en/office-locations/CZ-remote-node13' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '30 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-remote-node14' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '1 hour ago', + url: 'http://www.redhat.com/en/office-locations/CZ-remote-node15' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '1 hour ago', + url: 'http://www.redhat.com/en/office-locations/CZ-remote-node16' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '25 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-remote-node17' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '20 minutes ago', + url: 'http://www.redhat.com/en/office-locations/CZ-remote-node18' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '25 minutes ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node1' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '2 hours ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node2' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '10 minutes ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node3' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '50 minutes ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node4' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '3 hours ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node5' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '2 hours ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node6' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '5 hours ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node7' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '30 minutes ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node8' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '20 minutes ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node9' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '1 hour ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node10' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '40 minutes ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node11' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '1 hour ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node12' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '20 minutes ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node13' + }, + { + name: 'patternfly-elements', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '4 hours ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node14' + }, + { + name: 'patternfly', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '2 hours ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node15' + }, + { + name: 'patternfly-unified-design-kit', + threads: getRandomInteger(1, 20), + applications: getRandomInteger(1, 50), + workspaces: getRandomInteger(1, 30), + lastModified: '3 hours ago', + url: 'http://www.redhat.com/en/office-locations/Bangalore-node16' + } +]; From 1f492d118b31f73e347d17f5ee8911b34d79c89f Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Wed, 24 Apr 2024 02:11:51 +0530 Subject: [PATCH 5/5] remove export from func getRandomInteger --- .../DataList/examples/DataListPagination.tsx | 138 +++++++++--------- packages/react-core/src/demos/sampleData.tsx | 2 +- packages/react-table/src/demos/sampleData.tsx | 2 +- 3 files changed, 70 insertions(+), 72 deletions(-) diff --git a/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx b/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx index 3d71818eecc..0f32ae124f9 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx @@ -115,75 +115,73 @@ export const DataListPagination: React.FunctionComponent = () => { ); return ( - - - - - Projects - This is a demo that showcases PatternFly Data List - - - - - {toolbarItems} - - - {paginatedRows.map((row, rowIndex) => { - const { name, threads, applications, workspaces, lastModified } = row; - return ( - - - - - - - {name} - - - - - Working repo for - PatternFly - - - - - - {threads} - - - {applications} - - - {workspaces} - - Updated {lastModified} - - - - , - - - - - - - Link - - - - ]} - /> - - - ); - })} - - {renderPagination('bottom-pagination', PaginationVariant.bottom, true, true)} - - - + + + + Projects + This is a demo that showcases PatternFly Data List + + + + + {toolbarItems} + + + {paginatedRows.map((row, rowIndex) => { + const { name, threads, applications, workspaces, lastModified } = row; + return ( + + + + + + + {name} + + + + + Working repo for + PatternFly + + + + + + {threads} + + + {applications} + + + {workspaces} + + Updated {lastModified} + + + + , + + + + + + + Link + + + + ]} + /> + + + ); + })} + + {renderPagination('bottom-pagination', PaginationVariant.bottom, true, true)} + + ); }; diff --git a/packages/react-core/src/demos/sampleData.tsx b/packages/react-core/src/demos/sampleData.tsx index 3195d55f3c0..1402ddcac6d 100644 --- a/packages/react-core/src/demos/sampleData.tsx +++ b/packages/react-core/src/demos/sampleData.tsx @@ -1,4 +1,4 @@ -export const getRandomInteger = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min; +const getRandomInteger = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min; export interface SampleDataRow { name: string; diff --git a/packages/react-table/src/demos/sampleData.tsx b/packages/react-table/src/demos/sampleData.tsx index 43a45f5e780..bf3902f3169 100644 --- a/packages/react-table/src/demos/sampleData.tsx +++ b/packages/react-table/src/demos/sampleData.tsx @@ -1,4 +1,4 @@ -export const getRandomInteger = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min; +const getRandomInteger = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min; export interface SampleDataRow { name: string;