@snack-uikit/pagination - npm Package Compare versions

Comparing version 0.9.5 to 0.9.6-preview-41651290.0

dist/cjs/components/PageButton/PageButton.d.ts

@@ -1,2 +0,2 @@
-import { Ref } from 'react';
+import { MouseEvent, Ref } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
@@ -6,5 +6,6 @@ export type PageButtonProps = WithSupportProps<{
     activated?: boolean;
-    onClick(): void;
-    setButtonRef?: Ref<HTMLButtonElement>;
+    onClick(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;
+    href?: string;
+    setButtonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
 }>;
-export declare function PageButton({ label, activated, onClick, setButtonRef, ...rest }: PageButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageButton({ label, activated, onClick, href, setButtonRef, ...rest }: PageButtonProps): import("react/jsx-runtime").JSX.Element;

dist/cjs/components/PageButton/PageButton.js

@@ -29,8 +29,23 @@ "use strict";
       onClick,
+      href,
       setButtonRef
     } = _a,
-    rest = __rest(_a, ["label", "activated", "onClick", "setButtonRef"]);
+    rest = __rest(_a, ["label", "activated", "onClick", "href", "setButtonRef"]);
   const {
-    size
+    size,
+    variant
   } = (0, contexts_1.usePaginationContext)();
+  if (variant === 'link') {
+    return (0, jsx_runtime_1.jsx)("a", Object.assign({
+      role: 'button',
+      className: styles_module_scss_1.default.pageButton,
+      onClick: onClick,
+      ref: setButtonRef,
+      "data-size": size
+    }, (0, utils_1.extractSupportProps)(rest), {
+      "data-activated": activated || undefined,
+      href: href,
+      children: label
+    }));
+  }
   return (0, jsx_runtime_1.jsx)("button", Object.assign({
@@ -37,0 +52,0 @@ type: 'button',

dist/cjs/components/PageNumberButton/PageNumberButton.d.ts

@@ -1,8 +0,9 @@
-import { Ref } from 'react';
+import { MouseEvent, Ref } from 'react';
 export type PageNumberButtonProps = {
     page: number;
-    onClick(page: number): void;
+    onClick(page: number, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;
     activated?: boolean;
-    setButtonRef?: Ref<HTMLButtonElement>;
+    setButtonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+    hrefFormatter?(page: number): string;
 };
-export declare function PageNumberButton({ page, onClick, activated, setButtonRef }: PageNumberButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageNumberButton({ page, onClick, hrefFormatter, activated, setButtonRef }: PageNumberButtonProps): import("react/jsx-runtime").JSX.Element;

dist/cjs/components/PageNumberButton/PageNumberButton.js

@@ -13,6 +13,8 @@ "use strict";
     onClick,
+    hrefFormatter,
     activated,
     setButtonRef
   } = _ref;
-  const handleClick = () => onClick(page);
+  const handleClick = event => onClick(page, event);
+  const formattedHref = hrefFormatter && hrefFormatter(page);
   return (0, jsx_runtime_1.jsx)(PageButton_1.PageButton, {
@@ -24,4 +26,5 @@ label: page,
     "data-test-id": `page-number-button-${page}`,
-    setButtonRef: setButtonRef
+    setButtonRef: setButtonRef,
+    href: formattedHref
   });
 }

dist/cjs/components/Pagination/Pagination.d.ts

@@ -0,3 +1,4 @@
+import { MouseEvent } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../types';
+import { Size, Variant } from '../../types';
 export type PaginationProps = WithSupportProps<{
@@ -8,6 +9,10 @@ /** Общее количество страниц */
     page: number;
+    /** Варианты тега кнопок: <a/> или <button/> */
+    variant?: Variant;
     /** Максимальное количество страниц/элементов, помещающихся до транкейта */
     maxLength?: number;
-    /** Колбек смены значения */
-    onChange(page: number): void;
+    /** Колбэк смены значения */
+    onChange(page: number, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;
+    /** Колбэк форматирования ссылки */
+    hrefFormatter?(page: number): string;
     /** CSS класснейм */
@@ -20,2 +25,2 @@ className?: string;
 }>;
-export declare function Pagination({ total, page, onChange, className, size, maxLength, ...rest }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Pagination({ total, page, onChange, hrefFormatter, className, variant, size, maxLength, ...rest }: PaginationProps): import("react/jsx-runtime").JSX.Element;

dist/cjs/components/Pagination/Pagination.js

@@ -39,7 +39,9 @@ "use strict";
       onChange,
+      hrefFormatter,
       className,
+      variant = constants_1.VARIANT.Button,
       size = constants_1.SIZE.S,
       maxLength = MAX_LENGTH
     } = _a,
-    rest = __rest(_a, ["total", "page", "onChange", "className", "size", "maxLength"]);
+    rest = __rest(_a, ["total", "page", "onChange", "hrefFormatter", "className", "variant", "size", "maxLength"]);
   const entries = (0, utils_2.getPaginationEntries)({
@@ -85,3 +87,4 @@ firstPage: FIRST_PAGE,
             buttonRefs.current[entry.page] = el;
-          }
+          },
+          hrefFormatter: hrefFormatter
         })
@@ -102,3 +105,4 @@ }, entry.page);
     value: {
-      size
+      size,
+      variant
     },
@@ -105,0 +109,0 @@ children: (0, jsx_runtime_1.jsx)("nav", Object.assign({

dist/cjs/constants.d.ts

@@ -5,1 +5,5 @@ export declare const SIZE: {
 };
+export declare const VARIANT: {
+    readonly Link: "link";
+    readonly Button: "button";
+};

dist/cjs/constants.js

@@ -6,6 +6,10 @@ "use strict";
 });
-exports.SIZE = void 0;
+exports.VARIANT = exports.SIZE = void 0;
 exports.SIZE = {
   Xs: 'xs',
   S: 's'
+};
+exports.VARIANT = {
+  Link: 'link',
+  Button: 'button'
 };

dist/cjs/contexts.d.ts

@@ -1,7 +0,9 @@
-import { Size } from './types';
+import { Size, Variant } from './types';
 export declare const PaginationContext: import("react").Context<{
     size: Size;
+    variant: Variant;
 }>;
 export declare const usePaginationContext: () => {
     size: Size;
+    variant: Variant;
 };

dist/cjs/contexts.js

@@ -10,5 +10,6 @@ "use strict";
 exports.PaginationContext = (0, react_1.createContext)({
-  size: constants_1.SIZE.S
+  size: constants_1.SIZE.S,
+  variant: constants_1.VARIANT.Button
 });
 const usePaginationContext = () => (0, react_1.useContext)(exports.PaginationContext);
 exports.usePaginationContext = usePaginationContext;

dist/cjs/types.d.ts

 import { ValueOf } from '@snack-uikit/utils';
-import { SIZE } from './constants';
+import { SIZE, VARIANT } from './constants';
 export type Size = ValueOf<typeof SIZE>;
+export type Variant = ValueOf<typeof VARIANT>;

dist/esm/components/PageButton/PageButton.d.ts

@@ -1,2 +0,2 @@
-import { Ref } from 'react';
+import { MouseEvent, Ref } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
@@ -6,5 +6,6 @@ export type PageButtonProps = WithSupportProps<{
     activated?: boolean;
-    onClick(): void;
-    setButtonRef?: Ref<HTMLButtonElement>;
+    onClick(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;
+    href?: string;
+    setButtonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
 }>;
-export declare function PageButton({ label, activated, onClick, setButtonRef, ...rest }: PageButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageButton({ label, activated, onClick, href, setButtonRef, ...rest }: PageButtonProps): import("react/jsx-runtime").JSX.Element;

dist/esm/components/PageButton/PageButton.js

@@ -17,5 +17,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 export function PageButton(_a) {
-    var { label, activated, onClick, setButtonRef } = _a, rest = __rest(_a, ["label", "activated", "onClick", "setButtonRef"]);
-    const { size } = usePaginationContext();
+    var { label, activated, onClick, href, setButtonRef } = _a, rest = __rest(_a, ["label", "activated", "onClick", "href", "setButtonRef"]);
+    const { size, variant } = usePaginationContext();
+    if (variant === 'link') {
+        return (_jsx("a", Object.assign({ role: 'button', className: styles.pageButton, onClick: onClick, ref: setButtonRef, "data-size": size }, extractSupportProps(rest), { "data-activated": activated || undefined, href: href, children: label })));
+    }
     return (_jsx("button", Object.assign({ type: 'button', className: styles.pageButton, onClick: onClick, ref: setButtonRef, "data-size": size }, extractSupportProps(rest), { "data-activated": activated || undefined, children: label })));
 }

dist/esm/components/PageNumberButton/PageNumberButton.d.ts

@@ -1,8 +0,9 @@
-import { Ref } from 'react';
+import { MouseEvent, Ref } from 'react';
 export type PageNumberButtonProps = {
     page: number;
-    onClick(page: number): void;
+    onClick(page: number, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;
     activated?: boolean;
-    setButtonRef?: Ref<HTMLButtonElement>;
+    setButtonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+    hrefFormatter?(page: number): string;
 };
-export declare function PageNumberButton({ page, onClick, activated, setButtonRef }: PageNumberButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageNumberButton({ page, onClick, hrefFormatter, activated, setButtonRef }: PageNumberButtonProps): import("react/jsx-runtime").JSX.Element;

dist/esm/components/PageNumberButton/PageNumberButton.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { PageButton } from '../PageButton';
-export function PageNumberButton({ page, onClick, activated, setButtonRef }) {
-    const handleClick = () => onClick(page);
-    return (_jsx(PageButton, { label: page, onClick: handleClick, activated: activated, "aria-current": activated ? 'page' : undefined, "data-test-id": `page-number-button-${page}`, setButtonRef: setButtonRef }));
+export function PageNumberButton({ page, onClick, hrefFormatter, activated, setButtonRef }) {
+    const handleClick = (event) => onClick(page, event);
+    const formattedHref = hrefFormatter && hrefFormatter(page);
+    return (_jsx(PageButton, { label: page, onClick: handleClick, activated: activated, "aria-current": activated ? 'page' : undefined, "data-test-id": `page-number-button-${page}`, setButtonRef: setButtonRef, href: formattedHref }));
 }

dist/esm/components/Pagination/Pagination.d.ts

@@ -0,3 +1,4 @@
+import { MouseEvent } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../types';
+import { Size, Variant } from '../../types';
 export type PaginationProps = WithSupportProps<{
@@ -8,6 +9,10 @@ /** Общее количество страниц */
     page: number;
+    /** Варианты тега кнопок: <a/> или <button/> */
+    variant?: Variant;
     /** Максимальное количество страниц/элементов, помещающихся до транкейта */
     maxLength?: number;
-    /** Колбек смены значения */
-    onChange(page: number): void;
+    /** Колбэк смены значения */
+    onChange(page: number, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;
+    /** Колбэк форматирования ссылки */
+    hrefFormatter?(page: number): string;
     /** CSS класснейм */
@@ -20,2 +25,2 @@ className?: string;
 }>;
-export declare function Pagination({ total, page, onChange, className, size, maxLength, ...rest }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Pagination({ total, page, onChange, hrefFormatter, className, variant, size, maxLength, ...rest }: PaginationProps): import("react/jsx-runtime").JSX.Element;

dist/esm/components/Pagination/Pagination.js

@@ -17,3 +17,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { extractSupportProps } from '@snack-uikit/utils';
-import { SIZE } from '../../constants';
+import { SIZE, VARIANT } from '../../constants';
 import { PaginationContext } from '../../contexts';
@@ -28,3 +28,3 @@ import { getPaginationEntries, PaginationEntryKind } from '../../utils';
 export function Pagination(_a) {
-    var { total, page, onChange, className, size = SIZE.S, maxLength = MAX_LENGTH } = _a, rest = __rest(_a, ["total", "page", "onChange", "className", "size", "maxLength"]);
+    var { total, page, onChange, hrefFormatter, className, variant = VARIANT.Button, size = SIZE.S, maxLength = MAX_LENGTH } = _a, rest = __rest(_a, ["total", "page", "onChange", "hrefFormatter", "className", "variant", "size", "maxLength"]);
     const entries = getPaginationEntries({
@@ -65,3 +65,3 @@ firstPage: FIRST_PAGE,
                         buttonRefs.current[entry.page] = el;
-                    } }) }, entry.page));
+                    }, hrefFormatter: hrefFormatter }) }, entry.page));
         }
