react-responsive-pagination - npm Package Compare versions

Comparing version 2.3.0 to 2.4.0-beta.1

CHANGELOG.md

 # React Responsive Pagination Changelog
 
+# [2.4.0-beta.1](https://github.com/jonelantha/react-responsive-pagination/compare/v2.3.0...v2.4.0-beta.1) (2023-12-20)
+
+
+### Features
+
+* Support for React elements for previous/next labels ([1cda768](https://github.com/jonelantha/react-responsive-pagination/commit/1cda76855213a6eda58dcd74f64838e4698a60fd))
+
 # [2.3.0](https://github.com/jonelantha/react-responsive-pagination/compare/v2.2.4...v2.3.0) (2023-12-11)
@@ -4,0 +11,0 @@

dist/hooks/usePaginationItems.d.ts

@@ -0,5 +1,6 @@
+import { ReactNode } from 'react';
 import { NarrowBehaviour } from '../narrowBehaviour.js';
 export declare function usePaginationItems(inputCurrent: number, inputTotal: number, maxWidth: number | undefined, options?: {
-    nextLabel?: string;
-    previousLabel?: string;
+    nextLabel?: string | ReactNode;
+    previousLabel?: string | ReactNode;
     ariaNextLabel?: string;
@@ -6,0 +7,0 @@ ariaPreviousLabel?: string;

dist/hooks/usePaginationItems.js

@@ -1,2 +0,2 @@
-import { useEffect } from 'react';
+import { isValidElement, useEffect } from 'react';
 import { narrowToWideCompositions } from '../compositions/index.js';
@@ -14,7 +14,38 @@ import { sanatizeInteger, sanatizeBoolean } from '../helpers/util.js';
     const { items: compositionItems, ref, clearCache, } = useWidestComposition(narrowToWideCompositionsProvider, maxWidth);
+    const previousLabelCacheKey = labelCacheKey(options?.previousLabel);
+    const nextLabelCacheKey = labelCacheKey(options?.nextLabel);
     useEffect(() => {
         return () => clearCache();
-    }, [clearCache, options?.previousLabel, options?.nextLabel]);
+    }, [clearCache, previousLabelCacheKey, nextLabelCacheKey]);
     const items = compositionToPaginationItems(compositionItems, options);
     return { items, ref, clearCache };
 }
+function labelCacheKey(item) {
+    if (isValidElement(item)) {
+        process.env.NODE_ENV !== 'production' && showReactElementLabelWarning();
+        // This is not exhaustive
+        // but should pick up on many situations when an element changes
+        switch (typeof item.type) {
+            case 'string':
+                return `element-str-${item.type}`;
+            case 'function':
+                return `element-fn-${item.type.name}`;
+            default:
+                return 'element';
+        }
+    }
+    else if (Array.isArray(item)) {
+        process.env.NODE_ENV !== 'production' && showReactElementLabelWarning();
+        return 'element-array';
+    }
+    else {
+        return item;
+    }
+}
+let reactElementLabelWarningShown = false;
+function showReactElementLabelWarning() {
+    if (reactElementLabelWarningShown)
+        return;
+    console.log('react-responsive-pagination: using React elements for labels is experimental, please see: https://react-responsive-pagination.elantha.com/faq/#using-react-components-for-labels');
+    reactElementLabelWarningShown = true;
+}

dist/index.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { NarrowBehaviour } from './narrowBehaviour.js';
@@ -25,4 +25,4 @@ import { LabelBehaviour } from './labelBehaviour.js';
     nextClassName?: string;
-    previousLabel?: string;
-    nextLabel?: string;
+    previousLabel?: string | ReactNode;
+    nextLabel?: string | ReactNode;
     ariaPreviousLabel?: string;
@@ -29,0 +29,0 @@ ariaNextLabel?: string;

dist/labelBehaviour.d.ts

 import React from 'react';
 import { PaginationItem } from './paginationItem.js';
 export type LabelBehaviour = (item: PaginationItem) => React.ReactNode;
-export declare function defaultLabelBehaviour({ a11yLabel, label }: PaginationItem): string | React.JSX.Element;
+export declare function defaultLabelBehaviour({ a11yLabel, label }: PaginationItem): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 export declare function srOnlySpanLabel({ a11yActiveLabel, srOnlyClassName, }?: {
@@ -6,0 +6,0 @@ a11yActiveLabel?: string;

dist/paginationItem.d.ts

@@ -0,1 +1,2 @@
+import { ReactNode } from 'react';
 import { CompositionItem } from './compositionItem.js';
@@ -5,3 +6,3 @@ type BaseItem = {
     key: string;
-    label: string;
+    label: string | ReactNode;
     a11yLabel?: string;
@@ -32,4 +33,4 @@ };
 export declare function compositionToPaginationItems(compositionItems: CompositionItem[], options?: {
-    previousLabel?: string;
-    nextLabel?: string;
+    previousLabel?: string | ReactNode;
+    nextLabel?: string | ReactNode;
     ariaPreviousLabel?: string;
@@ -36,0 +37,0 @@ ariaNextLabel?: string;

package.json

 {
   "name": "react-responsive-pagination",
-  "version": "2.3.0",
+  "version": "2.4.0-beta.1",
   "description": "React component for responsive pagination",
@@ -5,0 +5,0 @@ "author": "jonelantha",

README.md

@@ -113,8 +113,8 @@ # React Responsive Pagination
 
-| Prop                                                | Description                                                                  |
-| --------------------------------------------------- | ---------------------------------------------------------------------------- |
-| **previousLabel**<br />`string`<br />(optional)     | The label for the previous button, defaults to `«`                           |
-| **nextLabel**<br />`string`<br />(optional)         | The label for the next button, defaults to `»`                               |
-| **ariaPreviousLabel**<br />`string`<br />(optional) | The accessibility ARIA label for the previous button, defaults to `Previous` |
-| **ariaNextLabel**<br />`string`<br />(optional)     | The accessibility ARIA label for the next button, defaults to `Next`         |
+| Prop                                                         | Description                                                                                                                                                                                                                         |
+| ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **previousLabel**<br />`string \| ReactNode`<br />(optional) | The label for the previous button, defaults to `«`<br /><br />See the [FAQ](https://react-responsive-pagination.elantha.com/faq/#using-react-components-for-labels) for further information on using React components for this prop |
+| **nextLabel**<br />`string \| ReactNode`<br />(optional)     | The label for the next button, defaults to `»` <br /><br />See the [FAQ](https://react-responsive-pagination.elantha.com/faq/#using-react-components-for-labels) for further information on using React components for this prop    |
+| **ariaPreviousLabel**<br />`string`<br />(optional)          | The accessibility ARIA label for the previous button, defaults to `Previous`                                                                                                                                                        |
+| **ariaNextLabel**<br />`string`<br />(optional)              | The accessibility ARIA label for the next button, defaults to `Next`                                                                                                                                                                |
 
@@ -121,0 +121,0 @@ ### Misc Props

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

98053

increased by2.9%

Lines of code

1594

increased by2.11%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

4

increased by100%

No dependency changes