Pagination

import { Pagination } from '@megafon/ui-core';

Примеры и код

Свойства и методы

Код DemoPaginationWrapperconst DemoPaginationWrapper: React.FC<IDemoPaginationWrapperProps> = ({ activePage, children, ...props }) => {
    const [currentActivePage, setCurrentActivePage] = React.useState(activePage);

    const childrenProps: childrenPropTypes = {
        ...props,
        activePage: currentActivePage,
        onChange: setCurrentActivePage,
    };

    return children(childrenProps);
};

Варианты использования

тип classic

<DemoPaginationWrapper totalPages={10} activePage={1}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination totalPages={totalPages} activePage={activePage} onChange={onChange} />
  )}
</DemoPaginationWrapper>

тип modern

<DemoPaginationWrapper totalPages={100} activePage={2}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination type="modern" totalPages={totalPages} activePage={activePage} onChange={onChange} />
  )}
</DemoPaginationWrapper>

с дополнительным полем ввода номера страницы

<DemoPaginationWrapper totalPages={6} activePage={2}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination type="modern" showSelectPage totalPages={totalPages} activePage={activePage} onChange={onChange} />
  )}
</DemoPaginationWrapper>

Цветовые схемы

default

<DemoPaginationWrapper totalPages={100} activePage={1}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination theme="default" type="modern" totalPages={totalPages} activePage={activePage} onChange={onChange} showSelectPage/>
  )}
</DemoPaginationWrapper>

light

<div style={{ ...blockStyle, 'backgroundColor': 'var(--brandGreen)' }}>
  <DemoPaginationWrapper totalPages={100} activePage={1}>
      {({ totalPages, activePage, onChange }) => (
          <Pagination  theme="light" type="modern" totalPages={totalPages} activePage={activePage} onChange={onChange} showSelectPage />
      )}
  </DemoPaginationWrapper>
</div>

gray

<div style={{ ...blockStyle, 'backgroundColor': 'var(--spbSky0)' }}>
  <DemoPaginationWrapper totalPages={100} activePage={1}>
      {({ totalPages, activePage, onChange }) => (
          <Pagination  theme="gray" type="modern" totalPages={totalPages} activePage={activePage} onChange={onChange} showSelectPage />
      )}
  </DemoPaginationWrapper>
</div>

Состояния боковых стрелок

Выбрана первая страница

<DemoPaginationWrapper totalPages={5} activePage={1}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination type="modern" totalPages={totalPages} activePage={activePage} onChange={onChange} />
  )}
</DemoPaginationWrapper>

Выбрана не крайняя страница

<DemoPaginationWrapper totalPages={5} activePage={3}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination type="modern" totalPages={totalPages} activePage={activePage} onChange={onChange} />
  )}
</DemoPaginationWrapper>

Выбрана последняя страница

<DemoPaginationWrapper totalPages={5} activePage={5}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination type="modern" totalPages={totalPages} activePage={activePage} onChange={onChange} />
  )}
</DemoPaginationWrapper>

Частичное скрытие списка страниц

Выбрана страница в начале списка

<DemoPaginationWrapper totalPages={100} activePage={2}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination type="modern" totalPages={totalPages} activePage={activePage} showSelectPage onChange={onChange} />
  )}
</DemoPaginationWrapper>

Выбрана страница в середине списка

<DemoPaginationWrapper totalPages={100} activePage={50}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination type="modern" totalPages={totalPages} activePage={activePage} onChange={onChange} />
  )}
</DemoPaginationWrapper>

Выбрана страница в конце списка

<DemoPaginationWrapper totalPages={100} activePage={98}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination type="modern" totalPages={totalPages} activePage={activePage} onChange={onChange} />
  )}
</DemoPaginationWrapper>

Pagination

Prop name	Type	Default	Description
totalPages*	number		Общее количество страниц
activePage*	number		Номер текущей страницы
type	PaginationTypesType	classic	Тип компонента. DEPRECATED: 'classic'
theme	ThemeType	default	Цветовая тема компонента
showSelectPage	boolean		Отобразить поле ввода номера страницы
onChange*	(value: ValueType) => void		Обработчик изменения активной страницы
className	string		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string>; prev?: Record<string, string>; next?: Record<string, string>; button?: Record<string, string>; skipPrev?: Record<string, string>; skipNext?: Record<...>; input?: Record<...>; }		Дополнительные data атрибуты к внутренним элементам

type PaginationTypesType = 'classic' | 'modern';

type ThemeType = 'default' | 'light' | 'gray';

type ValueType = string | number;