import { useState } from 'react'
import { $root, useValue } from 'startupjs'
import Pagination from '../Pagination'
import Row from '../Row'
import { Sandbox } from '@startupjs/docs'

# Pagination (пагинация)

Пагинация позволяет пользователю выбрать определенную страницу из диапазона страниц.

```jsx
import { Pagination } from '@startupjs/ui'
```

## Простой пример

- `pages` указывает общее количество страниц
- `page` указывает текущую страницу, начиная с `0` и заканчивая `pages - 1`

```jsx example
const [page, setPage] = useState()
return (
  <Row align='center'>
    <Pagination
      page={page}
      pages={10}
      onChangePage={setPage}
    />
  </Row>
)
```

## Альтернативы

- `count` - общее количество элементов
- `limit` - количество элементов для отображения на странице
- `skip` - количество элементов, которые нужно пропустить

Вы можете использовать их вместо свойств `pages` или `page`:

- `count` и `limit` вместо `pages`
- `limit` и `skip` вместо of `page`

```jsx example
const COUNT = 100
const LIMIT = 10
const [skip, setSkip] = useState(0)
return (
  <Row align='center'>
    <Pagination
      count={COUNT}
      limit={LIMIT}
      skip={skip}
      onChangePage={(val) => setSkip(val * LIMIT)}
    />
  </Row>
)
```

## Двусторонняя привязка данных

Вы можете использовать двухстороннюю привязку данных `$page`, `$limit`, `$skip` вместо `page`, `limit`, `skip` соответственно.

```jsx example
const [, $page] = useValue(0)
return (
  <Row align='center'>
    <Pagination
      $page={$page}
      pages={10}
    />
  </Row>
)
```

```jsx example
const LIMIT = 10
const [, $skip] = useValue(0)
return (
  <Row align='center'>
    <Pagination
      pages={10}
      limit={LIMIT}
      $skip={$skip}
      onChangePage={(val) => $skip.set(val * LIMIT)}
    />
  </Row>
)
```

## Кнопки

отображает кнопку для перехода на предыдущую страницу
- `showPrevButton` отображает кнопку для перехода на предыдущую страницу (по умолчанию `true`)
- `showNextButton` отображает кнопку для перехода на следующую страницу (по умолчанию `true`)
- `showFirstButton` отображает кнопку для перехода на первую страницу (по умолчанию `false`)
- `showLastButton` отображает кнопку для перехода на последнюю страницу (по умолчанию `false`)

```jsx example
const [page, setPage] = useState()
return (
  <Row align='center'>
    <Pagination
      page={page}
      pages={10}
      showPrevButton={false}
      showNextButton={false}
      showFirstButton
      showLastButton
      onChangePage={setPage}
    />
  </Row>
)
```

## Компактный вид

Для отображения компонента в компактном виде передайте `variant='compact`.

```jsx example
const [page, setPage] = useState()
return (
  <Row align='center'>
    <Pagination
      variant='compact'
      page={page}
      pages={10}
      onChangePage={setPage}
    />
  </Row>
)
```

## Видимые страницы

Вы можете управлять видимостью страниц, когда компонент имеет вид по умолчанию (`variant='full'`).

- `boundaryCount` управляет количеством видимых страниц в начале и конце
- `siblingCount` управляет количеством видимых страниц до и после текущей страницы

```jsx example
const [page, setPage] = useState(5)
return (
  <Row align='center'>
    <Pagination
      page={page}
      boundaryCount={2}
      siblingCount={0}
      pages={10}
      onChangePage={setPage}
    />
  </Row>
)
```

## Sandbox

<Sandbox
  Component={Pagination}
  props={{
    page: $root.get('_session.Props.Pagination.page'),
    onChangePage: page => $root.set('_session.Props.Pagination.page', page)
  }}
  $props={$root.scope('_session.Props.Pagination')}
/>