@@ -72,3 +72,3 @@ if (entry.kind === PaginationEntryKind.Break) {
     };
-    return (_jsx(PaginationContext.Provider, { value: { size }, children: _jsx("nav", Object.assign({ className: className }, extractSupportProps(rest), { children: _jsxs("ul", { className: styles.pagination, children: [_jsx("li", { children: _jsx(ButtonFunction, { icon: _jsx(ChevronLeftSVG, {}), onClick: handlePreviousPageButtonClick, disabled: page === FIRST_PAGE, "data-test-id": 'page-prev-button', size: size }) }), entries.map(renderEntry), _jsx("li", { children: _jsx(ButtonFunction, { icon: _jsx(ChevronRightSVG, {}), onClick: handleNextPageButtonClick, disabled: page === total, "data-test-id": 'page-next-button', size: size }) })] }) })) }));
+    return (_jsx(PaginationContext.Provider, { value: { size, variant }, children: _jsx("nav", Object.assign({ className: className }, extractSupportProps(rest), { children: _jsxs("ul", { className: styles.pagination, children: [_jsx("li", { children: _jsx(ButtonFunction, { icon: _jsx(ChevronLeftSVG, {}), onClick: handlePreviousPageButtonClick, disabled: page === FIRST_PAGE, "data-test-id": 'page-prev-button', size: size }) }), entries.map(renderEntry), _jsx("li", { children: _jsx(ButtonFunction, { icon: _jsx(ChevronRightSVG, {}), onClick: handleNextPageButtonClick, disabled: page === total, "data-test-id": 'page-next-button', size: size }) })] }) })) }));
 }

