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

feat(Pagination): add disabled flag for whole component by kmcfaul · Pull Request #2586 · patternfly/patternfly-react · GitHub

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension .md  (1) .snap  (1) .ts  (1) .tsx  (6) All 4 file types 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
        • PaginationDemo.tsx
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
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { KEY_CODES } from '../../helpers/constants';
export interface NavigationProps extends React.HTMLProps<HTMLElement> {
/** Additional classes for the container */
className?: string;
/** Flag indicating if the pagination is disabled */
isDisabled?: boolean;
/** The number of the last page */
lastPage?: number;
/** The number of first page where pagination starts */
Expand Down Expand Up @@ -55,6 +57,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState

static defaultProps = {
className: '',
isDisabled: false,
lastPage: 0,
firstPage: 0,
pagesTitle: '',
Expand Down Expand Up @@ -102,6 +105,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
render () {
const {
page,
isDisabled,
lastPage,
firstPage,
pagesTitle,
Expand All @@ -125,7 +129,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
<nav className={css(styles.paginationNav, className)} aria-label={paginationTitle} {...props}>
<Button
variant={ButtonVariant.plain}
isDisabled={page === firstPage}
isDisabled={isDisabled || page === firstPage}
aria-label={toFirstPage}
data-action="first"
onClick={event => {
Expand All @@ -138,7 +142,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
</Button>
<Button
variant={ButtonVariant.plain}
isDisabled={page === firstPage}
isDisabled={isDisabled || page === firstPage}
data-action="previous"
onClick={event => {
const newPage = page as number - 1 >= 1 ? page as number - 1 : 1;
Expand All @@ -155,7 +159,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
className={css(styles.formControl)}
aria-label={currPage}
type="number"
disabled={page === firstPage && page === lastPage}
disabled={isDisabled || page === firstPage && page === lastPage}
min={lastPage <= 0 && firstPage <= 0 ? 0 : 1}
max={lastPage}
value={userInputPage}
Expand All @@ -168,7 +172,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
</div>
<Button
variant={ButtonVariant.plain}
isDisabled={page === lastPage}
isDisabled={isDisabled || page === lastPage}
aria-label={toNextPage}
data-action="next"
onClick={event => {
Expand All @@ -182,7 +186,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
</Button>
<Button
variant={ButtonVariant.plain}
isDisabled={page === lastPage}
isDisabled={isDisabled || page === lastPage}
aria-label={toLastPage}
data-action="last"
onClick={event => {
Expand Down
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
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
import { css, getModifier } from '@patternfly/react-styles';
import { css } from '@patternfly/react-styles';

import { fillTemplate } from '../../helpers';
import { ToggleTemplateProps } from './ToggleTemplate';
Expand All @@ -25,6 +25,8 @@ export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
onToggle?: (isOpen: boolean) => void,
/** Flag indicating if the Options Menu dropdown is open or not */
isOpen?: boolean,
/** Flag indicating if the Options Menu is disabled */
isDisabled?: boolean,
/** */
parentRef?: HTMLElement;
/** This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle props. */
Expand All @@ -41,16 +43,17 @@ export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
showToggle = true,
onToggle = (_isOpen: boolean) => undefined as any,
isOpen = false,
isDisabled = false,
parentRef = null,
toggleTemplate: ToggleTemplate = '',
}:OptionsToggleProps ) => {
return (
<div className={css(styles.optionsMenuToggle, getModifier(styles, 'plain'), getModifier(styles, 'text'))} >
<div className={css(styles.optionsMenuToggle, isDisabled && styles.modifiers.disabled, styles.modifiers.plain, styles.modifiers.text)} >
{showToggle && (
<DropdownToggle
aria-label={optionsToggle}
onToggle={onToggle}
isDisabled={itemCount <= 0}
isDisabled={isDisabled || itemCount <= 0}
isOpen={isOpen}
id={`${widgetId}-toggle`}
className={styles.optionsMenuToggleButton}
Expand Down
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
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,48 @@ class PaginationBottom extends React.Component {
}
```

## Pagination disabled
```js
import React from 'react';
import { Pagination, PaginationVariant } from '@patternfly/react-core';

class PaginationDisabled extends React.Component {
constructor(props) {
super(props);
this.state = {
page: 1,
perPage: 20
};

this.onSetPage = (_event, pageNumber) => {
this.setState({
page: pageNumber
});
};

this.onPerPageSelect = (_event, perPage) => {
this.setState({
perPage
});
};
}

render() {
return (
<Pagination
itemCount={523}
perPage={this.state.perPage}
page={this.state.page}
onSetPage={this.onSetPage}
widgetId="pagination-options-menu-top"
onPerPageSelect={this.onPerPageSelect}
isDisabled
/>
);
}
}
```

## No items
```js
import React from 'react';
Expand Down
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
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@ describe('component render', () => {
expect(wrapper).toMatchSnapshot();
});

test('should render correctly disabled', () => {
const wrapper = mount(<Pagination itemCount={20} isDisabled />);
expect(wrapper).toMatchSnapshot();
});

test('limited number of pages', () => {
const wrapper = mount(<Pagination itemCount={20} perPage={20} />);
expect(wrapper).toMatchSnapshot();
Expand Down
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
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement> {
itemCount: number;
/** Position where pagination is rendered. */
variant?: 'top' | 'bottom' | 'left' | 'right';
/** Flag indicating if pagination is disabled */
isDisabled?: boolean;
/** Number of items per page. */
perPage?: number;
/** Select from options to number of items per page. */
Expand Down Expand Up @@ -100,6 +102,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
children = null,
className = '',
variant = PaginationVariant.top,
isDisabled = false,
perPage = defaultPerPageOptions[0].value,
titles = {
items: 'items',
Expand Down Expand Up @@ -170,6 +173,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
dropDirection={dropDirection}
widgetId={widgetId}
toggleTemplate={toggleTemplate}
isDisabled={isDisabled}
/>
<Navigation
pagesTitle={titles.page}
Expand All @@ -188,6 +192,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
onNextClick={onNextClick}
onLastClick={onLastClick}
onPageInput={onPageInput}
isDisabled={isDisabled}
/>
{children}
</div>
Expand Down
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
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
className?: string;
/** Id added to the title of the Pagination Options Menu */
widgetId?: string;
/** Flag indicating if Pagination Options Menu is disabled */
isDisabled?: boolean;
/** Menu will open up or open down from the Options menu toggle */
dropDirection?: 'up' | 'down';
/** Array of titles and values which will be the options on the Options Menu dropdown */
Expand Down Expand Up @@ -48,6 +50,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
static defaultProps = {
className: '',
widgetId: '',
isDisabled: false,
dropDirection: DropdownDirection.down,
perPageOptions: [] as PerPageOptions[],
itemsPerPageTitle: 'Items per page',
Expand Down Expand Up @@ -109,7 +112,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
};

render() {
const { className, widgetId, itemsPerPageTitle, dropDirection, optionsToggle, perPageOptions, toggleTemplate, firstIndex, lastIndex, itemCount, itemsTitle } = this.props;
const { className, widgetId, isDisabled, itemsPerPageTitle, dropDirection, optionsToggle, perPageOptions, toggleTemplate, firstIndex, lastIndex, itemCount, itemsTitle } = this.props;
const { isOpen } = this.state;

return (
Expand Down Expand Up @@ -137,6 +140,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
itemsTitle={itemsTitle}
toggleTemplate={toggleTemplate}
parentRef={this.parentRef.current}
isDisabled={isDisabled}
/>
}
dropdownItems={this.renderItems()}
Expand Down
Loading

Back | FazBrowse Home | New Git URL