@alfalab/core-components-pagination 1.1.0

package/dist/cssm/components/tag/index.module.css

@@ -0,0 +1,51 @@
+:root {
+    --color-light-bg-neutral: #dbdee1;
+    --color-light-bg-secondary-inverted: #233549;
+    --color-light-bg-tertiary: #e7e9eb;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-primary-inverted: #fff;
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --border-radius-m: 8px;
+}
+.tag.tag {
+    color: var(--color-light-text-secondary);
+    border-radius: var(--border-radius-m);
+    border: none;
+    flex-shrink: 0;
+    min-width: auto;
+    min-height: auto;
+    width: 32px;
+    height: 32px;
+    padding: 0
+}
+.tag.tag:disabled:not(.checked) {
+        opacity: 0.3;
+    }
+.tag.tag:hover:not(:disabled) {
+        background-color: var(--color-light-bg-tertiary);
+        color: var(--color-light-text-primary);
+    }
+.tag.tag:active:not(:disabled) {
+        background-color: var(--color-light-bg-neutral);
+    }
+.tag.tag.checked {
+        cursor: default;
+        background-color: var(--color-light-bg-secondary-inverted);
+        color: var(--color-light-text-primary-inverted);
+    }
+.tag.tag.checked:hover:not(:disabled) {
+        color: var(--color-light-text-primary-inverted);
+    }
+.tag.tag.checked:active:not(:disabled) {
+        color: var(--color-light-text-primary);
+    }

package/dist/cssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/dist/cssm/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('@alfalab/icons-glyph/ChevronBackMIcon');
+require('@alfalab/icons-glyph/ChevronForwardMIcon');
+require('./components/tag/index.js');
+require('@alfalab/core-components-tag/dist/cssm');
+require('./components/tag/index.module.css');
+require('./components/default-view/index.module.css');
+require('./components/default-view/index.js');
+require('./components/per-page-view/index.module.css');
+require('./components/per-page-view/index.js');
+require('./index.module.css');
+var Component = require('./Component.js');
+
+
+
+exports.Pagination = Component.Pagination;

package/dist/cssm/index.module.css