dist/esm/constants.d.ts

@@ -5,1 +5,5 @@ export declare const SIZE: {
 };
+export declare const VARIANT: {
+    readonly Link: "link";
+    readonly Button: "button";
+};

dist/esm/constants.js

@@ -5,1 +5,5 @@ export const SIZE = {
 };
+export const VARIANT = {
+    Link: 'link',
+    Button: 'button',
+};

dist/esm/contexts.d.ts

@@ -1,7 +0,9 @@
-import { Size } from './types';
+import { Size, Variant } from './types';
 export declare const PaginationContext: import("react").Context<{
     size: Size;
+    variant: Variant;
 }>;
 export declare const usePaginationContext: () => {
     size: Size;
+    variant: Variant;
 };

dist/esm/contexts.js

 import { createContext, useContext } from 'react';
-import { SIZE } from './constants';
-export const PaginationContext = createContext({ size: SIZE.S });
+import { SIZE, VARIANT } from './constants';
+export const PaginationContext = createContext({
+    size: SIZE.S,
+    variant: VARIANT.Button,
+});
 export const usePaginationContext = () => useContext(PaginationContext);

dist/esm/types.d.ts

 import { ValueOf } from '@snack-uikit/utils';
-import { SIZE } from './constants';
+import { SIZE, VARIANT } from './constants';
 export type Size = ValueOf<typeof SIZE>;
+export type Variant = ValueOf<typeof VARIANT>;

package.json

@@ -7,3 +7,3 @@ {
   "title": "Pagination",
-  "version": "0.9.5",
+  "version": "0.9.6-preview-41651290.0",
   "sideEffects": [
@@ -44,3 +44,3 @@ "*.css",
   },
-  "gitHead": "33a6d8bc270bd11dec3e4834f2ba8e97c57d5c15"
+  "gitHead": "f0455f4369e55395edbb3f0b4b7f34416ea19663"
 }

README.md

@@ -37,6 +37,8 @@ # Pagination
 |------|------|---------------|-------------|
-| onChange* | `(page: number) => void` | - | Колбек смены значения |
+| onChange* | `(page: number, event?: MouseEvent<HTMLButtonElement \| HTMLAnchorElement, MouseEvent>) => void` | - | Колбэк смены значения |
 | page* | `number` | - | Текущая страница |
 | total* | `number` | - | Общее количество страниц |
+| variant | enum Variant: `"link"`, `"button"` | button | Варианты тега кнопок: <a/> или <button/> |
 | maxLength | `number` | 7 | Максимальное количество страниц/элементов, помещающихся до транкейта |
+| hrefFormatter | `(page: number) => string` | - | Колбэк форматирования ссылки |
 | className | `string` | - | CSS класснейм |
@@ -43,0 +45,0 @@ | size | enum Size: `"xs"`, `"s"` | s | Размер |

src/constants.ts

@@ -5,1 +5,6 @@ export const SIZE = {
 } as const;
+
+export const VARIANT = {
+  Link: 'link',
+  Button: 'button',
+} as const;

src/contexts.ts

 import { createContext, useContext } from 'react';
 
-import { SIZE } from './constants';
-import { Size } from './types';
+import { SIZE, VARIANT } from './constants';
+import { Size, Variant } from './types';
 
-export const PaginationContext = createContext<{ size: Size }>({ size: SIZE.S });
+export const PaginationContext = createContext<{ size: Size; variant: Variant }>({
+  size: SIZE.S,
+  variant: VARIANT.Button,
+});
 
 export const usePaginationContext = () => useContext(PaginationContext);

src/types.ts

 import { ValueOf } from '@snack-uikit/utils';
 
-import { SIZE } from './constants';
+import { SIZE, VARIANT } from './constants';
 
 export type Size = ValueOf<typeof SIZE>;
+export type Variant = ValueOf<typeof VARIANT>;

No alert changes

Improved metrics

Total package byte prevSize

109704

increased by4.57%

Lines of code

1871

increased by5.71%

Number of lines in readme file

57

increased by3.64%

No dependency changes