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.

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

chore(pagination): rename ToggleTemplateProps to PaginationToggleTemplateProps in pagination component #8134

Merged
merged 1 commit into from
Oct 11, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-
import { css } from '@patternfly/react-styles';

import { fillTemplate } from '../../helpers';
import { ToggleTemplateProps } from './ToggleTemplate';
import { PaginationToggleTemplateProps } from './ToggleTemplate';
import { DropdownToggle } from '../Dropdown';

export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
Expand Down Expand Up @@ -39,7 +39,7 @@ export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
showToggle?: boolean;
/** This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
* itemCount, and/or itemsTitle props. */
toggleTemplate?: ((props: ToggleTemplateProps) => React.ReactElement) | string;
toggleTemplate?: ((props: PaginationToggleTemplateProps) => React.ReactElement) | string;
/** Id added to the title of the pagination options menu. */
widgetId?: string;
}
Expand Down
20 changes: 15 additions & 5 deletions packages/react-core/src/components/Pagination/Pagination.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { ToggleTemplate, ToggleTemplateProps } from './ToggleTemplate';
import { ToggleTemplate, PaginationToggleTemplateProps } from './ToggleTemplate';
import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
import { css } from '@patternfly/react-styles';

Expand Down Expand Up @@ -154,7 +154,7 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
/** This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
* itemCount, itemsTitle, and/or ofWord props.
*/
toggleTemplate?: ((props: ToggleTemplateProps) => React.ReactElement) | string;
toggleTemplate?: ((props: PaginationToggleTemplateProps) => React.ReactElement) | string;
/** Position where pagination is rendered. */
variant?: 'top' | 'bottom' | PaginationVariant;
/** Id to ideintify widget on page. */
Expand Down Expand Up @@ -306,7 +306,13 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
}
}

const toggleTemplateProps = { firstIndex, lastIndex, itemCount, itemsTitle: titles.items, ofWord: titles.ofWord };
const PaginationToggleTemplateProps = {
firstIndex,
lastIndex,
itemCount,
itemsTitle: titles.items,
ofWord: titles.ofWord
};

return (
<div
Expand All @@ -325,10 +331,14 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
>
{variant === PaginationVariant.top && (
<div className={css(styles.paginationTotalItems)}>
{toggleTemplate && typeof toggleTemplate === 'string' && fillTemplate(toggleTemplate, toggleTemplateProps)}
{toggleTemplate &&
typeof toggleTemplate === 'string' &&
fillTemplate(toggleTemplate, PaginationToggleTemplateProps)}
{toggleTemplate &&
typeof toggleTemplate !== 'string' &&
(toggleTemplate as (props: ToggleTemplateProps) => React.ReactElement)(toggleTemplateProps)}
(toggleTemplate as (props: PaginationToggleTemplateProps) => React.ReactElement)(
PaginationToggleTemplateProps
)}
{!toggleTemplate && (
<ToggleTemplate
firstIndex={firstIndex}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
import { DropdownItem, DropdownDirection, DropdownWithContext, DropdownContext } from '../Dropdown';
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
import { OptionsToggle } from './OptionsToggle';
import { ToggleTemplateProps, ToggleTemplate } from './ToggleTemplate';
import { PaginationToggleTemplateProps, ToggleTemplate } from './ToggleTemplate';
import { PerPageOptions, OnPerPageSelect } from './Pagination';

export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivElement> {
Expand Down Expand Up @@ -45,7 +45,7 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
/** This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
* itemCount, and/or itemsTitle props.
*/
toggleTemplate: ((props: ToggleTemplateProps) => React.ReactElement) | string;
toggleTemplate: ((props: PaginationToggleTemplateProps) => React.ReactElement) | string;
/** Function called when user selects number of items per page. */
onPerPageSelect?: OnPerPageSelect;
/** Label for the English word "of". */
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import * as React from 'react';
* should be passed into the pagination component's toggleTemplate property.
*/

export interface ToggleTemplateProps {
export interface PaginationToggleTemplateProps {
/** The first index of the items being paginated */
firstIndex?: number;
/** The last index of the items being paginated */
Expand All @@ -17,13 +17,13 @@ export interface ToggleTemplateProps {
ofWord?: React.ReactNode;
}

export const ToggleTemplate: React.FunctionComponent<ToggleTemplateProps> = ({
export const ToggleTemplate: React.FunctionComponent<PaginationToggleTemplateProps> = ({
firstIndex = 0,
lastIndex = 0,
itemCount = 0,
itemsTitle = 'items',
ofWord = 'of'
}: ToggleTemplateProps) => (
}: PaginationToggleTemplateProps) => (
<React.Fragment>
<b>
{firstIndex} - {lastIndex}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { PaginationOptionsMenu } from '../../PaginationOptionsMenu';
// any missing imports can usually be resolved by adding them here
import { ToggleTemplateProps } from '../..';
import { PaginationToggleTemplateProps } from '../..';

it('PaginationOptionsMenu should match snapshot (auto-generated)', () => {
const { asFragment } = render(
Expand All @@ -26,7 +26,7 @@ it('PaginationOptionsMenu should match snapshot (auto-generated)', () => {
defaultToFullPage={false}
perPage={0}
lastPage={42}
toggleTemplate={({ firstIndex, lastIndex, itemCount, itemsTitle }: ToggleTemplateProps) => (
toggleTemplate={({ firstIndex, lastIndex, itemCount, itemsTitle }: PaginationToggleTemplateProps) => (
<React.Fragment>
<b>
{firstIndex} - {lastIndex}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
id: Pagination
section: components
cssPrefix: null
propComponents: ['Pagination', PaginationTitles, PerPageOptions, ToggleTemplateProps]
propComponents: ['Pagination', PaginationTitles, PerPageOptions, PaginationToggleTemplateProps]
ouia: true
---

Expand Down