From 52ae79f9dd8d3ea51431b803cee5177c23539b93 Mon Sep 17 00:00:00 2001 From: Shakirul Hasan Date: Sun, 2 Oct 2022 18:11:59 +0600 Subject: [PATCH] chore(pagination): rename `ToggleTemplateProps` to `PaginationToggleTemplateProps` in pagination component --- .../components/Pagination/OptionsToggle.tsx | 4 ++-- .../src/components/Pagination/Pagination.tsx | 20 ++++++++++++++----- .../Pagination/PaginationOptionsMenu.tsx | 4 ++-- .../components/Pagination/ToggleTemplate.tsx | 6 +++--- .../Generated/PaginationOptionsMenu.test.tsx | 4 ++-- .../Pagination/examples/Pagination.md | 2 +- 6 files changed, 25 insertions(+), 15 deletions(-) diff --git a/packages/react-core/src/components/Pagination/OptionsToggle.tsx b/packages/react-core/src/components/Pagination/OptionsToggle.tsx index 4d26714132f..b95ea24c9cc 100644 --- a/packages/react-core/src/components/Pagination/OptionsToggle.tsx +++ b/packages/react-core/src/components/Pagination/OptionsToggle.tsx @@ -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 { @@ -39,7 +39,7 @@ export interface OptionsToggleProps extends React.HTMLProps { 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; } diff --git a/packages/react-core/src/components/Pagination/Pagination.tsx b/packages/react-core/src/components/Pagination/Pagination.tsx index 6fd8fe5cc44..9aec19883ad 100644 --- a/packages/react-core/src/components/Pagination/Pagination.tsx +++ b/packages/react-core/src/components/Pagination/Pagination.tsx @@ -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'; @@ -154,7 +154,7 @@ export interface PaginationProps extends React.HTMLProps, 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. */ @@ -306,7 +306,13 @@ export class Pagination extends React.Component {variant === PaginationVariant.top && (
- {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 && ( { @@ -45,7 +45,7 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps 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". */ diff --git a/packages/react-core/src/components/Pagination/ToggleTemplate.tsx b/packages/react-core/src/components/Pagination/ToggleTemplate.tsx index 71267b1055d..aa5e0f971f5 100644 --- a/packages/react-core/src/components/Pagination/ToggleTemplate.tsx +++ b/packages/react-core/src/components/Pagination/ToggleTemplate.tsx @@ -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 */ @@ -17,13 +17,13 @@ export interface ToggleTemplateProps { ofWord?: React.ReactNode; } -export const ToggleTemplate: React.FunctionComponent = ({ +export const ToggleTemplate: React.FunctionComponent = ({ firstIndex = 0, lastIndex = 0, itemCount = 0, itemsTitle = 'items', ofWord = 'of' -}: ToggleTemplateProps) => ( +}: PaginationToggleTemplateProps) => ( {firstIndex} - {lastIndex} diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/PaginationOptionsMenu.test.tsx b/packages/react-core/src/components/Pagination/__tests__/Generated/PaginationOptionsMenu.test.tsx index 8fc3f26037a..12a757e6460 100644 --- a/packages/react-core/src/components/Pagination/__tests__/Generated/PaginationOptionsMenu.test.tsx +++ b/packages/react-core/src/components/Pagination/__tests__/Generated/PaginationOptionsMenu.test.tsx @@ -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( @@ -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) => ( {firstIndex} - {lastIndex} diff --git a/packages/react-core/src/components/Pagination/examples/Pagination.md b/packages/react-core/src/components/Pagination/examples/Pagination.md index c11bd37a2e4..5a032df977d 100644 --- a/packages/react-core/src/components/Pagination/examples/Pagination.md +++ b/packages/react-core/src/components/Pagination/examples/Pagination.md @@ -2,7 +2,7 @@ id: Pagination section: components cssPrefix: null -propComponents: ['Pagination', PaginationTitles, PerPageOptions, ToggleTemplateProps] +propComponents: ['Pagination', PaginationTitles, PerPageOptions, PaginationToggleTemplateProps] ouia: true ---