react-responsive-pagination - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4-beta.1

CHANGELOG.md

 # React Responsive Pagination Changelog
 
+## [1.1.4-beta.1](https://github.com/jonelantha/react-responsive-pagination/compare/v1.1.3...v1.1.4-beta.1) (2021-05-05)
+
+
+### Bug Fixes
+
+* Dependency updates ([58ffac7](https://github.com/jonelantha/react-responsive-pagination/commit/58ffac7a77c8a5e76e130b0002658a85a92f7928))
+* Hot reloading issue ([edf2955](https://github.com/jonelantha/react-responsive-pagination/commit/edf2955c91f70a036d9406ac08670aa23e10ad4d))
+
 ## [1.1.3](https://github.com/jonelantha/react-responsive-pagination/compare/v1.1.2...v1.1.3) (2021-03-17)
@@ -4,0 +12,0 @@

lib.cjs/compositions/index.d.ts

@@ -1,2 +0,2 @@
-import { ViewItem } from '../view';
-export declare function narrowToWideCompositions(current: number, total: number): Generator<ViewItem[], void, unknown>;
+import { PaginationItem } from '../paginationItem';
+export declare function narrowToWideCompositions(current: number | null, total: number): Generator<PaginationItem[], void, unknown>;

lib.cjs/compositions/index.js

@@ -65,3 +65,3 @@ "use strict";
 var ranges_1 = require("./ranges");
-var view_1 = require("../view");
+var paginationItem_1 = require("../paginationItem");
 function narrowToWideCompositions(current, total) {
@@ -73,2 +73,4 @@ var leftRanges, rightRanges, staggeredPairs, staggeredPairs_1, staggeredPairs_1_1, _a, leftRange, rightRange, e_1_1;
             case 0:
+                if (current === null)
+                    return [2 /*return*/];
                 leftRanges = ranges_1.narrowToWideRanges(1, current - 1, 'left');
@@ -168,9 +170,9 @@ rightRanges = ranges_1.narrowToWideRanges(current + 1, total, 'right');
 function activePage(current) {
-    return view_1.createViewItem.page(current, true);
+    return paginationItem_1.createPageItem(current, true);
 }
 function navPrevious(current) {
-    return view_1.createViewItem.nav('previous', current > 1 ? current - 1 : undefined);
+    return paginationItem_1.createNavItem('previous', current > 1 ? current - 1 : undefined);
 }
 function navNext(current, total) {
-    return view_1.createViewItem.nav('next', current < total ? current + 1 : undefined);
+    return paginationItem_1.createNavItem('next', current < total ? current + 1 : undefined);
 }

lib.cjs/compositions/ranges.d.ts

@@ -1,3 +0,23 @@
-import { EllipsisPosition } from '../view';
-export { narrowToWideViewItemRanges as narrowToWideRanges };
-declare function narrowToWideViewItemRanges(start: number, end: number, ellipsisPos: EllipsisPosition): Generator<import("../view").ViewItem[], void, unknown>;
+import { EllipsisPosition } from '../paginationItem';
+export { narrowToWidePaginationItemRanges as narrowToWideRanges };
+declare function narrowToWidePaginationItemRanges(start: number, end: number, ellipsisPos: EllipsisPosition): Generator<(({
+    type: string;
+    key: string;
+    label: string;
+    a11yLabel?: string | undefined;
+} & {
+    gotoPage: number;
+    active?: boolean | undefined;
+} & {
+    type: "page";
+}) | ({
+    type: string;
+    key: string;
+    label: string;
+    a11yLabel?: string | undefined;
+} & {
+    gotoPage: undefined;
+    a11yHidden?: boolean | undefined;
+} & {
+    type: "ellipsis";
+}))[], void, unknown>;

lib.cjs/compositions/ranges.js

@@ -63,4 +63,4 @@ "use strict";
 exports.narrowToWideRanges = void 0;
-var view_1 = require("../view");
-function narrowToWideViewItemRanges(start, end, ellipsisPos) {
+var paginationItem_1 = require("../paginationItem");
+function narrowToWidePaginationItemRanges(start, end, ellipsisPos) {
     var _a, _b, range, e_1_1;
@@ -77,3 +77,3 @@ var e_1, _c;
                 range = _b.value;
-                return [4 /*yield*/, toViewItems(range, ellipsisPos)];
+                return [4 /*yield*/, toPaginationItems(range, ellipsisPos)];
             case 2:
@@ -100,3 +100,3 @@ _d.sent();
 }
-exports.narrowToWideRanges = narrowToWideViewItemRanges;
+exports.narrowToWideRanges = narrowToWidePaginationItemRanges;
 function narrowToWideNumberRanges(first, last, ellipsisPos) {
@@ -138,7 +138,7 @@ var fullWidth, iterationWidth, range;
 }
-function toViewItems(numberRange, ellipsisPos) {
+function toPaginationItems(numberRange, ellipsisPos) {
     return numberRange.map(function (number) {
         if (number === '...')
-            return view_1.createViewItem.ellipsis(ellipsisPos);
-        return view_1.createViewItem.page(number, false);
+            return paginationItem_1.createEllipsisItem(ellipsisPos);
+        return paginationItem_1.createPageItem(number, false);
     });
@@ -145,0 +145,0 @@ }

lib.cjs/index.d.ts

 import React from 'react';
 import PropTypes from 'prop-types';
-import { SkinComponent } from './skins';
-import { PageChangeHandler } from './view';
-export { SkinComponent };
-declare const _default: React.MemoExoticComponent<typeof Pagination>;
+declare const _default: React.MemoExoticComponent<typeof BootstrapPagination>;
 export default _default;
-declare function Pagination({ current: propsCurrent, total: propsTotal, onPageChange: handlePageChange, maxWidth, }: Props): JSX.Element | null;
-declare namespace Pagination {
+declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, }: BootstrapPaginationProps): JSX.Element | null;
+declare namespace BootstrapPagination {
     var propTypes: {
@@ -17,7 +14,7 @@ current: PropTypes.Validator<number>;
 }
-declare type Props = {
+declare type BootstrapPaginationProps = {
     current: number;
     total: number;
-    onPageChange: PageChangeHandler;
+    onPageChange: (page: number) => void;
     maxWidth?: number;
 };

lib.cjs/index.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);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
@@ -38,29 +27,22 @@ if (k2 === undefined) k2 = k;
 var prop_types_1 = __importDefault(require("prop-types"));
-var compositions_1 = require("./compositions");
-var skins_1 = require("./skins");
-var view_1 = require("./view");
-var AutoWidthRenderer_1 = __importDefault(require("./renderers/AutoWidthRenderer"));
-var MaxWidthRenderer_1 = __importDefault(require("./renderers/MaxWidthRenderer"));
-var util_1 = require("./helpers/util");
-exports.default = react_1.memo(Pagination);
-function Pagination(_a) {
-    var propsCurrent = _a.current, propsTotal = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth;
-    var total = util_1.sanatizeInteger(propsTotal);
-    var current = Math.max(1, Math.min(util_1.sanatizeInteger(propsCurrent), total));
-    var Skin = skins_1.BootstrapSkin;
-    var View = view_1.useView(Skin, handlePageChange);
-    var narrowToWideCompositionsProvider = function () {
-        return compositions_1.narrowToWideCompositions(current, total);
-    };
-    if (total <= 0) {
+var usePaginationItems_1 = require("./hooks/usePaginationItems");
+var dom_1 = require("./helpers/dom");
+exports.default = react_1.memo(BootstrapPagination);
+/* eslint-disable jsx-a11y/anchor-is-valid */
+function BootstrapPagination(_a) {
+    var current = _a.current, total = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth;
+    var _b = usePaginationItems_1.usePaginationItems(current, total, maxWidth), items = _b.items, ref = _b.ref;
+    if (items.length === 0)
         return null;
-    }
-    else if (maxWidth === undefined) {
-        return react_1.default.createElement(AutoWidthRenderer_1.default, __assign({}, { narrowToWideCompositionsProvider: narrowToWideCompositionsProvider, View: View }));
-    }
-    else {
-        return (react_1.default.createElement(MaxWidthRenderer_1.default, __assign({}, { maxWidth: maxWidth, narrowToWideCompositionsProvider: narrowToWideCompositionsProvider, View: View })));
-    }
+    return (react_1.default.createElement("ul", { className: "pagination justify-content-center", ref: ref }, items.map(function (item) {
+        return item.gotoPage !== undefined ? (
+        // item = ClickableItem
+        react_1.default.createElement("li", { key: item.key, className: "page-item" + (item.active ? ' active' : '') },
+            react_1.default.createElement("a", { className: "page-link", href: "#", onClick: dom_1.preventDefault(function () { return handlePageChange(item.gotoPage); }), "aria-label": item.a11yLabel }, getLabel(item.label, item.a11yLabel)))) : (
+        // item = NonClickableItem
+        react_1.default.createElement("li", { key: item.key, className: "page-item disabled", "aria-hidden": item.a11yHidden },
+            react_1.default.createElement("span", { className: "page-link" }, getLabel(item.label, item.a11yLabel))));
+    })));
 }
-Pagination.propTypes = {
+BootstrapPagination.propTypes = {
     current: prop_types_1.default.number.isRequired,
@@ -71,1 +53,6 @@ total: prop_types_1.default.number.isRequired,
 };
+function getLabel(label, a11yLabel) {
+    return a11yLabel ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", { "aria-hidden": "true" }, label),
+        react_1.default.createElement("span", { className: "sr-only" }, a11yLabel))) : (label);
+}

lib/compositions/index.d.ts

@@ -1,2 +0,2 @@
-import { ViewItem } from '../view';
-export declare function narrowToWideCompositions(current: number, total: number): Generator<ViewItem[], void, unknown>;
+import { PaginationItem } from '../paginationItem';
+export declare function narrowToWideCompositions(current: number | null, total: number): Generator<PaginationItem[], void, unknown>;

lib/compositions/index.js

@@ -62,3 +62,3 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { narrowToWideRanges } from './ranges';
-import { createViewItem } from '../view';
+import { createNavItem, createPageItem } from '../paginationItem';
 export function narrowToWideCompositions(current, total) {
@@ -70,2 +70,4 @@ var leftRanges, rightRanges, staggeredPairs, staggeredPairs_1, staggeredPairs_1_1, _a, leftRange, rightRange, e_1_1;
             case 0:
+                if (current === null)
+                    return [2 /*return*/];
                 leftRanges = narrowToWideRanges(1, current - 1, 'left');
@@ -164,9 +166,9 @@ rightRanges = narrowToWideRanges(current + 1, total, 'right');
 function activePage(current) {
-    return createViewItem.page(current, true);
+    return createPageItem(current, true);
 }
 function navPrevious(current) {
-    return createViewItem.nav('previous', current > 1 ? current - 1 : undefined);
+    return createNavItem('previous', current > 1 ? current - 1 : undefined);
 }
 function navNext(current, total) {
-    return createViewItem.nav('next', current < total ? current + 1 : undefined);
+    return createNavItem('next', current < total ? current + 1 : undefined);
 }

lib/compositions/ranges.d.ts

@@ -1,3 +0,23 @@
-import { EllipsisPosition } from '../view';
-export { narrowToWideViewItemRanges as narrowToWideRanges };
-declare function narrowToWideViewItemRanges(start: number, end: number, ellipsisPos: EllipsisPosition): Generator<import("../view").ViewItem[], void, unknown>;
+import { EllipsisPosition } from '../paginationItem';
+export { narrowToWidePaginationItemRanges as narrowToWideRanges };
+declare function narrowToWidePaginationItemRanges(start: number, end: number, ellipsisPos: EllipsisPosition): Generator<(({
+    type: string;
+    key: string;
+    label: string;
+    a11yLabel?: string | undefined;
+} & {
+    gotoPage: number;
+    active?: boolean | undefined;
+} & {
+    type: "page";
+}) | ({
+    type: string;
+    key: string;
+    label: string;
+    a11yLabel?: string | undefined;
+} & {
+    gotoPage: undefined;
+    a11yHidden?: boolean | undefined;
+} & {
+    type: "ellipsis";
+}))[], void, unknown>;

lib/compositions/ranges.js

@@ -60,5 +60,5 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
-import { createViewItem } from '../view';
-export { narrowToWideViewItemRanges as narrowToWideRanges };
-function narrowToWideViewItemRanges(start, end, ellipsisPos) {
+import { createEllipsisItem, createPageItem, } from '../paginationItem';
+export { narrowToWidePaginationItemRanges as narrowToWideRanges };
+function narrowToWidePaginationItemRanges(start, end, ellipsisPos) {
     var _a, _b, range, e_1_1;
@@ -75,3 +75,3 @@ var e_1, _c;
                 range = _b.value;
-                return [4 /*yield*/, toViewItems(range, ellipsisPos)];
+                return [4 /*yield*/, toPaginationItems(range, ellipsisPos)];
             case 2:
@@ -134,7 +134,7 @@ _d.sent();
 }
-function toViewItems(numberRange, ellipsisPos) {
+function toPaginationItems(numberRange, ellipsisPos) {
     return numberRange.map(function (number) {
         if (number === '...')
-            return createViewItem.ellipsis(ellipsisPos);
-        return createViewItem.page(number, false);
+            return createEllipsisItem(ellipsisPos);
+        return createPageItem(number, false);
     });
@@ -141,0 +141,0 @@ }

lib/index.d.ts

 import React from 'react';
 import PropTypes from 'prop-types';
-import { SkinComponent } from './skins';
-import { PageChangeHandler } from './view';
-export { SkinComponent };
-declare const _default: React.MemoExoticComponent<typeof Pagination>;
+declare const _default: React.MemoExoticComponent<typeof BootstrapPagination>;
 export default _default;
-declare function Pagination({ current: propsCurrent, total: propsTotal, onPageChange: handlePageChange, maxWidth, }: Props): JSX.Element | null;
-declare namespace Pagination {
+declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, }: BootstrapPaginationProps): JSX.Element | null;
+declare namespace BootstrapPagination {
     var propTypes: {
@@ -17,7 +14,7 @@ current: PropTypes.Validator<number>;
 }
-declare type Props = {
+declare type BootstrapPaginationProps = {
     current: number;
     total: number;
-    onPageChange: PageChangeHandler;
+    onPageChange: (page: number) => void;
     maxWidth?: number;
 };

lib/index.js

@@ -1,41 +0,23 @@
-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 React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { narrowToWideCompositions } from './compositions';
-import { BootstrapSkin } from './skins';
-import { useView } from './view';
-import AutoWidthRenderer from './renderers/AutoWidthRenderer';
-import MaxWidthRenderer from './renderers/MaxWidthRenderer';
-import { sanatizeInteger } from './helpers/util';
-export default memo(Pagination);
-function Pagination(_a) {
-    var propsCurrent = _a.current, propsTotal = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth;
-    var total = sanatizeInteger(propsTotal);
-    var current = Math.max(1, Math.min(sanatizeInteger(propsCurrent), total));
-    var Skin = BootstrapSkin;
-    var View = useView(Skin, handlePageChange);
-    var narrowToWideCompositionsProvider = function () {
-        return narrowToWideCompositions(current, total);
-    };
-    if (total <= 0) {
+import { usePaginationItems } from './hooks/usePaginationItems';
+import { preventDefault } from './helpers/dom';
+export default memo(BootstrapPagination);
+/* eslint-disable jsx-a11y/anchor-is-valid */
+function BootstrapPagination(_a) {
+    var current = _a.current, total = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth;
+    var _b = usePaginationItems(current, total, maxWidth), items = _b.items, ref = _b.ref;
+    if (items.length === 0)
         return null;
-    }
-    else if (maxWidth === undefined) {
-        return React.createElement(AutoWidthRenderer, __assign({}, { narrowToWideCompositionsProvider: narrowToWideCompositionsProvider, View: View }));
-    }
-    else {
-        return (React.createElement(MaxWidthRenderer, __assign({}, { maxWidth: maxWidth, narrowToWideCompositionsProvider: narrowToWideCompositionsProvider, View: View })));
-    }
+    return (React.createElement("ul", { className: "pagination justify-content-center", ref: ref }, items.map(function (item) {
+        return item.gotoPage !== undefined ? (
+        // item = ClickableItem
+        React.createElement("li", { key: item.key, className: "page-item" + (item.active ? ' active' : '') },
+            React.createElement("a", { className: "page-link", href: "#", onClick: preventDefault(function () { return handlePageChange(item.gotoPage); }), "aria-label": item.a11yLabel }, getLabel(item.label, item.a11yLabel)))) : (
+        // item = NonClickableItem
+        React.createElement("li", { key: item.key, className: "page-item disabled", "aria-hidden": item.a11yHidden },
+            React.createElement("span", { className: "page-link" }, getLabel(item.label, item.a11yLabel))));
+    })));
 }
-Pagination.propTypes = {
+BootstrapPagination.propTypes = {
     current: PropTypes.number.isRequired,
@@ -46,1 +28,6 @@ total: PropTypes.number.isRequired,
 };
+function getLabel(label, a11yLabel) {
+    return a11yLabel ? (React.createElement(React.Fragment, null,
+        React.createElement("span", { "aria-hidden": "true" }, label),
+        React.createElement("span", { className: "sr-only" }, a11yLabel))) : (label);
+}

package.json

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

README.md

@@ -10,9 +10,10 @@ # React Responsive Pagination
 
-A React pagination component which intelligently renders to the available width. Styled for Bootstrap 4
+A React pagination component which intelligently renders to the available width.  
+Styled for Bootstrap 4.
 
-![Example pagination](./pagination.png?raw=true 'React Responsive Pagination')
+<img src="./react-responsive-pagination.gif?raw=true" width="985" alt="react-responsive-pagination example" />
 
 ## How do I use it?
 
-- Make sure your project is using the [Bootstrap 4 CSS styles](https://getbootstrap.com/docs/4.3/getting-started/download/)
+- Make sure your project is either using the [Bootstrap 4 CSS styles](https://getbootstrap.com/docs/4.6/getting-started/download/) or alternatively you can provide your own styles, see [Requirements](#requirements--compatibility) below
 
@@ -33,6 +34,11 @@ - Include the pagination component in your React project with `npm install react-responsive-pagination`
 
-- [Bootstrap 4 CSS styles](https://getbootstrap.com/docs/4.3/getting-started/download/) used in your project
+- Provide the correct styles in your project:
 
-- Modern browsers only (IE 11 is untested and unlikely to work)
+  - Either [Bootstrap 4 CSS styles](https://getbootstrap.com/docs/4.6/getting-started/download/)
+  - Or alternatively you can use your own styles, here are some examples:
+    - [Minimal styles](./css/min.css)
+    - [Bootstrap pagination styles](./css/minBootstrap.css)
 
+- Modern browsers only - not suitable for IE 11
+
 ### Usage Example
@@ -71,7 +77,7 @@
 
-| 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     | number                    | 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  |

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Number of lines in readme file

81

increased by8%

Worsened metrics

Total package byte prevSize

117278

decreased by-15.89%

Number of package files

103

decreased by-21.37%

Lines of code

2625

decreased by-11.35%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes