Skip to content

Commit d0a6337

Browse files
thatblindgeyethatblindgeye
authored
chore(DataList): added bottom static pagination demo (#11403)
* chore(DataList): added bottom static pagination demo * Updated file name * Removed variant page section styling and updated bottom pagination
1 parent acad1a9 commit d0a6337

File tree

3 files changed

+811
-0
lines changed

3 files changed

+811
-0
lines changed

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

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
import React from 'react';
2+
import {
3+
Button,
4+
Content,
5+
ContentVariants,
6+
DataList,
7+
DataListItem,
8+
DataListCell,
9+
DataListItemRow,
10+
DataListItemCells,
11+
Flex,
12+
FlexItem,
13+
MenuToggle,
14+
MenuToggleCheckbox,
15+
OverflowMenu,
16+
OverflowMenuControl,
17+
OverflowMenuItem,
18+
PageSection,
19+
Pagination,
20+
Toolbar,
21+
ToolbarItem,
22+
ToolbarContent,
23+
PaginationVariant
24+
} from '@patternfly/react-core';
25+
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
26+
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
27+
28+
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
29+
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
30+
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
31+
import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
32+
33+
export const DataListStaticBottomPagination: React.FunctionComponent = () => {
34+
const [page, setPage] = React.useState<number | undefined>(1);
35+
const [perPage, setPerPage] = React.useState<number>(10);
36+
const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
37+
38+
const handleSetPage = (
39+
_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
40+
newPage: number,
41+
_perPage: number | undefined,
42+
startIdx: number | undefined,
43+
endIdx: number | undefined
44+
) => {
45+
setPaginatedRows(rows?.slice(startIdx, endIdx));
46+
setPage(newPage);
47+
};
48+
49+
const handlePerPageSelect = (
50+
_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
51+
newPerPage: number,
52+
newPage: number | undefined,
53+
startIdx: number | undefined,
54+
endIdx: number | undefined
55+
) => {
56+
setPaginatedRows(rows.slice(startIdx, endIdx));
57+
setPage(newPage);
58+
setPerPage(newPerPage);
59+
};
60+
61+
const renderPagination = (variant: PaginationVariant, isCompact: boolean, isSticky: boolean, isStatic: boolean) => (
62+
<Pagination
63+
id={`datalist-${variant}-pagination`}
64+
variant={variant}
65+
itemCount={rows.length}
66+
page={page}
67+
perPage={perPage}
68+
isCompact={isCompact}
69+
isSticky={isSticky}
70+
isStatic={isStatic}
71+
onSetPage={handleSetPage}
72+
onPerPageSelect={handlePerPageSelect}
73+
titles={{
74+
paginationAriaLabel: `${variant} pagination`
75+
}}
76+
/>
77+
);
78+
79+
const toolbarItems = (
80+
<React.Fragment>
81+
<ToolbarItem>
82+
<MenuToggle
83+
aria-label="Select data list items"
84+
splitButtonItems={[
85+
<MenuToggleCheckbox
86+
id="split-dropdown-checkbox"
87+
key="split-dropdown-checkbox"
88+
aria-label={'Select all data list items'}
89+
/>
90+
]}
91+
></MenuToggle>
92+
</ToolbarItem>
93+
<ToolbarItem>
94+
<MenuToggle>Filter by creator name</MenuToggle>
95+
</ToolbarItem>
96+
<ToolbarItem>
97+
<OverflowMenu breakpoint="md">
98+
<OverflowMenuItem>
99+
<Button variant="primary">Create instance</Button>
100+
</OverflowMenuItem>
101+
<OverflowMenuControl hasAdditionalOptions>
102+
<MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain">
103+
<EllipsisVIcon />
104+
</MenuToggle>
105+
</OverflowMenuControl>
106+
</OverflowMenu>
107+
</ToolbarItem>
108+
<ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
109+
{renderPagination(PaginationVariant.top, true, false, false)}
110+
</ToolbarItem>
111+
</React.Fragment>
112+
);
113+
114+
return (
115+
<DashboardWrapper mainContainerId="main-content-datalist-view-pagination" breadcrumb={null}>
116+
<PageSection>
117+
<Content>
118+
<Content component="h1">Projects</Content>
119+
<Content component="p">This is a demo that showcases PatternFly Data List</Content>
120+
</Content>
121+
</PageSection>
122+
<PageSection isFilled>
123+
<Toolbar id="toolbar-group-types">
124+
<ToolbarContent>{toolbarItems}</ToolbarContent>
125+
</Toolbar>
126+
<DataList aria-label="Demo data list">
127+
{paginatedRows.map((row, rowIndex) => {
128+
const { name, threads, applications, workspaces, lastModified } = row;
129+
return (
130+
<DataListItem aria-labelledby={`Demo-item-${rowIndex}`} key={rowIndex}>
131+
<DataListItemRow>
132+
<DataListItemCells
133+
dataListCells={[
134+
<DataListCell isFilled={false} key="buttons1">
135+
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
136+
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
137+
<FlexItem>
138+
<Content id={`Demo-item-${rowIndex}`} component={ContentVariants.p}>
139+
{name}
140+
</Content>
141+
</FlexItem>
142+
<FlexItem>
143+
<Content component={ContentVariants.small}>
144+
Working repo for
145+
<a href="http://www.patternfly.org/">PatternFly</a>
146+
</Content>
147+
</FlexItem>
148+
</Flex>
149+
<Flex flexWrap={{ default: 'wrap' }}>
150+
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
151+
<FlexItem>
152+
<CodeBranchIcon /> {threads}
153+
</FlexItem>
154+
</Flex>
155+
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
156+
<FlexItem>
157+
<CodeIcon /> {applications}
158+
</FlexItem>
159+
</Flex>
160+
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
161+
<FlexItem>
162+
<CubeIcon /> {workspaces}
163+
</FlexItem>
164+
</Flex>
165+
<FlexItem> Updated {lastModified}</FlexItem>
166+
</Flex>
167+
</Flex>
168+
</DataListCell>,
169+
<DataListCell isFilled={false} alignRight key="secondary content align">
170+
<Flex>
171+
<FlexItem>
172+
<Button variant="secondary">Action</Button>
173+
</FlexItem>
174+
<FlexItem>
175+
<a href="#">Link</a>
176+
</FlexItem>
177+
</Flex>
178+
</DataListCell>
179+
]}
180+
/>
181+
</DataListItemRow>
182+
</DataListItem>
183+
);
184+
})}
185+
</DataList>
186+
{renderPagination(PaginationVariant.bottom, false, false, true)}
187+
</PageSection>
188+
</DashboardWrapper>
189+
);
190+
};

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

Lines changed: 6 additions & 0 deletions
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 } from '@patternfly/react-core/dist/esm/demos/sampleData';
1819

1920
## Demos
2021

@@ -28,3 +29,8 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
2829

2930
```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
3031
```
32+
33+
### Static bottom pagination
34+
35+
```js file="./DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen
36+
```

0 commit comments

Comments
 (0)