@@ -0,0 +1,31 @@
+:root {
+    --color-light-text-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+.component {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+
+    display: flex;
+    align-items: center;
+    color: var(--color-light-text-primary);
+    font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+}
+.default > * {
+        margin-right: var(--gap-xs)
+    }
+.default > *:last-child {
+            margin-right: 0;
+        }

package/dist/esm/Component.d.ts

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+type PaginationProps = {
+    /**
+     * Текущая страница (с нуля)
+     */
+    currentPageIndex: number;
+    /**
+     * Количество страниц
+     */
+    pagesCount: number;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Скрывает стрелки, если выбрана первая или последняя страница
+     */
+    hideArrows?: boolean;
+    /**
+     * Количество видимых страниц по бокам
+     */
+    sidePadding?: number;
+    /**
+     * Количество видимых страниц вокруг выбранной
+     */
+    activePadding?: number;
+    /**
+     * Режим пагинации
+     */
+    view?: 'default' | 'per-page';
+    /**
+     * Обработчик переключения страницы
+     */
+    onPageChange?: (pageIndex: number) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Pagination: FC<PaginationProps>;
+export { PaginationProps, Pagination };

package/dist/esm/Component.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import cn from 'classnames';
+import { ChevronBackMIcon } from '@alfalab/icons-glyph/ChevronBackMIcon';
+import { ChevronForwardMIcon } from '@alfalab/icons-glyph/ChevronForwardMIcon';
+import { Tag } from './components/tag/index.js';
+import '@alfalab/core-components-tag/dist/esm';
+import { DefaultView } from './components/default-view/index.js';
+import { PerPageView } from './components/per-page-view/index.js';
+
+var styles = {"component":"pagination__component_1bqlk","default":"pagination__default_1bqlk"};
+require('./index.css')
+
+var Pagination = function (_a) {
+    var _b = _a.currentPageIndex, currentPageIndex = _b === void 0 ? 0 : _b, pagesCount = _a.pagesCount, className = _a.className, _c = _a.sidePadding, sidePadding = _c === void 0 ? 1 : _c, _d = _a.activePadding, activePadding = _d === void 0 ? 2 : _d, _e = _a.hideArrows, hideArrows = _e === void 0 ? true : _e, _f = _a.view, view = _f === void 0 ? 'default' : _f, _g = _a.onPageChange, onPageChange = _g === void 0 ? function () { return null; } : _g, dataTestId = _a.dataTestId;
+    var handlePageClick = function (pageIndex) {
+        onPageChange(pageIndex);
+    };
+    var handleNextPageClick = function () {
+        handlePageClick(Math.min(pagesCount - 1, currentPageIndex + 1));
+    };
+    var handlePrevPageClick = function () {
+        handlePageClick(Math.max(0, currentPageIndex - 1));
+    };
+    var shouldRenderPrevArrow = view === 'per-page' || !hideArrows || currentPageIndex > 0;
+    var shouldRenderNextArrow = view === 'per-page' || !hideArrows || currentPageIndex < pagesCount - 1;
+    return (React.createElement("div", { className: cn(styles.component, className, styles[view]), "data-test-id": dataTestId },
+        shouldRenderPrevArrow && (React.createElement(Tag, { className: styles.arrow, disabled: currentPageIndex <= 0, onClick: handlePrevPageClick, rightAddons: React.createElement(ChevronBackMIcon, { width: 16, height: 16 }) })),
+        view === 'default' && (React.createElement(DefaultView, { activePadding: activePadding, sidePadding: sidePadding, currentPageIndex: currentPageIndex, pagesCount: pagesCount, onPageChange: handlePageClick })),
+        view === 'per-page' && (React.createElement(PerPageView, { currentPageIndex: currentPageIndex, pagesCount: pagesCount })),
+        shouldRenderNextArrow && (React.createElement(Tag, { className: styles.arrow, disabled: currentPageIndex >= pagesCount - 1, onClick: handleNextPageClick, rightAddons: React.createElement(ChevronForwardMIcon, { width: 16, height: 16 }) }))));
+};
+
+export { Pagination };

package/dist/esm/components/default-view/index.css

@@ -0,0 +1,22 @@
+/* hash: a3bgi */
+:root {
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.pagination__dots_kix4e {
+    width: 32px;
+    height: 32px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-light-text-secondary);
+    cursor: default;
+}

package/dist/esm/components/default-view/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PaginationProps } from "../../Component";
+type DefaultViewProps = Pick<PaginationProps, 'sidePadding' | 'activePadding' | 'pagesCount' | 'currentPageIndex' | 'onPageChange'>;
+declare const DefaultView: FC<DefaultViewProps>;
+export { DefaultView };

package/dist/esm/components/default-view/index.js

@@ -0,0 +1,48 @@
+import React, { useCallback } from 'react';
+import 'classnames';
+import { Tag } from '../tag/index.js';
+import '@alfalab/core-components-tag/dist/esm';
+
+var styles = {"dots":"pagination__dots_kix4e"};
+require('./index.css')
+
+var DefaultView = function (_a) {
+    var _b = _a.sidePadding, sidePadding = _b === void 0 ? 2 : _b, _c = _a.activePadding, activePadding = _c === void 0 ? 1 : _c, pagesCount = _a.pagesCount, currentPageIndex = _a.currentPageIndex, _d = _a.onPageChange, onPageChange = _d === void 0 ? function () { return null; } : _d;
+    var maxHalfCount = sidePadding + activePadding + 1;
+    var maxElementsCount = maxHalfCount * 2 + 1;
+    var itemsFit = pagesCount <= maxElementsCount;
+    var elementsCount = itemsFit ? pagesCount : maxElementsCount;
+    var getPageIndex = useCallback(function (elementIndex) {
+        var lastIndex = pagesCount - 1;
+        var reverseIndex = lastIndex - currentPageIndex;
+        var lastElementIndex = elementsCount - 1;
+        var reverseElementIndex = lastElementIndex - elementIndex;
+        var hasCollapsedItems = function (index) { return !itemsFit && index >= maxHalfCount; };
+        if (elementIndex < sidePadding) {
+            return elementIndex;
+        }
+        if (elementIndex === sidePadding && hasCollapsedItems(currentPageIndex)) {
+            return null;
+        }
+        if (reverseElementIndex === sidePadding && hasCollapsedItems(reverseIndex)) {
+            return null;
+        }
+        if (reverseElementIndex < sidePadding) {
+            return lastIndex - reverseElementIndex;
+        }
+        var computedIndex = currentPageIndex - maxHalfCount + elementIndex;
+        return Math.min(lastIndex - reverseElementIndex, Math.max(elementIndex, computedIndex));
+    }, [currentPageIndex, elementsCount, itemsFit, maxHalfCount, pagesCount, sidePadding]);
+    return (React.createElement(React.Fragment, null, Array(elementsCount)
+        .fill('')
+        .map(function (_, i) {
+        var pageIndex = getPageIndex(i);
+        if (pageIndex === null) {
+            return (React.createElement("div", { key: i.toString(), className: styles.dots }, "..."));
+        }
+        var active = currentPageIndex === pageIndex;
+        return (React.createElement(Tag, { key: i.toString(), checked: active, disabled: active, onClick: function () { return onPageChange(pageIndex); } }, pageIndex + 1));
+    })));
+};
+
+export { DefaultView };

package/dist/esm/components/per-page-view/index.css

@@ -0,0 +1,16 @@
+/* hash: 1ylzb */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-m: 16px;
+}
+.pagination__component_begf8 {
+    display: block;
+    margin: 0 var(--gap-m);
+}

