@sima-land/ui-nucleons 45.0.0-alpha.4 → 45.0.0-alpha.6

package/pagination/pagination-item.module.scss

@@ -0,0 +1,49 @@
+@use '../colors';
+
+.root {
+  --pagination-item-color: #{colors.$basic-gray87};
+  --pagination-item-background: #fff;
+  --pagination-item-border-color: #{colors.$basic-gray12};
+  --pagination-item-font-size: 14px;
+  --pagination-item-line-height: 20px;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  color: var(--pagination-item-color);
+  background: var(--pagination-item-background);
+  box-shadow: inset 0 0 0 1px var(--pagination-item-border-color);
+  font-size: var(--pagination-item-font-size);
+  line-height: var(--pagination-item-line-height);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  overflow: hidden;
+  text-decoration: none;
+  font-style: normal;
+  &.checked {
+    cursor: default;
+    --pagination-item-color: #fff;
+    --pagination-item-background: #{colors.$basic-gray87};
+    --pagination-item-border-color: #{colors.$basic-gray87};
+  }
+  &.disabled {
+    --pagination-item-color: #{colors.$basic-gray24};
+    --pagination-item-background: #fff;
+    --pagination-item-border-color: #{colors.$basic-gray12};
+  }
+  &:not(.checked):not(.disabled):hover {
+    cursor: pointer;
+    --pagination-item-background: #{colors.$basic-gray4};
+  }
+  &.rounds-all {
+    border-radius: 4px;
+  }
+  &.rounds-left {
+    border-radius: 4px 0 0 4px;
+  }
+  &.rounds-right {
+    border-radius: 0 4px 4px 0;
+  }
+}

package/pagination/pagination.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { PaginationProps } from './types';
+/**
+ * Кнопки навигации по страницам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Pagination({ rootRef, current: currentProp, total: totalProp, onPageChange, getItems, renderItem, className, ...restProps }: PaginationProps): JSX.Element;

package/pagination/pagination.js

@@ -0,0 +1,98 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("./utils");
+const pagination_item_1 = require("./pagination-item");
+const Left_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/Left"));
+const Right_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/Right"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const pagination_module_scss_1 = __importDefault(require("./pagination.module.scss"));
+const cx = bind_1.default.bind(pagination_module_scss_1.default);
+/**
+ * Кнопки навигации по страницам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Pagination({ rootRef, current: currentProp = 1, total: totalProp = 1, onPageChange, getItems = utils_1.getPaginationItems, renderItem = renderPaginationItem, className, ...restProps }) {
+    const { current, total } = (0, react_1.useMemo)(() => (0, utils_1.validatePaginationState)({ current: currentProp, total: totalProp }), [currentProp, totalProp]);
+    const items = (0, react_1.useMemo)(() => getItems({ current, total }), [current, total]);
+    const onChangeRef = (0, react_1.useRef)(onPageChange);
+    onChangeRef.current = onPageChange;
+    const getItemProps = (0, react_1.useCallback)((item, index, userProps = {}) => {
+        // eslint-disable-next-line require-jsdoc
+        const onClick = event => {
+            var _a, _b;
+            if (item.value !== current) {
+                (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, event, item);
+            }
+            (_b = userProps.onClick) === null || _b === void 0 ? void 0 : _b.call(userProps, event);
+        };
+        if (item.type === 'page') {
+            let rounds;
+            if (index === 0 || items[index - 1].type === 'prev') {
+                rounds = total === 1 ? 'all' : 'left';
+            }
+            else if (index === items.length - 1 || items[index + 1].type === 'next') {
+                rounds = 'right';
+            }
+            return {
+                rounds,
+                checked: item.value === current,
+                'aria-label': `Перейти на страницу ${item.value}`,
+                children: item.value,
+                ...userProps,
+                onClick,
+                className: cx('page', userProps.className, item.value > 999 && 'large'),
+            };
+        }
+        if (item.type === 'prev') {
+            return {
+                rounds: 'all',
+                disabled: current <= 1,
+                'aria-label': 'Предыдущая страница',
+                children: (0, jsx_runtime_1.jsx)(Left_1.default, { fill: 'currentColor' }),
+                ...userProps,
+                onClick,
+                className: cx('prev', userProps.className),
+            };
+        }
+        if (item.type === 'more') {
+            return {
+                'aria-label': `Перейти на страницу ${item.value}`,
+                children: '…',
+                ...userProps,
+                onClick,
+                className: cx('page', userProps.className),
+            };
+        }
+        if (item.type === 'next') {
+            return {
+                rounds: 'all',
+                disabled: current >= total,
+                'aria-label': 'Следующая страница',
+                children: (0, jsx_runtime_1.jsx)(Right_1.default, { fill: 'currentColor' }),
+                ...userProps,
+                onClick,
+                className: cx('next', userProps.className),
+            };
+        }
+        return {};
+    }, [current, total, items]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: rootRef, className: cx('root', className), role: 'navigation', "aria-label": '\u041D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044F \u043F\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430\u043C', ...restProps, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem(item, userProps => getItemProps(item, index, userProps)) }, index))) }));
+}
+exports.Pagination = Pagination;
+/**
+ * Рендер кнопки по умолчанию.
+ * @param button Данные кнопки.
+ * @param getProps Вернет свойства для PaginationItem.
+ * @return Элемент.
+ */
+function renderPaginationItem(button, getProps) {
+    return (0, jsx_runtime_1.jsx)(pagination_item_1.PaginationItem, { ...getProps() });
+}
+//# sourceMappingURL=pagination.js.map

