react-pagenate 押下後にページングをキャンセルする

はじめに

react-pagenateは、React上でページングUIを実装するためのライブラリです。
このライブラリでページングアイテムを押下後、特定の条件であればページングをキャンセルする処理を実装します。

実装方法

挙動に関連する実装のみ記載します。

const handleClick = (event: {
  index: number | null;
  selected: number;
  nextSelectedPage: number | undefined;
  event: object;
  isPrevious: boolean;
  isNext: boolean;
  isBreak: boolean;
  isActive: boolean;
}) => {
  if (isCansel) {
    // キャンセルする場合はfalseを返却
    return false;
  }
};

const handlePageChange = (event: { selected: number }) => {
  // 処理
};

<ReactPaginate
  onClick={handleClick}
  onPageChange={handlePageChange}
/>

仕組み

onClickの実行後、onPageChangeが実行されます。
onClickの返却値がfalseの場合、onPageChangeの実行がキャンセルされます。

onPageChangeでキャンセルできるか

forcePageを指定していない場合

onPageChangeにおけるキャンセルはできません。
<ReactPaginate>にforcePageを指定していない場合、ページインデックスの管理は<ReactPaginate>内部のみで行われます。
内部のページインデックス更新はonClick後かつonPageChange前に実行されるため、onPageChangeに到達したときには更新済みとなっています。

forcePageを指定している場合

onPageChangeではなくonClickによるキャンセルを推奨します。

<ReactPaginate
  forcePage={pageIndex}
  onClick={handleClick}
  onPageChange={handlePageChange}
/>

forcePageが指定されている場合、ページインデックスは実質的に2種類存在することになります。
1つ目はforcePageの指定値、2つ目は<ReactPaginate>が内部で持つ値です。
この2つは同一の値になることは保証されていません。

内部のページインデックスは、forcePageを指定していない場合同様、onClick後かつonPageChange前に更新されます。
各ページ番号の要素に付与されるCSSクラスは、forcePageの指定値ではなく内部のページインデックスと関連しています。
内部のページインデックスと等しいページ番号の<li>には、デフォルトでselectedクラスが付与されます。

<li class="selected">

onPageChangeでキャンセルを行う場合、内部のページインデックスは直前の押下対象に更新され、画面上も直前の押下対象がアクティブなページ要素として表示されます。
しかしonPageChange内のforcePage更新はキャンセルされるので、両者の値が異なる状態が生じます。
この挙動を避けるため、onPageChangeではなくonClickによるキャンセルを推奨します。