package/dist/esm/components/per-page-view/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PaginationProps } from "../../Component";
+type PerPageViewProps = Pick<PaginationProps, 'pagesCount' | 'currentPageIndex'>;
+declare const PerPageView: FC<PerPageViewProps>;
+export { PerPageView };

package/dist/esm/components/per-page-view/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+var styles = {"component":"pagination__component_begf8"};
+require('./index.css')
+
+var PerPageView = function (_a) {
+    var pagesCount = _a.pagesCount, currentPageIndex = _a.currentPageIndex;
+    return (React.createElement("span", { className: styles.component },
+        currentPageIndex + 1,
+        " \u0438\u0437 ",
+        pagesCount,
+        " \u0441\u0442\u0440\u0430\u043D\u0438\u0446"));
+};
+
+export { PerPageView };

package/dist/esm/components/tag/index.css

@@ -0,0 +1,52 @@
+/* hash: x8h03 */
+:root {
+    --color-light-bg-neutral: #dbdee1;
+    --color-light-bg-secondary-inverted: #233549;
+    --color-light-bg-tertiary: #e7e9eb;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-primary-inverted: #fff;
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --border-radius-m: 8px;
+}
+.pagination__tag_1gidc.pagination__tag_1gidc {
+    color: var(--color-light-text-secondary);
+    border-radius: var(--border-radius-m);
+    border: none;
+    flex-shrink: 0;
+    min-width: auto;
+    min-height: auto;
+    width: 32px;
+    height: 32px;
+    padding: 0
+}
+.pagination__tag_1gidc.pagination__tag_1gidc:disabled:not(.pagination__checked_1gidc) {
+        opacity: 0.3;
+    }
+.pagination__tag_1gidc.pagination__tag_1gidc:hover:not(:disabled) {
+        background-color: var(--color-light-bg-tertiary);
+        color: var(--color-light-text-primary);
+    }
+.pagination__tag_1gidc.pagination__tag_1gidc:active:not(:disabled) {
+        background-color: var(--color-light-bg-neutral);
+    }
+.pagination__tag_1gidc.pagination__tag_1gidc.pagination__checked_1gidc {
+        cursor: default;
+        background-color: var(--color-light-bg-secondary-inverted);
+        color: var(--color-light-text-primary-inverted);
+    }
+.pagination__tag_1gidc.pagination__tag_1gidc.pagination__checked_1gidc:hover:not(:disabled) {
+        color: var(--color-light-text-primary-inverted);
+    }
+.pagination__tag_1gidc.pagination__tag_1gidc.pagination__checked_1gidc:active:not(:disabled) {
+        color: var(--color-light-text-primary);
+    }

package/dist/esm/components/tag/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TagProps } from "@alfalab/core-components-tag";
+declare const Tag: FC<TagProps>;
+export { Tag };

package/dist/esm/components/tag/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import cn from 'classnames';
+import { Tag as Tag$1 } from '@alfalab/core-components-tag/dist/esm';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(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);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var styles = {"tag":"pagination__tag_1gidc","checked":"pagination__checked_1gidc"};
+require('./index.css')
+
+var Tag = function (_a) {
+    var _b;
+    var className = _a.className, checked = _a.checked, restProps = __rest(_a, ["className", "checked"]);
+    return (React.createElement(Tag$1, __assign({}, restProps, { checked: checked, size: 'xxs', className: cn(className, styles.tag, (_b = {}, _b[styles.checked] = checked, _b)) })));
+};
+
+export { Tag };

package/dist/esm/index.css