package/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../src/pagination/pagination.tsx"],"names":[],"mappings":"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"}

package/pagination/pagination.module.scss

@@ -1,76 +1,21 @@
-@use '../colors';
+.root {
+  display: flex;
+}
+
+.prev + .page,
+.prev + .next {
+  margin-left: 8px;
+}
 
-.page-select-form {
-  font-size: 12px;
-  .page-input-wrapper {
-    margin-left: 8px;
-    width: 64px;
-    .page-input {
-      text-align: center;
-      font-size: 16px;
-    }
-  }
-  .submit-button {
-    margin-left: 8px;
-  }
-  .cancel-button {
-    margin-left: 32px;
-  }
+.page + .next {
+  margin-left: 8px;
 }
 
-.page-button {
-  display: inline-block;
-  width: 38px;
-  height: 38px;
-  background: #fff;
-  border: 1px solid colors.$basic-gray12;
-  font-size: 14px;
-  outline: 0;
-  box-sizing: border-box;
-  padding: 0;
-  vertical-align: top;
-  user-select: none;
-  &.rounds-all {
-    border-radius: 4px;
-  }
-  &.rounds-left {
-    border-radius: 4px 0 0 4px;
-  }
-  &.rounds-right {
-    border-radius: 0 4px 4px 0;
-    &:not(.rounds-all) {
-      margin-right: 0;
-    }
-  }
-  &:disabled {
-    color: colors.$basic-gray24;
-  }
-  &:not(.rounds-all) {
-    margin-right: -1px;
-  }
-  &:not(.selected):not(:disabled):hover {
-    background: #f5f5f5;
-    cursor: pointer;
-  }
-  &.selected {
-    position: relative;
-    background: colors.$basic-gray87;
-    border-color: colors.$basic-gray87;
-    color: #fff;
-    cursor: default;
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      box-shadow: inherit;
-      border-radius: inherit;
-    }
-  }
+.page + .page {
+  margin-left: -1px;
 }
 
-.icon {
-  vertical-align: middle;
+.large {
+  --pagination-item-font-size: 12px;
+  --pagination-item-line-height: 16px;
 }

package/pagination/types.d.ts

@@ -0,0 +1,28 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';
+export interface PaginationButton {
+    type: 'page' | 'prev' | 'next' | 'more';
+    value: number;
+}
+export interface PaginationItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    rounds?: 'all' | 'right' | 'left';
+    checked?: boolean;
+    disabled?: boolean;
+    rootRef?: Ref<HTMLAnchorElement>;
+}
+export interface GetPaginationItemProps {
+    (userProps?: PaginationItemProps): PaginationItemProps;
+}
+export interface RenderPaginationItem {
+    (item: PaginationButton, getProps: GetPaginationItemProps): ReactNode;
+}
+export interface PaginationProps extends HTMLAttributes<HTMLDivElement> {
+    rootRef?: Ref<HTMLDivElement>;
+    current?: number;
+    total?: number;
+    onPageChange?: (event: MouseEvent<HTMLAnchorElement>, button: PaginationButton) => void;
+    getItems?: (payload: {
+        current: number;
+        total: number;
+    }) => PaginationButton[];
+    renderItem?: RenderPaginationItem;
+}

package/pagination/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/pagination/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/pagination/types.ts"],"names":[],"mappings":""}

package/pagination/utils.d.ts

@@ -1,54 +1,38 @@
-interface IPageButton {
-    value: number;
-    content: string | number;
-}
-type State = {
-    current: number;
-    range: number;
-    total: number;
-};
-export declare const cx: (...args: import("classnames").ArgumentArray) => string;
-/**
- * Фабрика объектов с данными о кнопке страницы.
- * @param value Номер целевой страницы.
- * @param content Содержимое кнопки.
- * @return Список кнопок.
- */
-export declare const PageButton: (value: number, content?: string | number) => IPageButton;
+import type { PaginationButton } from './types';
 /**
- * Возвращает список кнопок навигации.
- * @param props Свойства.
- * @param props.current Номер текущей страницы.
- * @param props.total Номер последней страницы.
- * @param props.buttonKeys Значения, которые будут использованы для не числовых кнопок.
- * @param props.buttonKeys.more Значение для отображения кнопки группы пропущенных чисел.
- * @return Список кнопок.
+ * Обрабатывает состояние кнопок пагинации.
+ * @param state Состояние.
+ * @return Валидное состояние.
  */
-export declare const getPageButtons: ({ current, total, buttonKeys, }: {
-    current: number;
+export declare function validatePaginationState({ total, current }: {
+    total?: number;
+    current?: number;
+}): {
     total: number;
-    buttonKeys?: {
-        more: string | number;
-    } | undefined;
-}) => IPageButton[];
+    current: number;
+};
 /**
- * Возвращает корректный диапазон вокруг текущего значения в соответствии с дизайнерской задумкой.
- * По возможности показывает начало/конец списка при смещении.
- * При current = 4, range = 5 вместо [2,3,4,5,6] вернет [1,2,3,4,5].
+ * Формирует список кнопок навигации по страницам по дизайн-гайдам.
  * @param props Свойства.
- * @param props.current Число вокруг которого нужно сформировать список.
- * @param props.range Размер списка.
- * @param props.total Максимальное значение.
- * @return Список номеров.
+ * @param config Конфиг.
+ * @return Список.
  */
-export declare const getCorrectRangeNumbers: ({ current, range: rangeSize, total }: State) => number[];
+export declare function getPaginationItems({ total, current, }: {
+    total: number;
+    current: number;
+}, { arrows, }?: {
+    arrows?: boolean | 'active';
+}): PaginationButton[];
 /**
- * Возвращает список чисел вокруг заданного.
+ * Возвращает список натуральных чисел вокруг заданного.
  * @param props Свойства.
  * @param props.current Число вокруг которого нужно сформировать список.
  * @param props.range Размер списка.
  * @param props.total Максимальное значение.
  * @return Список номеров.
  */
-export declare const getRangeNumbers: ({ current, range: rangeSize, total }: State) => number[];
-export {};
+export declare function getNumbersAround({ current, range: rangeSize, total, }: {
+    current: number;
+    range: number;
+    total: number;
+}): number[];

package/pagination/utils.js

@@ -1,106 +1,71 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRangeNumbers = exports.getCorrectRangeNumbers = exports.getPageButtons = exports.PageButton = exports.cx = void 0;
-const bind_1 = __importDefault(require("classnames/bind"));
-const pagination_module_scss_1 = __importDefault(require("./pagination.module.scss"));
-const lodash_1 = require("lodash");
-exports.cx = bind_1.default.bind(pagination_module_scss_1.default);
+exports.getNumbersAround = exports.getPaginationItems = exports.validatePaginationState = void 0;
 /**
- * Фабрика объектов с данными о кнопке страницы.
- * @param value Номер целевой страницы.
- * @param content Содержимое кнопки.
- * @return Список кнопок.
+ * Обрабатывает состояние кнопок пагинации.
+ * @param state Состояние.
+ * @return Валидное состояние.
  */
-const PageButton = (value, content = value) => ({
-    value,
-    content,
-});
-exports.PageButton = PageButton;
+function validatePaginationState({ total, current }) {
+    return {
+        // если total не "конечное число" - меняем на 0 так как непонятно сколько всего страниц
+        total: Number.isFinite(total) ? total : 0,
+        // если current не "конечное число" - указываем 0, так ни одна кнопка не будет активной
+        current: Number.isFinite(current) ? current : 0,
+    };
+}
+exports.validatePaginationState = validatePaginationState;
 /**
- * Возвращает список кнопок навигации.
+ * Формирует список кнопок навигации по страницам по дизайн-гайдам.
  * @param props Свойства.
- * @param props.current Номер текущей страницы.
- * @param props.total Номер последней страницы.
- * @param props.buttonKeys Значения, которые будут использованы для не числовых кнопок.
- * @param props.buttonKeys.more Значение для отображения кнопки группы пропущенных чисел.
- * @return Список кнопок.
+ * @param config Конфиг.
+ * @return Список.
  */
-const getPageButtons = ({ current, total, buttonKeys = { more: '...' }, }) => {
-    const list = (0, exports.getCorrectRangeNumbers)({ current, range: 5, total }).map(v => (0, exports.PageButton)(v));
-    if (list.length > 0 && total > 5) {
-        // если находимся в середине множества (многоточия с обоих сторон) - диапазон уменьшается до 4
-        if (list[0].value > 1 && list[list.length - 1].value < total) {
-            list.shift();
+function getPaginationItems({ total, current, }, { arrows = true, } = {}) {
+    const items = getNumbersAround({
+        total,
+        current,
+        range: 7,
+    }).map(value => ({ type: 'page', value }));
+    const size = items.length;
+    if (total > 7) {
+        // если первый элемент не является первой страницей
+        if (items[0].value !== 1) {
+            items.splice(0, 2, { type: 'page', value: 1 }, { type: 'more', value: items[2].value - 1 });
         }
-        if (list[0].value > 1) {
-            // формируем начало диапазона
-            if (list[0].value === 2) {
-                list.unshift((0, exports.PageButton)(1));
-            }
-            else {
-                list.unshift((0, exports.PageButton)(1), 
-                // не выводим многоточие когда вместо него можно поставить одно число
-                list[0].value === 3 ? (0, exports.PageButton)(2) : (0, exports.PageButton)(list[0].value - 1, buttonKeys.more));
-            }
-        }
-        if (list[list.length - 1].value < total) {
-            // формируем конец диапазона
-            if (list[list.length - 1].value === total - 1) {
-                list.push((0, exports.PageButton)(total));
-            }
-            else {
-                list.push(
-                // не выводим многоточие когда вместо него можно поставить одно число
-                total - list[list.length - 1].value > 2
-                    ? (0, exports.PageButton)(list[list.length - 1].value + 1, buttonKeys.more)
-                    : (0, exports.PageButton)(total - 1), (0, exports.PageButton)(total));
-            }
+        // если последний элемент не является последней страницей
+        if (items[size - 1].value !== total) {
+            items.splice(-2, 2, { type: 'more', value: items[size - 2].value }, { type: 'page', value: total });
         }
     }
-    return list;
-};
-exports.getPageButtons = getPageButtons;
-/**
- * Возвращает корректный диапазон вокруг текущего значения в соответствии с дизайнерской задумкой.
- * По возможности показывает начало/конец списка при смещении.
- * При current = 4, range = 5 вместо [2,3,4,5,6] вернет [1,2,3,4,5].
- * @param props Свойства.
- * @param props.current Число вокруг которого нужно сформировать список.
- * @param props.range Размер списка.
- * @param props.total Максимальное значение.
- * @return Список номеров.
- */
-const getCorrectRangeNumbers = ({ current, range: rangeSize, total }) => {
-    let result = [
-        ...(0, exports.getRangeNumbers)({
-            current,
-            range: rangeSize,
-            total,
-        }),
-    ];
-    if (total > rangeSize) {
-        if (current < rangeSize) {
-            result = (0, lodash_1.range)(1, rangeSize + 1);
+    switch (arrows) {
+        case true: {
+            items.unshift({ type: 'prev', value: Math.max(1, current - 1) });
+            items.push({ type: 'next', value: Math.min(total, current + 1) });
+            break;
         }
-        else if (current > total - rangeSize + 1) {
-            result = (0, lodash_1.range)(total - rangeSize + 1, total + 1);
+        case 'active': {
+            if (current !== 1) {
+                items.unshift({ type: 'prev', value: Math.max(1, current - 1) });
+            }
+            if (current !== total) {
+                items.push({ type: 'next', value: Math.min(total, current + 1) });
+            }
+            break;
         }
     }
-    return result;
-};
-exports.getCorrectRangeNumbers = getCorrectRangeNumbers;
+    return items;
+}
+exports.getPaginationItems = getPaginationItems;
 /**
- * Возвращает список чисел вокруг заданного.
+ * Возвращает список натуральных чисел вокруг заданного.
  * @param props Свойства.
  * @param props.current Число вокруг которого нужно сформировать список.
  * @param props.range Размер списка.
  * @param props.total Максимальное значение.
  * @return Список номеров.
  */
-const getRangeNumbers = ({ current, range: rangeSize, total }) => {
+function getNumbersAround({ current, range: rangeSize, total, }) {
     const pageNumbers = [];
     const readyRange = Math.min(rangeSize, total) || 0;
     const halfRange = Math.floor(readyRange / 2);
@@ -116,5 +81,6 @@ const getRangeNumbers = ({ current, range: rangeSize, total }) => {
         pageNumbers.push(i + 1);
     }
     return pageNumbers;
-};
-exports.getRangeNumbers = getRangeNumbers;
+}
+exports.getNumbersAround = getNumbersAround;
+//# sourceMappingURL=utils.js.map

package/pagination/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/pagination/utils.ts"],"names":[],"mappings":"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"}

package/{pagination → pagination-deprecated}/base-pagination.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
+/// <reference types="react" />
 import { PageButtonProps } from './page-button';
 import { getPageButtons } from './utils';
+/** @deprecated */
 interface RenderButtonProps extends PageButtonProps {
     type?: 'prev' | 'next' | 'more';
     isFirst?: boolean;
@@ -8,6 +9,7 @@ interface RenderButtonProps extends PageButtonProps {
     page?: number;
     selected?: boolean;
 }
+/** @deprecated */
 export interface BasePaginationProps {
     total: number;
     current: number;
@@ -24,11 +26,13 @@ export interface BasePaginationProps {
     }) => boolean;
     calculateButtons?: typeof getPageButtons;
 }
+/** @deprecated */
 export declare const BUTTON_TYPES: {
     readonly prev: "prev";
     readonly next: "next";
     readonly more: "more";
 };
+/** @deprecated */
 export declare const BUTTON_CONTENTS: {
     readonly prev: JSX.Element;
     readonly next: JSX.Element;
@@ -46,6 +50,7 @@ export declare const BUTTON_CONTENTS: {
  * @param props.needNextButton Должна определить, нужно ла выводить кнопку "Назад".
  * @param props.calculateButtons Должна вернуть список кнопок (например ['prev', 1, 2, 3, 'next']).
  * @return Элемент.
+ * @deprecated
  */
 export declare const BasePagination: React.FC<BasePaginationProps>;
 export {};