react-responsive-pagination - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0-beta.1

CHANGELOG.md

 # React Responsive Pagination Changelog
 
+# [1.3.0-beta.1](https://github.com/jonelantha/react-responsive-pagination/compare/v1.2.0...v1.3.0-beta.1) (2021-10-27)
+
+
+### Features
+
+* Added props to override previous/next buttons ([abb60a8](https://github.com/jonelantha/react-responsive-pagination/commit/abb60a8fd4693596754261d26ec54a4d049d3c9c))
+
 # [1.2.0](https://github.com/jonelantha/react-responsive-pagination/compare/v1.1.9...v1.2.0) (2021-10-04)
@@ -4,0 +11,0 @@

lib.cjs/hooks/usePaginationItems.d.ts

@@ -1,4 +0,7 @@
-export declare function usePaginationItems(inputCurrent: number, inputTotal: number, maxWidth: number | undefined): {
+export declare function usePaginationItems(inputCurrent: number, inputTotal: number, maxWidth: number | undefined, options?: {
+    nextLabel?: string;
+    previousLabel?: string;
+}): {
     items: import("../paginationItem").PaginationItem[];
     ref: (element: HTMLElement | null) => void;
 };

lib.cjs/hooks/usePaginationItems.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePaginationItems = void 0;
+var react_1 = require("react");
 var compositions_1 = require("../compositions");
 var util_1 = require("../helpers/util");
 var useWidestComposition_1 = require("./useWidestComposition");
-function usePaginationItems(inputCurrent, inputTotal, maxWidth) {
+function usePaginationItems(inputCurrent, inputTotal, maxWidth, options) {
     var total = (0, util_1.sanatizeInteger)(inputTotal);
@@ -13,4 +25,19 @@ var current = total < 1 ? null : Math.max(1, Math.min((0, util_1.sanatizeInteger)(inputCurrent), total));
     };
-    return (0, useWidestComposition_1.useWidestComposition)(narrowToWideCompositionsProvider, maxWidth);
+    var _a = (0, useWidestComposition_1.useWidestComposition)(narrowToWideCompositionsProvider, maxWidth), items = _a.items, ref = _a.ref, clearCache = _a.clearCache;
+    (0, react_1.useEffect)(function () {
+        return function () { return clearCache(); };
+    }, [clearCache, options === null || options === void 0 ? void 0 : options.previousLabel, options === null || options === void 0 ? void 0 : options.nextLabel]);
+    var amendedItems = items.map(function (item) {
+        if (item.type === 'next' && (options === null || options === void 0 ? void 0 : options.nextLabel)) {
+            return __assign(__assign({}, item), { label: options === null || options === void 0 ? void 0 : options.nextLabel });
+        }
+        else if (item.type === 'previous' && (options === null || options === void 0 ? void 0 : options.previousLabel)) {
+            return __assign(__assign({}, item), { label: options === null || options === void 0 ? void 0 : options.previousLabel });
+        }
+        else {
+            return item;
+        }
+    });
+    return { items: amendedItems, ref: ref };
 }
 exports.usePaginationItems = usePaginationItems;

lib.cjs/hooks/useWidestComposition.d.ts

@@ -5,2 +5,3 @@ import { PaginationItem } from '../paginationItem';
     ref: (element: HTMLElement | null) => void;
+    clearCache: () => void;
 };

lib.cjs/hooks/useWidestComposition.js

@@ -29,3 +29,3 @@ "use strict";
     var width = (_a = maxWidth !== null && maxWidth !== void 0 ? maxWidth : availableWidth) !== null && _a !== void 0 ? _a : 0;
-    var _c = (0, useWidestCompositionForWidth_1.useWidestCompositionForWidth)(narrowToWideCompositionsProvider, width), items = _c.items, widestCompositionRef = _c.ref;
+    var _c = (0, useWidestCompositionForWidth_1.useWidestCompositionForWidth)(narrowToWideCompositionsProvider, width), items = _c.items, widestCompositionRef = _c.ref, clearCache = _c.clearCache;
     var ref = (0, react_1.useCallback)(function (element) {
@@ -38,4 +38,5 @@ (0, ref_1.setRefValue)(widestCompositionRef, element);
         ref: ref,
+        clearCache: clearCache,
     };
 }
 exports.useWidestComposition = useWidestComposition;

lib.cjs/hooks/useWidestCompositionForWidth.d.ts

@@ -6,2 +6,3 @@ import { ForwardedRef } from 'react';
     ref: ForwardedRef<HTMLElement | null>;
+    clearCache: () => void;
 };

lib.cjs/hooks/useWidestCompositionForWidth.js

@@ -20,2 +20,3 @@ "use strict";
             },
+            clearCache: clearCache,
         };
@@ -27,2 +28,3 @@ }
             ref: containerElementRef,
+            clearCache: clearCache,
         };
@@ -29,0 +31,0 @@ }

