Skip to content

Commit 62c4a0f

Browse files
ajaypratap003ajaypratap003
committed
make pagination dynamic and
implement review comments
1 parent 4c9c266 commit 62c4a0f

File tree

3 files changed

+99
-224
lines changed

3 files changed

+99
-224
lines changed

‎packages/react-core/src/demos/DataList/examples/DataListPagination.tsx‎

Lines changed: 96 additions & 222 deletions
Original file line numberDiff line numberDiff line change
@@ -21,32 +21,73 @@ import {
2121
TextVariants,
2222
Toolbar,
2323
ToolbarItem,
24-
ToolbarContent
24+
ToolbarContent,
25+
PaginationVariant
2526
} from '@patternfly/react-core';
2627
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
2728
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
2829

2930
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
3031
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
3132
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
32-
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
33-
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
34-
import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
33+
import { rows, getRandomInteger } from '@patternfly/react-table/dist/esm/demos/sampleData';
3534

3635
export const DataListPagination: React.FunctionComponent = () => {
37-
const renderPagination = () => <Pagination itemCount={5} page={1} variant="top" isCompact />;
36+
const [page, setPage] = React.useState<number | undefined>(1);
37+
const [perPage, setPerPage] = React.useState<number>(10);
38+
const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
39+
40+
const handleSetPage = (
41+
_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
42+
newPage: number,
43+
_perPage: number | undefined,
44+
startIdx: number | undefined,
45+
endIdx: number | undefined
46+
) => {
47+
setPaginatedRows(rows?.slice(startIdx, endIdx));
48+
setPage(newPage);
49+
};
50+
51+
const handlePerPageSelect = (
52+
_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
53+
newPerPage: number,
54+
newPage: number | undefined,
55+
startIdx: number | undefined,
56+
endIdx: number | undefined
57+
) => {
58+
setPaginatedRows(rows.slice(startIdx, endIdx));
59+
setPage(newPage);
60+
setPerPage(newPerPage);
61+
};
62+
63+
const renderPagination = (id: string, variant: PaginationVariant, isCompact: boolean, isSticky: boolean) => (
64+
<Pagination
65+
id={id}
66+
variant={variant}
67+
itemCount={rows.length}
68+
page={page}
69+
perPage={perPage}
70+
isCompact={isCompact}
71+
isSticky={isSticky}
72+
onSetPage={handleSetPage}
73+
onPerPageSelect={handlePerPageSelect}
74+
titles={{
75+
paginationAriaLabel: `${variant} pagination`
76+
}}
77+
/>
78+
);
3879

3980
const toolbarItems = (
4081
<React.Fragment>
4182
<ToolbarItem variant="bulk-select">
4283
<MenuToggle
43-
aria-label="Select cards"
84+
aria-label="Select data list items"
4485
splitButtonOptions={{
4586
items: [
4687
<MenuToggleCheckbox
4788
id="split-dropdown-checkbox"
4889
key="split-dropdown-checkbox"
49-
aria-label={'Select all cards'}
90+
aria-label={'Select all data list items'}
5091
/>
5192
]
5293
}}
@@ -68,14 +109,14 @@ export const DataListPagination: React.FunctionComponent = () => {
68109
</OverflowMenu>
69110
</ToolbarItem>
70111
<ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
71-
{renderPagination()}
112+
{renderPagination('top-pagination', PaginationVariant.top, false, false)}
72113
</ToolbarItem>
73114
</React.Fragment>
74115
);
75116

76117
return (
77118
<React.Fragment>
78-
<DashboardWrapper mainContainerId="main-content-datalist-view-default-nav" breadcrumb={null}>
119+
<DashboardWrapper mainContainerId="main-content-datalist-view-pagination" breadcrumb={null}>
79120
<PageSection variant={PageSectionVariants.light}>
80121
<TextContent>
81122
<Text component="h1">Projects</Text>
@@ -87,227 +128,60 @@ export const DataListPagination: React.FunctionComponent = () => {
87128
<ToolbarContent>{toolbarItems}</ToolbarContent>
88129
</Toolbar>
89130
<DataList aria-label="Demo data list">
90-
<DataListItem aria-labelledby="Demo-item1">
91-
<DataListItemRow>
92-
<DataListItemCells
93-
dataListCells={[
94-
<DataListCell isFilled={false} key="buttons1">
95-
<Flex direction={{ default: 'column' }}>
96-
<FlexItem>
97-
<Text component={TextVariants.p}>patternfly</Text>
98-
</FlexItem>
99-
<FlexItem>
100-
<Text component={TextVariants.small}>
101-
Working repo for
102-
<a href="http://www.patternfly.org/">PatternFly</a>
103-
</Text>
104-
</FlexItem>
105-
<FlexItem>
106-
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
107-
<FlexItem>
108-
<CodeBranchIcon /> 10
131+
{paginatedRows.map((row, rowIndex) => {
132+
const { name, threads, applications, workspaces } = row;
133+
return (
134+
<DataListItem aria-labelledby={`Demo-item-${rowIndex}`} key={rowIndex}>
135+
<DataListItemRow>
136+
<DataListItemCells
137+
dataListCells={[
138+
<DataListCell isFilled={false} key="buttons1">
139+
<Flex direction={{ default: 'column' }}>
140+
<FlexItem>
141+
<Text id={`Demo-item-${rowIndex}`} component={TextVariants.p}>
142+
{name}
143+
</Text>
144+
</FlexItem>
145+
<FlexItem>
146+
<Text component={TextVariants.small}>
147+
Working repo for
148+
<a href="http://www.patternfly.org/">PatternFly</a>
149+
</Text>
150+
</FlexItem>
151+
<FlexItem>
152+
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
153+
<FlexItem>
154+
<CodeBranchIcon /> {threads}
155+
</FlexItem>
156+
<FlexItem>
157+
<CodeIcon /> {applications}
158+
</FlexItem>
159+
<FlexItem>
160+
<CubeIcon /> {workspaces}
161+
</FlexItem>
162+
<FlexItem> Updated {getRandomInteger(1, rowIndex)} days ago</FlexItem>
163+
</Flex>
109164
</FlexItem>
110-
<FlexItem>
111-
<CodeIcon /> 4
112-
</FlexItem>
113-
<FlexItem>
114-
<CubeIcon /> 5
115-
</FlexItem>
116-
<FlexItem> Updated 2 days ago</FlexItem>
117165
</Flex>
118-
</FlexItem>
119-
</Flex>
120-
</DataListCell>,
121-
<DataListCell isFilled={false} alignRight key="secondary content align">
122-
<Flex>
123-
<FlexItem>
124-
<Button variant="secondary">Action</Button>
125-
</FlexItem>
126-
<FlexItem>
127-
<a href="#">Link</a>
128-
</FlexItem>
129-
</Flex>
130-
</DataListCell>
131-
]}
132-
/>
133-
</DataListItemRow>
134-
</DataListItem>
135-
<DataListItem aria-labelledby="Demo-item2">
136-
<DataListItemRow>
137-
<DataListItemCells
138-
dataListCells={[
139-
<DataListCell isFilled={false} key="buttons2">
140-
<Flex direction={{ default: 'column' }}>
141-
<FlexItem>
142-
<Text component={TextVariants.small}>patternfly-elements</Text>
143-
</FlexItem>
144-
<FlexItem>
145-
<Text component={TextVariants.small}>PatternFly elements</Text>
146-
</FlexItem>
147-
<FlexItem>
148-
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
149-
<FlexItem>
150-
<CodeBranchIcon /> 5
151-
</FlexItem>
152-
<FlexItem>
153-
<CodeIcon /> 9
154-
</FlexItem>
155-
<FlexItem>
156-
<CubeIcon /> 2
157-
</FlexItem>
158-
<FlexItem>
159-
<CheckCircleIcon />
160-
11
161-
</FlexItem>
162-
<FlexItem>
163-
<ExclamationTriangleIcon /> 4
164-
</FlexItem>
165-
<FlexItem>
166-
<TimesCircleIcon /> 1
167-
</FlexItem>
168-
<FlexItem> Updated 2 days ago</FlexItem>
169-
</Flex>
170-
</FlexItem>
171-
</Flex>
172-
</DataListCell>,
173-
<DataListCell isFilled={false} alignRight key="secondary content align">
174-
<Flex>
175-
<FlexItem>
176-
<Button variant="secondary">Action</Button>
177-
</FlexItem>
178-
<FlexItem>
179-
<a href="#">Link</a>
180-
</FlexItem>
181-
</Flex>
182-
</DataListCell>
183-
]}
184-
/>
185-
</DataListItemRow>
186-
</DataListItem>
187-
<DataListItem>
188-
<DataListItemRow>
189-
<DataListItemCells
190-
dataListCells={[
191-
<DataListCell isFilled={false} key="Demo-item3">
192-
<Flex direction={{ default: 'column' }}>
193-
<FlexItem>
194-
<Text component={TextVariants.small}>patternfly-unified-design-kit</Text>
195-
</FlexItem>
196-
</Flex>
197-
</DataListCell>,
198-
<DataListCell isFilled={false} alignRight key="buttons3">
199-
<Flex>
200-
<FlexItem>
201-
<Button variant="secondary">Action</Button>
202-
</FlexItem>
203-
<FlexItem>
204-
<a href="#">Link</a>
205-
</FlexItem>
206-
</Flex>
207-
</DataListCell>
208-
]}
209-
/>
210-
</DataListItemRow>
211-
</DataListItem>
212-
<DataListItem aria-labelledby="Demo-item4">
213-
<DataListItemRow>
214-
<DataListItemCells
215-
dataListCells={[
216-
<DataListCell isFilled={false} key="buttons4">
217-
<Flex direction={{ default: 'column' }}>
218-
<FlexItem>
219-
<Text component={TextVariants.small}>patternfly</Text>
220-
</FlexItem>
221-
<FlexItem>
222-
<Text component={TextVariants.small}>
223-
Working repo for
224-
<a href="http://www.patternfly.org/">PatternFly</a>
225-
</Text>
226-
</FlexItem>
227-
<FlexItem>
228-
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
229-
<FlexItem>
230-
<CodeBranchIcon />
231-
10
232-
</FlexItem>
233-
<FlexItem>
234-
<CodeIcon /> 4
235-
</FlexItem>
236-
<FlexItem>
237-
<CubeIcon /> 5
238-
</FlexItem>
239-
<FlexItem> Updated 2 days ago</FlexItem>
240-
</Flex>
241-
</FlexItem>
242-
</Flex>
243-
</DataListCell>,
244-
<DataListCell isFilled={false} alignRight key="secondary content align">
245-
<Flex>
246-
<FlexItem>
247-
<Button variant="secondary">Action</Button>
248-
</FlexItem>
249-
<FlexItem>
250-
<a href="#">Link</a>
251-
</FlexItem>
252-
</Flex>
253-
</DataListCell>
254-
]}
255-
/>
256-
</DataListItemRow>
257-
</DataListItem>
258-
<DataListItem aria-labelledby="Demo-item5">
259-
<DataListItemRow>
260-
<DataListItemCells
261-
dataListCells={[
262-
<DataListCell isFilled={false} key="buttons5">
263-
<Flex direction={{ default: 'column' }}>
264-
<FlexItem>
265-
<Text component={TextVariants.small}>patternfly-elements</Text>
266-
</FlexItem>
267-
<FlexItem>
268-
<Text component={TextVariants.small}>PatternFly elements</Text>
269-
</FlexItem>
270-
<FlexItem>
271-
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
272-
<FlexItem>
273-
<CodeBranchIcon /> 5
274-
</FlexItem>
275-
<FlexItem>
276-
<CodeIcon /> 9
277-
</FlexItem>
278-
<FlexItem>
279-
<CubeIcon /> 2
280-
</FlexItem>
281-
<FlexItem>
282-
<CheckCircleIcon /> 11
283-
</FlexItem>
166+
</DataListCell>,
167+
<DataListCell isFilled={false} alignRight key="secondary content align">
168+
<Flex>
284169
<FlexItem>
285-
<ExclamationTriangleIcon /> 4
170+
<Button variant="secondary">Action</Button>
286171
</FlexItem>
287172
<FlexItem>
288-
<TimesCircleIcon /> 1
173+
<a href="#">Link</a>
289174
</FlexItem>
290-
<FlexItem> Updated 2 days ago</FlexItem>
291175
</Flex>
292-
</FlexItem>
293-
</Flex>
294-
</DataListCell>,
295-
<DataListCell isFilled={false} alignRight key="secondary content align">
296-
<Flex>
297-
<FlexItem>
298-
<Button variant="secondary">Action</Button>
299-
</FlexItem>
300-
<FlexItem>
301-
<a href="#">Link</a>
302-
</FlexItem>
303-
</Flex>
304-
</DataListCell>
305-
]}
306-
/>
307-
</DataListItemRow>
308-
</DataListItem>
309-
<DataListItem aria-labelledby="pagination">{renderPagination()}</DataListItem>
176+
</DataListCell>
177+
]}
178+
/>
179+
</DataListItemRow>
180+
</DataListItem>
181+
);
182+
})}
310183
</DataList>
184+
{renderPagination('bottom-pagination', PaginationVariant.bottom, true, true)}
311185
</PageSection>
312186
</DashboardWrapper>
313187
</React.Fragment>

‎packages/react-core/src/demos/DataListDemo.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
1515
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
1616
import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
1717
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
18+
import { rows, getRandomInteger } from '@patternfly/react-table/dist/esm/demos/sampleData';
1819

1920
## Demos
2021

@@ -29,7 +30,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
2930
```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
3031
```
3132

32-
### Static pagination
33+
### Pagination
3334

3435
```js file="./DataList/examples/DataListPagination.tsx" isFullscreen
3536
```

‎packages/react-table/src/demos/sampleData.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const getRandomInteger = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
1+
export const getRandomInteger = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
22

33
export interface SampleDataRow {
44
name: string;

0 commit comments

Comments
 (0)