Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataLis pagination demo #10276

Open
wants to merge 5 commits into
base: v5
Choose a base branch
from
+808 −0
Open

DataLis pagination demo #10276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
77bfc65
DataList static pagination demo
ajaypratap003 Apr 15, 2024
8290fc6
add aria-labelledby
ajaypratap003 Apr 16, 2024
69653d2
make pagination dynamic and
ajaypratap003 Apr 19, 2024
6795a79
create sample data and fix issues
ajaypratap003 Apr 22, 2024
1f492d1
remove export from func getRandomInteger
ajaypratap003 Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
187 changes: 187 additions & 0 deletions packages/react-core/src/demos/DataList/examples/DataListPagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
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,
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';

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 } from '@patternfly/react-core/dist/esm/demos/sampleData';

export const DataListPagination: React.FunctionComponent = () => {
const [page, setPage] = React.useState<number | undefined>(1);
const [perPage, setPerPage] = React.useState<number>(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) => (
<Pagination
id={id}
variant={variant}
itemCount={rows.length}
page={page}
perPage={perPage}
isCompact={isCompact}
isSticky={isSticky}
onSetPage={handleSetPage}
onPerPageSelect={handlePerPageSelect}
titles={{
paginationAriaLabel: `${variant} pagination`
}}
/>
);

const toolbarItems = (
<React.Fragment>
<ToolbarItem variant="bulk-select">
<MenuToggle
aria-label="Select data list items"
splitButtonOptions={{
items: [
<MenuToggleCheckbox
id="split-dropdown-checkbox"
key="split-dropdown-checkbox"
aria-label={'Select all data list items'}
/>
]
}}
></MenuToggle>
</ToolbarItem>
<ToolbarItem>
<MenuToggle>Filter by creator name</MenuToggle>
</ToolbarItem>
<ToolbarItem variant="overflow-menu">
<OverflowMenu breakpoint="md">
<OverflowMenuItem>
<Button variant="primary">Create instance</Button>
</OverflowMenuItem>
<OverflowMenuControl hasAdditionalOptions>
<MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain">
<EllipsisVIcon />
</MenuToggle>
</OverflowMenuControl>
</OverflowMenu>
</ToolbarItem>
<ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
{renderPagination('top-pagination', PaginationVariant.top, false, false)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To match core (and the basic react data-list demo) this would use compact top pagination

Suggested change
{renderPagination('top-pagination', PaginationVariant.top, false, false)}
{renderPagination('top-pagination', PaginationVariant.top, true, false)}

</ToolbarItem>
</React.Fragment>
);

return (
<DashboardWrapper mainContainerId="main-content-datalist-view-pagination" breadcrumb={null}>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Projects</Text>
<Text component="p">This is a demo that showcases PatternFly Data List</Text>
</TextContent>
</PageSection>
<PageSection isFilled>
<Toolbar id="toolbar-group-types">
<ToolbarContent>{toolbarItems}</ToolbarContent>
</Toolbar>
<DataList aria-label="Demo data list">
{paginatedRows.map((row, rowIndex) => {
const { name, threads, applications, workspaces, lastModified } = row;
return (
<DataListItem aria-labelledby={`Demo-item-${rowIndex}`} key={rowIndex}>
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell isFilled={false} key="buttons1">
<Flex direction={{ default: 'column' }}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just a nit, I'm not sure how close we need to match the core demo, especially this part which is just content and doesn't impact the purpose of the demo (static bottom pagination) but if we do want to fix it, the layout is below. One decent visual thing it will address is to add space between the icon/text pairings in each row. You could also just add a {' '} or something there, too, or get the svg and number to render on the same line like the basic data list demo

flex.column.space-items-md
  flex.column.space-items-none
    flex-item
      // <p> text
    flex-item
      // <small> text
  flex.wrap
    flex.space-items-xs // one of these for each svg/number pair
      // <svg> and number
    flex-item
      // "Updated [n] days ago" text

<FlexItem>
<Text id={`Demo-item-${rowIndex}`} component={TextVariants.p}>
{name}
</Text>
</FlexItem>
<FlexItem>
<Text component={TextVariants.small}>
Working repo for
<a href="http://www.patternfly.org/">PatternFly</a>
</Text>
</FlexItem>
<FlexItem>
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<CodeBranchIcon /> {threads}
</FlexItem>
<FlexItem>
<CodeIcon /> {applications}
</FlexItem>
<FlexItem>
<CubeIcon /> {workspaces}
</FlexItem>
<FlexItem> Updated {lastModified}</FlexItem>
</Flex>
</FlexItem>
</Flex>
</DataListCell>,
<DataListCell isFilled={false} alignRight key="secondary content align">
<Flex>
<FlexItem>
<Button variant="secondary">Action</Button>
</FlexItem>
<FlexItem>
<a href="#">Link</a>
</FlexItem>
</Flex>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
);
})}
</DataList>
{renderPagination('bottom-pagination', PaginationVariant.bottom, true, true)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From the issue title in #10247, if this is supposed to match the HTML/core static bottom pagination demo, you'll want to pass isStatic to this bottom pagination. By default bottom pagination is "sticky" on mobile, meaning it floats on the bottom of the viewport as you scroll. A static pagination won't float on mobile, and will always be at the very end of the datalist. You'll want to make this change, disabling isSticky

Suggested change
{renderPagination('bottom-pagination', PaginationVariant.bottom, true, true)}
{renderPagination('bottom-pagination', PaginationVariant.bottom, true, false)}

Then I'm guessing you might need another arg in renderPagination() to set isStatic

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

Lines 63 to 78 in 1f492d1

const renderPagination = (id: string, variant: PaginationVariant, isCompact: boolean, isSticky: boolean) => (
<Pagination
id={id}
variant={variant}
itemCount={rows.length}
page={page}
perPage={perPage}
isCompact={isCompact}
isSticky={isSticky}
onSetPage={handleSetPage}
onPerPageSelect={handlePerPageSelect}
titles={{
paginationAriaLabel: `${variant} pagination`
}}
/>
);

</PageSection>
</DashboardWrapper>
);
};
6 changes: 6 additions & 0 deletions packages/react-core/src/demos/DataListDemo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 } from '@patternfly/react-core/dist/esm/demos/sampleData';

## Demos

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

```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
```

### Pagination
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this is to create a static bottom pagination demo, I'd rename this. The core demo is called "Static bottom pagination"


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