Codemods

Pagination Transform

Converts a v6 Pagination component to a v7 Pagination component.

Automatic Changes

• Adds id prop if not present. The id prop is now required. Update prop value to an appropriate value.
• Renames the selected prop to selectedPage.
• Renames the skipFirstText prop to labelOverrides.skipToFirstScreenReaderLabel.
• Renames the previousText prop to labelOverrides.previousScreenReaderLabel.
• Renames the nextText prop to labelOverrides.nextScreenReaderLabel.
• Renames the skipLastText prop to labelOverrides.skipToLastScreenReaderLabel.
• Removes the getLinkUrl prop, which has been deprecated.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { Pagination } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <Pagination
6      selected={selectedPage}
7      total={100}
8      onChange={setSelectedPage}
9      skipFirstText="Custom skip first text"
10      previousText="Custom previous text"
11      nextText="Custom next text"
12      skipLastText="Custom skip last text"
13      getSelectedPageLabel={(selected, total) =>
14        `Custom selected page label: ${page} of ${total}`
15      }
16      getLinkUrl={(page) => `https://www.example.com/page/${page}`}
17      theme={{ color: 'red' }}
18      {...otherProps}
19    />
20  );
21}

Transforms into:

1import { Pagination } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <Pagination
6      id="unique-id-for-pagination"
7      selectedPage={selectedPage}
8      total={100} // needs manual change
9      onChange={setSelectedPage}
10      getSelectedPageLabel={(selected, total) =>
11        `Custom selected page label: ${page} of ${total}`
12      }
13      {...otherProps}
14      labelOverrides={{
15        skipToFirstScreenReaderLabel: 'Custom skip first text',
16        previousScreenReaderLabel: 'Custom previous text',
17        nextScreenReaderLabel: 'Custom next text',
18        skipToLastScreenReaderLabel: 'Custom skip last text',
19      }}
20    />
21  );
22}

Manual Changes

The Pagination component now includes “Results Per Page” functionality by default. This significantly changes the behavior of the component. See the component documentation for more info on the “Results Per Page” functionality and other new props.

The total prop has been deprecated in favor of totalResults. The total prop was for the total number of pages, whereas the totalResults prop is for the total number of results.