FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

fix(PaginationTableDemo): add Spinner and empty state to demo by nicolethoen · Pull Request #3294 · patternfly/patternfly-react · GitHub

/ patternfly-react Public

fix(PaginationTableDemo): add Spinner and empty state to demo #3294

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

Merged
dlabrecq merged 5 commits into from
Nov 21, 2019
Conversation 31 Commits 5 Checks 0 Files changed
Merged

fix(PaginationTableDemo): add Spinner and empty state to demo #3294

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
484a8a6
fix(PaginationTableDemo): add Spinner and empty state to demo
nicolethoen Nov 8, 2019
d9ec690
add radio toggle to show different display states
nicolethoen Nov 12, 2019
6988a7a
changes after discussing with mcarrano and margot
nicolethoen Nov 15, 2019
ed5d7cc
add disclaimer for using experimental spinner
nicolethoen Nov 18, 2019
e5e887b
add 'View loading state' checkbox
nicolethoen Nov 18, 2019
File filter

Filter by extension

Filter by extension .md  (1) All 1 file type selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
129 changes: 115 additions & 14 deletions packages/patternfly-4/react-core/src/demos/PaginationTable.md
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,85 @@
title: 'Pagination table'
section: 'demos'
---
import { Pagination, PaginationVariant, Title } from '@patternfly/react-core';
import { Table, TableHeader, TableBody} from '@patternfly/react-table';

## Examples
```
Note: This demo uses the experimental Spinner component while data is loading.
```
import {
Pagination,
PaginationVariant,
Title,
EmptyState,
EmptyStateIcon,
EmptyStateBody,
EmptyStateSecondaryActions,
Bullseye
} from '@patternfly/react-core';
import { ExclamationCircleIcon } from '@patternfly/react-icons';
import { global_danger_color_200 as globalDangerColor200 } from '@patternfly/react-tokens';
import { Table, TableHeader, TableBody} from '@patternfly/react-table';
import { Spinner } from '@patternfly/react-core/dist/esm/experimental';

```js title=Basic
import React from 'react';
import { Pagination, PaginationVariant, Title } from '@patternfly/react-core';
import {
Pagination,
PaginationVariant,
Title,
EmptyState,
EmptyStateIcon,
EmptyStateBody,
EmptyStateSecondaryActions,
Bullseye,
Radio
} from '@patternfly/react-core';
import { ExclamationCircleIcon } from '@patternfly/react-icons';
import { global_breakpoint_lg as globalBreakpointLg } from '@patternfly/react-tokens';
import { Table, TableHeader, TableBody} from '@patternfly/react-table';
import { Spinner } from '@patternfly/react-core/dist/esm/experimental';

class ComplexPaginationTableDemo extends React.Component {
constructor(props) {
this.state = {
res: [],
perPage: 20,
total: 100,
page: 1,
perPage: 0,
total: 0,
page: 0,
error: null,
loading: true
loading: true,
forceLoadingState: false,
};

this.handleCheckboxChange = (checked) => {
console.log(checked);
this.setState({ forceLoadingState: checked });
}
}

fetch(page, perPage) {
this.setState({ loading: true });
fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${perPage}`)
.then(resp => resp.json())
.then(resp => this.setState({ res: resp, perPage, page, loading: false }))
.catch(err => this.setState({ error: err, loading: false }));
.then(resp => this.setState({ res: resp, perPage, page, loading: false, total: 100 }))
.catch(err => this.setState({ error: err, loading: false, perPage: 0, page: 0, total: 0 }));
}

componentDidMount() {
this.fetch(this.state.page, this.state.perPage);
this.fetch(this.state.page || 1, this.state.perPage || 20);
}

renderLoadingStateCheckbox() {
return (
<Checkbox
label="View loading state"
isChecked={this.state.forceLoadingState}
onChange={this.handleCheckboxChange}
aria-label="view loading state checkbox"
id="check"
name="check"
/>
)
}

renderPagination(variant = 'top') {
Expand All @@ -50,17 +98,70 @@ class ComplexPaginationTableDemo extends React.Component {
}

render() {
const { loading } = this.state;
const { loading, res, error, forceLoadingState } = this.state;
if (error) {
const noResultsRows = [{
heightAuto: true,
cells: [
{
props: { colSpan: 8 },
title: (
<Bullseye>
<EmptyState variant={EmptyStateVariant.small}>
<EmptyStateIcon icon={ExclamationCircleIcon} color={globalDangerColor200.value} />
<Title headingLevel="h2" size="lg">
Unable to connect
</Title>
<EmptyStateBody>
There was an error retrieving data. Check your connection and try again.
</EmptyStateBody>
</EmptyState>
</Bullseye>
)
},
]
}]

return (
<React.Fragment>
<Table cells={['Title', 'Body']} rows={noResultsRows} aria-label="Pagination Table Demo">
<TableHeader />
<TableBody />
</Table>
</React.Fragment>
);
}

const loadingRows = [{
heightAuto: true,
cells: [
{
props: { colSpan: 8 },
title: (
<Bullseye>
<center><Spinner size="xl"/></center>
</Bullseye>
)
},
]
}];

return (
<React.Fragment>
{this.renderLoadingStateCheckbox()}
{this.renderPagination()}
{!loading && (
<Table cells={['Title', 'Body']} rows={this.state.res.map(post => [post.title, post.body])}>
{!(loading || forceLoadingState) && (
<Table cells={['Title', 'Body']} rows={res.map(post => [post.title, post.body])} aria-label="Pagination Table Demo">
<TableHeader />
<TableBody />
</Table>
)}
{(loading || forceLoadingState) && (
<Table cells={['Title', 'Body']} rows={loadingRows} aria-label="Pagination Table Demo">
<TableHeader />
<TableBody />
</Table>
)}
{loading && <center><Title size="3xl">Please wait while loading data</Title></center>}
</React.Fragment>
);
}
Expand Down
Back | FazBrowse Home | New Git URL