chore(pagination): rename ToggleTemplateProps to `PaginationToggleT…

…emplateProps` in pagination component (patternfly#8134)
tlabaj · Oct 13, 2022 · 56528f9 · 56528f9
1 parent 4542bff
commit 56528f9
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 15 deletions.
diff --git 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<HTMLDivElement> {
@@ -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;
 }

diff --git 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<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. */
@@ -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
@@ -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}

diff --git a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
@@ -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> {
@@ -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". */

diff --git 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<ToggleTemplateProps> = ({
+export const ToggleTemplate: React.FunctionComponent<PaginationToggleTemplateProps> = ({
   firstIndex = 0,
   lastIndex = 0,
   itemCount = 0,
   itemsTitle = 'items',
   ofWord = 'of'
-}: ToggleTemplateProps) => (
+}: PaginationToggleTemplateProps) => (
   <React.Fragment>
     <b>
       {firstIndex} - {lastIndex}

diff --git a/...s/react-core/src/components/Pagination/__tests__/Generated/PaginationOptionsMenu.test.tsx b/...s/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) => (
         <React.Fragment>
           <b>
             {firstIndex} - {lastIndex}

diff --git 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
 ---