lib.cjs/index.d.ts

@@ -5,3 +5,3 @@ import React from 'react';
 export default _default;
-declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, extraClassName, }: BootstrapPaginationProps): JSX.Element | null;
+declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, extraClassName, previousLabel, nextLabel, }: BootstrapPaginationProps): JSX.Element | null;
 declare namespace BootstrapPagination {
@@ -14,2 +14,4 @@ var propTypes: {
         extraClassName: PropTypes.Requireable<string>;
+        previousLabel: PropTypes.Requireable<string>;
+        nextLabel: PropTypes.Requireable<string>;
     };
@@ -23,2 +25,4 @@ }
     extraClassName?: string;
+    previousLabel?: string;
+    nextLabel?: string;
 };

lib.cjs/index.js

@@ -32,4 +32,7 @@ "use strict";
 function BootstrapPagination(_a) {
-    var current = _a.current, total = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth, _b = _a.extraClassName, extraClassName = _b === void 0 ? 'justify-content-center' : _b;
-    var _c = (0, usePaginationItems_1.usePaginationItems)(current, total, maxWidth), items = _c.items, ref = _c.ref;
+    var current = _a.current, total = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth, _b = _a.extraClassName, extraClassName = _b === void 0 ? 'justify-content-center' : _b, previousLabel = _a.previousLabel, nextLabel = _a.nextLabel;
+    var _c = (0, usePaginationItems_1.usePaginationItems)(current, total, maxWidth, {
+        previousLabel: previousLabel,
+        nextLabel: nextLabel,
+    }), items = _c.items, ref = _c.ref;
     if (items.length === 0)
@@ -57,2 +60,4 @@ return null;
     extraClassName: prop_types_1.default.string,
+    previousLabel: prop_types_1.default.string,
+    nextLabel: prop_types_1.default.string,
 };
@@ -59,0 +64,0 @@ function getLabel(label, a11yLabel) {

lib/hooks/usePaginationItems.d.ts

@@ -1,4 +0,7 @@
-export declare function usePaginationItems(inputCurrent: number, inputTotal: number, maxWidth: number | undefined): {
+export declare function usePaginationItems(inputCurrent: number, inputTotal: number, maxWidth: number | undefined, options?: {
+    nextLabel?: string;
+    previousLabel?: string;
+}): {
     items: import("../paginationItem").PaginationItem[];
     ref: (element: HTMLElement | null) => void;
 };

lib/hooks/usePaginationItems.js

@@ -0,5 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useEffect } from 'react';
 import { narrowToWideCompositions } from '../compositions';
 import { sanatizeInteger } from '../helpers/util';
 import { useWidestComposition } from './useWidestComposition';
-export function usePaginationItems(inputCurrent, inputTotal, maxWidth) {
+export function usePaginationItems(inputCurrent, inputTotal, maxWidth, options) {
     var total = sanatizeInteger(inputTotal);
@@ -10,3 +22,18 @@ var current = total < 1 ? null : Math.max(1, Math.min(sanatizeInteger(inputCurrent), total));
     };
-    return useWidestComposition(narrowToWideCompositionsProvider, maxWidth);
+    var _a = useWidestComposition(narrowToWideCompositionsProvider, maxWidth), items = _a.items, ref = _a.ref, clearCache = _a.clearCache;
+    useEffect(function () {
+        return function () { return clearCache(); };
+    }, [clearCache, options === null || options === void 0 ? void 0 : options.previousLabel, options === null || options === void 0 ? void 0 : options.nextLabel]);
+    var amendedItems = items.map(function (item) {
+        if (item.type === 'next' && (options === null || options === void 0 ? void 0 : options.nextLabel)) {
+            return __assign(__assign({}, item), { label: options === null || options === void 0 ? void 0 : options.nextLabel });
+        }
+        else if (item.type === 'previous' && (options === null || options === void 0 ? void 0 : options.previousLabel)) {
+            return __assign(__assign({}, item), { label: options === null || options === void 0 ? void 0 : options.previousLabel });
+        }
+        else {
+            return item;
+        }
+    });
+    return { items: amendedItems, ref: ref };
 }

lib/hooks/useWidestComposition.d.ts

@@ -5,2 +5,3 @@ import { PaginationItem } from '../paginationItem';
     ref: (element: HTMLElement | null) => void;
+    clearCache: () => void;
 };

lib/hooks/useWidestComposition.js