@@ -0,0 +1,32 @@
+/* hash: 1ncx7 */
+:root {
+    --color-light-text-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+.pagination__component_1bqlk {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+
+    display: flex;
+    align-items: center;
+    color: var(--color-light-text-primary);
+    font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+}
+.pagination__default_1bqlk > * {
+        margin-right: var(--gap-xs)
+    }
+.pagination__default_1bqlk > *:last-child {
+            margin-right: 0;
+        }

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+import 'react';
+import 'classnames';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
+import '@alfalab/icons-glyph/ChevronForwardMIcon';
+import './components/tag/index.js';
+import '@alfalab/core-components-tag/dist/esm';
+import './components/default-view/index.js';
+import './components/per-page-view/index.js';
+export { Pagination } from './Component.js';

package/dist/index.css

@@ -0,0 +1,32 @@
+/* hash: 1ncx7 */
+:root {
+    --color-light-text-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+.pagination__component_1bqlk {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+
+    display: flex;
+    align-items: center;
+    color: var(--color-light-text-primary);
+    font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+}
+.pagination__default_1bqlk > * {
+        margin-right: var(--gap-xs)
+    }
+.pagination__default_1bqlk > *:last-child {
+            margin-right: 0;
+        }

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/dist/index.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('@alfalab/icons-glyph/ChevronBackMIcon');
+require('@alfalab/icons-glyph/ChevronForwardMIcon');
+require('./components/tag/index.js');
+require('@alfalab/core-components-tag');
+require('./components/default-view/index.js');
+require('./components/per-page-view/index.js');
+var Component = require('./Component.js');
+
+
+
+exports.Pagination = Component.Pagination;

package/dist/modern/Component.d.ts

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+type PaginationProps = {
+    /**
+     * Текущая страница (с нуля)
+     */
+    currentPageIndex: number;
+    /**
+     * Количество страниц
+     */
+    pagesCount: number;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Скрывает стрелки, если выбрана первая или последняя страница
+     */
+    hideArrows?: boolean;
+    /**
+     * Количество видимых страниц по бокам
+     */
+    sidePadding?: number;
+    /**
+     * Количество видимых страниц вокруг выбранной
+     */
+    activePadding?: number;
+    /**
+     * Режим пагинации
+     */
+    view?: 'default' | 'per-page';
+    /**
+     * Обработчик переключения страницы
+     */
+    onPageChange?: (pageIndex: number) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Pagination: FC<PaginationProps>;
+export { PaginationProps, Pagination };

package/dist/modern/Component.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import cn from 'classnames';
+import { ChevronBackMIcon } from '@alfalab/icons-glyph/ChevronBackMIcon';
+import { ChevronForwardMIcon } from '@alfalab/icons-glyph/ChevronForwardMIcon';
+import '@alfalab/core-components-tag/dist/modern';
+import { Tag } from './components/tag/index.js';
+import { DefaultView } from './components/default-view/index.js';
+import { PerPageView } from './components/per-page-view/index.js';
+
+var styles = {"component":"pagination__component_1bqlk","default":"pagination__default_1bqlk"};
+require('./index.css')
+
+const Pagination = ({ currentPageIndex = 0, pagesCount, className, sidePadding = 1, activePadding = 2, hideArrows = true, view = 'default', onPageChange = () => null, dataTestId, }) => {
+    const handlePageClick = (pageIndex) => {
+        onPageChange(pageIndex);
+    };
+    const handleNextPageClick = () => {
+        handlePageClick(Math.min(pagesCount - 1, currentPageIndex + 1));
+    };
+    const handlePrevPageClick = () => {
+        handlePageClick(Math.max(0, currentPageIndex - 1));
+    };
+    const shouldRenderPrevArrow = view === 'per-page' || !hideArrows || currentPageIndex > 0;
+    const shouldRenderNextArrow = view === 'per-page' || !hideArrows || currentPageIndex < pagesCount - 1;
+    return (React.createElement("div", { className: cn(styles.component, className, styles[view]), "data-test-id": dataTestId },
+        shouldRenderPrevArrow && (React.createElement(Tag, { className: styles.arrow, disabled: currentPageIndex <= 0, onClick: handlePrevPageClick, rightAddons: React.createElement(ChevronBackMIcon, { width: 16, height: 16 }) })),
+        view === 'default' && (React.createElement(DefaultView, { activePadding: activePadding, sidePadding: sidePadding, currentPageIndex: currentPageIndex, pagesCount: pagesCount, onPageChange: handlePageClick })),
+        view === 'per-page' && (React.createElement(PerPageView, { currentPageIndex: currentPageIndex, pagesCount: pagesCount })),
+        shouldRenderNextArrow && (React.createElement(Tag, { className: styles.arrow, disabled: currentPageIndex >= pagesCount - 1, onClick: handleNextPageClick, rightAddons: React.createElement(ChevronForwardMIcon, { width: 16, height: 16 }) }))));
+};
+
+export { Pagination };

package/dist/modern/components/default-view/index.css

@@ -0,0 +1,22 @@
+/* hash: a3bgi */
+:root {
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.pagination__dots_kix4e {
+    width: 32px;
+    height: 32px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-light-text-secondary);
+    cursor: default;
+}

package/dist/modern/components/default-view/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PaginationProps } from "../../Component";
+type DefaultViewProps = Pick<PaginationProps, 'sidePadding' | 'activePadding' | 'pagesCount' | 'currentPageIndex' | 'onPageChange'>;
+declare const DefaultView: FC<DefaultViewProps>;
+export { DefaultView };