react-router-pagination 3.1.20 → 3.2.0

package/babel.config.cjs

@@ -42,10 +42,10 @@ const plugins = [
     'module-resolver',
     {
       alias: {
-        '#pagination/centered/index.tsx': './src/pagination/centered/index.tsx',
-        '#pagination/standard/index.tsx': './src/pagination/standard/index.tsx',
-        '#pagination/component.tsx': './src/pagination/component.tsx',
-        '#pagination/index.tsx': './src/pagination/index.tsx'
+        '#pagination/centered': './src/pagination/centered/index.tsx',
+        '#pagination/standard': './src/pagination/standard/index.tsx',
+        '#pagination/component': './src/pagination/component.tsx',
+        '#pagination/index': './src/pagination/index.tsx'
       }
     }
   ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-pagination",
-  "version": "3.1.20",
+  "version": "3.2.0",
   "description": "A React Router Pagination component",
   "main": "./src/index.mjs",
   "type": "module",
@@ -25,6 +25,9 @@
     "build-storybook": "storybook build",
     "prepare": "husky install"
   },
+  "dependencies": {
+    "debug": "^4.3.4"
+  },
   "devDependencies": {
     "@babel/core": "^7.22.20",
     "@babel/eslint-parser": "^7.22.15",
@@ -34,12 +37,11 @@
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
     "@babel/register": "^7.22.15",
-    "@sequencemedia/hooks": "^1.0.453",
-    "@storybook/addon-essentials": "^7.4.3",
-    "@storybook/addon-links": "^7.4.3",
-    "@storybook/blocks": "^7.4.3",
-    "@storybook/react": "^7.4.3",
-    "@storybook/react-webpack5": "^7.4.3",
+    "@sequencemedia/hooks": "^1.0.454",
+    "@storybook/addon-essentials": "^7.4.4",
+    "@storybook/react": "^7.4.4",
+    "@storybook/react-webpack5": "^7.4.4",
+    "@types/debug": "^4.1.9",
     "@types/jest": "^29.5.5",
     "@types/react": "^18.2.22",
     "@types/react-router": "^5.1.20",
@@ -50,7 +52,7 @@
     "babel-plugin-module-resolver": "^5.0.0",
     "core-js": "^3.32.2",
     "cross-env": "^7.0.3",
-    "eslint": "^8.49.0",
+    "eslint": "^8.50.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-with-typescript": "35.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
@@ -64,30 +66,15 @@
     "react-router": "^6.16.0",
     "react-router-dom": "^6.16.0",
     "react-test-renderer": "^18.2.0",
-    "storybook": "^7.4.3",
+    "storybook": "^7.4.4",
     "typescript": "^5.2.2"
   },
   "imports": {
-    "#pagination/centered": {
-      "require": "./src/pagination/centered/index.cjs",
-      "import": "./src/pagination/centered/index.mjs"
-    },
-    "#pagination/common": {
-      "require": "./src/pagination/common/index.cjs",
-      "import": "./src/pagination/common/index.mjs"
-    },
-    "#pagination/standard": {
-      "require": "./src/pagination/standard/index.cjs",
-      "import": "./src/pagination/standard/index.mjs"
-    },
-    "#pagination/component": {
-      "require": "./src/pagination/component.cjs",
-      "import": "./src/pagination/component.mjs"
-    },
-    "#pagination": {
-      "require": "./src/pagination/index.cjs",
-      "import": "./src/pagination/index.mjs"
-    }
+    "#pagination/centered": "./src/pagination/centered/index.tsx",
+    "#pagination/common": "./src/pagination/common/index.mts",
+    "#pagination/standard": "./src/pagination/standard/index.tsx",
+    "#pagination/component": "./src/pagination/component.tsx",
+    "#pagination": "./src/pagination/index.tsx"
   },
   "exports": {
     ".": {

package/src/pagination/centered/index.tsx

@@ -1,13 +1,17 @@
+import debug from 'debug'
+
 import type {
   AbstractPaginationProps,
   AbstractPaginationState
-} from '../component.tsx'
+} from '#pagination/component'
 
 import AbstractPagination, {
   toInteger,
   calculateTotalPages,
   calculatePageNumber
-} from '../component.tsx'
+} from '#pagination/component'
+
+const error = debug('react-router-pagination/pagination/component')
 
 export {
   toInteger,
@@ -15,18 +19,20 @@ export {
   calculatePageNumber
 }
 
-interface CenteredProps extends AbstractPaginationProps {
+export interface CenteredProps extends AbstractPaginationProps {
   spread: string | number
+  onChange: (pageNumber: number) => void
 }
 
-interface CenteredState extends AbstractPaginationState {
+export interface CenteredState extends AbstractPaginationState {
   spread: number
 }
 
 export class Centered extends AbstractPagination<CenteredProps, CenteredState> {
   static defaultProps = {
     ...AbstractPagination.defaultProps,
-    spread: 3
+    spread: 3,
+    onChange () {}
   }
 
   state = {
@@ -82,4 +88,26 @@ export class Centered extends AbstractPagination<CenteredProps, CenteredState> {
   shouldComponentUpdate (props: CenteredProps): boolean {
     return super.shouldComponentUpdate(props) || (props.spread !== this.props.spread)
   }
+
+  handlePageNumberSelect = (pageNumber: number): any => {
+    const { onClick } = this.props
+
+    try {
+      onClick(pageNumber)
+    } catch {
+      error('Error `onClick`')
+    }
+
+    if (pageNumber !== this.state.pageNumber) {
+      this.setState({ pageNumber }, () => {
+        const { onChange } = this.props
+
+        try {
+          onChange(pageNumber)
+        } catch {
+          error('Error `onChange`')
+        }
+      })
+    }
+  }
 }

package/src/pagination/common/index.cjs

@@ -9,6 +9,4 @@ require('@babel/register')({
   ]
 })
 
-console.log(require('./index.mts'))
-
 module.exports = require('./index.mts')

package/src/pagination/component.tsx

@@ -19,7 +19,7 @@ import {
 
 const getListItemClassName = (currentPageNumber: string | number, pageNumber: string | number): string => (
   toInteger(currentPageNumber) === toInteger(pageNumber)
-    ? 'currentPage'
+    ? 'current-page'
     : 'page'
 )
 
@@ -50,7 +50,7 @@ export interface AbstractPaginationState {
 
 export default abstract class AbstractPagination<P, S> extends Component<P & AbstractPaginationProps, S & AbstractPaginationState> {
   static defaultProps = {
-    onClick: () => {},
+    onClick () {},
     pageNumber: 0,
     totalPages: 0,
     match: {}
@@ -106,8 +106,8 @@ export default abstract class AbstractPagination<P, S> extends Component<P & Abs
     if (this.hasReversePageLink(pageNumber, totalPages)) {
       const n = this.zeroIndex(pageNumber, totalPages)
       return (
-        <li key={getListItemKey('reverse')} className='reversePage'>
-          <Link to={getLinkTo(match, n)} onClick={() => this.handleClick(n)}>
+        <li key={getListItemKey('reverse')} className='reverse-page'>
+          <Link to={getLinkTo(match, n)} onClick={() => this.handlePageNumberSelect(n)}>
             <span className='reverse'>
               {'\u00AB'}
             </span>
@@ -122,9 +122,9 @@ export default abstract class AbstractPagination<P, S> extends Component<P & Abs
     if (this.hasForwardPageLink(pageNumber, totalPages)) {
       const n = this.lastIndex(pageNumber, totalPages) + 1
       return (
-        <li key={getListItemKey('forward')} className='forwardPage'>
-          <Link to={getLinkTo(match, n)} onClick={() => this.handleClick(n)}>
-            <span className='forwardPage'>
+        <li key={getListItemKey('forward')} className='forward-page'>
+          <Link to={getLinkTo(match, n)} onClick={() => this.handlePageNumberSelect(n)}>
+            <span className='forward-page'>
               {'\u00BB'}
             </span>
           </Link>
@@ -138,9 +138,9 @@ export default abstract class AbstractPagination<P, S> extends Component<P & Abs
     if (this.hasZeroPageLink(pageNumber, totalPages)) {
       const n = 1
       return (
-        <li key={getListItemKey(n)} className='zeroPage'>
-          <Link to={getLinkTo(match, n)} onClick={() => this.handleClick(n)}>
-            <span className='pageNumber'>
+        <li key={getListItemKey(n)} className='zero-page'>
+          <Link to={getLinkTo(match, n)} onClick={() => this.handlePageNumberSelect(n)}>
+            <span className='page-number'>
               {n}
             </span>
           </Link>
@@ -154,9 +154,9 @@ export default abstract class AbstractPagination<P, S> extends Component<P & Abs
     if (this.hasLastPageLink(pageNumber, totalPages)) {
       const n = toInteger(totalPages)
       return (
-        <li key={getListItemKey(n)} className='lastPage'>
-          <Link to={getLinkTo(match, n)} onClick={() => this.handleClick(n)}>
-            <span className='pageNumber'>
+        <li key={getListItemKey(n)} className='last-page'>
+          <Link to={getLinkTo(match, n)} onClick={() => this.handlePageNumberSelect(n)}>
+            <span className='page-number'>
               {n}
             </span>
           </Link>
@@ -174,8 +174,8 @@ export default abstract class AbstractPagination<P, S> extends Component<P & Abs
       const n = (i + 1)
       a.push((
         <li key={getListItemKey(n)} className={getListItemClassName(pageNumber, n)}>
-          <Link to={getLinkTo(match, n)} onClick={() => this.handleClick(n)}>
-            <span className='pageNumber'>
+          <Link to={getLinkTo(match, n)} onClick={() => this.handlePageNumberSelect(n)}>
+            <span className='page-number'>
               {n}
             </span>
           </Link>
@@ -200,7 +200,7 @@ export default abstract class AbstractPagination<P, S> extends Component<P & Abs
     )
   }
 
-  handleClick = (pageNumber: number): any => {
+  handlePageNumberSelect = (pageNumber: number): any => {
     this.props.onClick(pageNumber)
   }
 

package/src/pagination/standard/index.tsx

@@ -1,13 +1,17 @@
+import debug from 'debug'
+
 import type {
   AbstractPaginationProps,
   AbstractPaginationState
-} from '../component.tsx'
+} from '#pagination/component'
 
 import AbstractPagination, {
   toInteger,
   calculateTotalPages,
   calculatePageNumber
-} from '../component.tsx'
+} from '#pagination/component'
+
+const error = debug('react-router-pagination/pagination/component')
 
 export {
   toInteger,
@@ -15,18 +19,24 @@ export {
   calculatePageNumber
 }
 
-interface StandardProps extends AbstractPaginationProps {
+export interface StandardProps extends AbstractPaginationProps {
+  pageNumber: string | number
+  totalPages: string | number
   spread: string | number
+  onChange: (pageNumber: number) => void
 }
 
-interface StandardState extends AbstractPaginationState {
+export interface StandardState extends AbstractPaginationState {
+  pageNumber: number
+  totalPages: number
   spread: number
 }
 
 export class Standard extends AbstractPagination<StandardProps, StandardState> {
   static defaultProps = {
     ...AbstractPagination.defaultProps,
-    spread: 1
+    spread: 1,
+    onChange () {}
   }
 
   state = {
@@ -65,4 +75,26 @@ export class Standard extends AbstractPagination<StandardProps, StandardState> {
   shouldComponentUpdate (props: StandardProps): boolean {
     return super.shouldComponentUpdate(props) || (props.spread !== this.props.spread)
   }
+
+  handlePageNumberSelect = (pageNumber: number): any => {
+    const { onClick } = this.props
+
+    try {
+      onClick(pageNumber)
+    } catch {
+      error('Error `onClick`')
+    }
+
+    if (pageNumber !== this.state.pageNumber) {
+      this.setState({ pageNumber }, () => {
+        const { onChange } = this.props
+
+        try {
+          onChange(pageNumber)
+        } catch {
+          error('Error `onChange`')
+        }
+      })
+    }
+  }
 }

package/jest.config.cjs

@@ -1,13 +0,0 @@
-module.exports = {
-  bail: 1,
-  verbose: true,
-  rootDir: '.',
-  transform: {
-    '^.+\\.mts$': 'babel-jest',
-    '^.+\\.tsx$': 'babel-jest',
-    '^.+\\.mjs$': 'babel-jest',
-    '^.+\\.jsx$': 'babel-jest'
-  },
-  collectCoverage: true,
-  coverageDirectory: './.coverage'
-}

package/src/__tests__/pagination/__snapshots__/component.test.tsx.snap

@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`react-router-pagination/pagination/component <Pagination /> With \`pageNumber\` and \`totalPages\` renders 1`] = `
-<ul
-  className="pagination"
->
-  <li
-    className="forwardPage"
-  >
-    <a
-      href="/1"
-      onClick={[Function]}
-    >
-      <span
-        className="forwardPage"
-      >
-        »
-      </span>
-    </a>
-  </li>
-  <li
-    className="lastPage"
-  >
-    <a
-      href="/2"
-      onClick={[Function]}
-    >
-      <span
-        className="pageNumber"
-      >
-        2
-      </span>
-    </a>
-  </li>
-</ul>
-`;

package/src/__tests__/pagination/__snapshots__/index.test.tsx.snap

@@ -1,190 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`react-router-pagination <Centered /> With \`pageNumber\` and \`totalPages\` and \`spread\` renders 1`] = `
-<ul
-  className="pagination"
->
-  <li
-    className="zeroPage"
-  >
-    <a
-      href="/1"
-      onClick={[Function]}
-    >
-      <span
-        className="pageNumber"
-      >
-        1
-      </span>
-    </a>
-  </li>
-  <li
-    className="reversePage"
-  >
-    <a
-      href="/6"
-      onClick={[Function]}
-    >
-      <span
-        className="reverse"
-      >
-        «
-      </span>
-    </a>
-  </li>
-  <li
-    className="page"
-  >
-    <a
-      href="/7"
-      onClick={[Function]}
-    >
-      <span
-        className="pageNumber"
-      >
-        7
-      </span>
-    </a>
-  </li>
-  <li
-    className="page"
-  >
-    <a
-      href="/8"
-      onClick={[Function]}
-    >
-      <span
-        className="pageNumber"
-      >
-        8
-      </span>
-    </a>
-  </li>
-  <li
-    className="currentPage"
-  >
-    <a
-      href="/9"
-      onClick={[Function]}
-    >
-      <span
-        className="pageNumber"
-      >
-        9
-      </span>
-    </a>
-  </li>
-</ul>
-`;
-
-exports[`react-router-pagination <Pagination /> With \`pageNumber\` and \`totalPages\` renders 1`] = `
-<ul
-  className="pagination"
->
-  <li
-    className="forwardPage"
-  >
-    <a
-      href="/1"
-      onClick={[Function]}
-    >
-      <span
-        className="forwardPage"
-      >
-        »
-      </span>
-    </a>
-  </li>
-  <li
-    className="lastPage"
-  >
-    <a
-      href="/2"
-      onClick={[Function]}
-    >
-      <span
-        className="pageNumber"
-      >
-        2
-      </span>
-    </a>
-  </li>
-</ul>
-`;
-
-exports[`react-router-pagination <Standard /> With \`pageNumber\` and \`totalPages\` and \`spread\` renders 1`] = `
-<ul
-  className="pagination"
->
-  <li
-    className="zeroPage"
-  >
-    <a
-      href="/1"
-      onClick={[Function]}
-    >
-      <span
-        className="pageNumber"
-      >
-        1
-      </span>
-    </a>
-  </li>
-  <li
-    className="reversePage"
-  >
-    <a
-      href="/6"
-      onClick={[Function]}
-    >
-      <span
-        className="reverse"
-      >
-        «
-      </span>
-    </a>
-  </li>
-  <li
-    className="page"
-  >
-    <a
-      href="/7"
-      onClick={[Function]}
-    >
-      <span
-        className="pageNumber"
-      >
-        7
-      </span>
-    </a>
-  </li>
-  <li
-    className="page"
-  >
-    <a
-      href="/8"
-      onClick={[Function]}
-    >
-      <span
-        className="pageNumber"
-      >
-        8
-      </span>
-    </a>
-  </li>
-  <li
-    className="currentPage"
-  >
-    <a
-      href="/9"
-      onClick={[Function]}
-    >
-      <span
-        className="pageNumber"
-      >
-        9
-      </span>
-    </a>
-  </li>
-</ul>
-`;