@@ -26,3 +26,3 @@ var __read = (this && this.__read) || function (o, n) {
     var width = (_a = maxWidth !== null && maxWidth !== void 0 ? maxWidth : availableWidth) !== null && _a !== void 0 ? _a : 0;
-    var _c = useWidestCompositionForWidth(narrowToWideCompositionsProvider, width), items = _c.items, widestCompositionRef = _c.ref;
+    var _c = useWidestCompositionForWidth(narrowToWideCompositionsProvider, width), items = _c.items, widestCompositionRef = _c.ref, clearCache = _c.clearCache;
     var ref = useCallback(function (element) {
@@ -35,3 +35,4 @@ setRefValue(widestCompositionRef, element);
         ref: ref,
+        clearCache: clearCache,
     };
 }

lib/hooks/useWidestCompositionForWidth.d.ts

@@ -6,2 +6,3 @@ import { ForwardedRef } from 'react';
     ref: ForwardedRef<HTMLElement | null>;
+    clearCache: () => void;
 };

lib/hooks/useWidestCompositionForWidth.js

@@ -17,2 +17,3 @@ import { useRef } from 'react';
             },
+            clearCache: clearCache,
         };
@@ -24,2 +25,3 @@ }
             ref: containerElementRef,
+            clearCache: clearCache,
         };
@@ -26,0 +28,0 @@ }

lib/index.d.ts

@@ -5,3 +5,3 @@ import React from 'react';
 export default _default;
-declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, extraClassName, }: BootstrapPaginationProps): JSX.Element | null;
+declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, extraClassName, previousLabel, nextLabel, }: BootstrapPaginationProps): JSX.Element | null;
 declare namespace BootstrapPagination {
@@ -14,2 +14,4 @@ var propTypes: {
         extraClassName: PropTypes.Requireable<string>;
+        previousLabel: PropTypes.Requireable<string>;
+        nextLabel: PropTypes.Requireable<string>;
     };
@@ -23,2 +25,4 @@ }
     extraClassName?: string;
+    previousLabel?: string;
+    nextLabel?: string;
 };

lib/index.js

@@ -8,4 +8,7 @@ import React, { memo } from 'react';
 function BootstrapPagination(_a) {
-    var current = _a.current, total = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth, _b = _a.extraClassName, extraClassName = _b === void 0 ? 'justify-content-center' : _b;
-    var _c = usePaginationItems(current, total, maxWidth), items = _c.items, ref = _c.ref;
+    var current = _a.current, total = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth, _b = _a.extraClassName, extraClassName = _b === void 0 ? 'justify-content-center' : _b, previousLabel = _a.previousLabel, nextLabel = _a.nextLabel;
+    var _c = usePaginationItems(current, total, maxWidth, {
+        previousLabel: previousLabel,
+        nextLabel: nextLabel,
+    }), items = _c.items, ref = _c.ref;
     if (items.length === 0)
@@ -33,2 +36,4 @@ return null;
     extraClassName: PropTypes.string,
+    previousLabel: PropTypes.string,
+    nextLabel: PropTypes.string,
 };
@@ -35,0 +40,0 @@ function getLabel(label, a11yLabel) {

package.json

 {
   "name": "react-responsive-pagination",
-  "version": "1.2.0",
+  "version": "1.3.0-beta.1",
   "description": "React component for responsive pagination",
@@ -5,0 +5,0 @@ "author": "Jon Pollard",

README.md

@@ -57,8 +57,10 @@ # React Responsive Pagination
 
-| Prop name           | Type                      | Description                                                                                                                                                                                                                                 |
-| ------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| current             | number                    | The current active page. Indexed from 1                                                                                                                                                                                                     |
-| total               | number                    | The total number of pages                                                                                                                                                                                                                   |
-| onPageChange        | (newPage: number) => void | A callback handler which is called when the user clicks a new page, note that the active page will not change unless the `current` prop is updated to reflect the new page (as in the example above). The `newPage` value is indexed from 1 |
-| maxWidth (optional) | number                    | (optional) The maximum width (in pixels) of the pagination component. Specify a value if you want to override the automatic sizing. Note this width may be exceeded in the case where it's not possible to output a small enough component  |
+| Prop name                | Type                      | Description                                                                                                                                                                                                                                 |
+| ------------------------ | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| current                  | number                    | The current active page. Indexed from 1                                                                                                                                                                                                     |
+| total                    | number                    | The total number of pages                                                                                                                                                                                                                   |
+| onPageChange             | (newPage: number) => void | A callback handler which is called when the user clicks a new page, note that the active page will not change unless the `current` prop is updated to reflect the new page (as in the example above). The `newPage` value is indexed from 1 |
+| maxWidth (optional)      | number                    | (optional) The maximum width (in pixels) of the pagination component. Specify a value if you want to override the automatic sizing. Note this width may be exceeded in the case where it's not possible to output a small enough component  |
+| previousLabel (optional) | string                    | (optional) The label for the previous button, default value is `«`                                                                                                                                                                          |
+| nextLabel (optional)     | string                    | (optional) The label for the next button, default value is `»`                                                                                                                                                                              |
 
@@ -65,0 +67,0 @@ ## ℹ About Auto Sizing

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

126123

increased by4.18%

Lines of code

2743

increased by3.31%

Number of lines in readme file

69

increased by2.99%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes