@xsolla/xui-pagination 0.99.0 → 0.101.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +182 -18
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,43 +1,207 @@
1
- # @xsolla/xui-pagination
1
+ # Pagination
2
2
 
3
- Page navigation control with ellipsis truncation, prev/next arrows, and size variants.
3
+ A cross-platform React pagination component for navigating through paged content. Features adaptive page number display with ellipsis for large page counts.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
+ npm install @xsolla/xui-pagination
9
+ # or
8
10
  yarn add @xsolla/xui-pagination
9
11
  ```
10
12
 
11
- ## Usage
13
+ ## Demo
14
+
15
+ ### Basic Pagination
16
+
17
+ ```tsx
18
+ import * as React from 'react';
19
+ import { Pagination } from '@xsolla/xui-pagination';
20
+
21
+ export default function BasicPagination() {
22
+ const [page, setPage] = React.useState(1);
23
+
24
+ return (
25
+ <Pagination
26
+ currentPage={page}
27
+ totalPages={10}
28
+ onPageChange={setPage}
29
+ />
30
+ );
31
+ }
32
+ ```
33
+
34
+ ### Large Page Count
35
+
36
+ ```tsx
37
+ import * as React from 'react';
38
+ import { Pagination } from '@xsolla/xui-pagination';
39
+
40
+ export default function LargePagination() {
41
+ const [page, setPage] = React.useState(1);
42
+
43
+ return (
44
+ <Pagination
45
+ currentPage={page}
46
+ totalPages={100}
47
+ onPageChange={setPage}
48
+ siblingCount={1}
49
+ />
50
+ );
51
+ }
52
+ ```
53
+
54
+ ### Stretched Layout
55
+
56
+ ```tsx
57
+ import * as React from 'react';
58
+ import { Pagination } from '@xsolla/xui-pagination';
59
+
60
+ export default function StretchedPagination() {
61
+ const [page, setPage] = React.useState(5);
62
+
63
+ return (
64
+ <div style={{ width: '100%' }}>
65
+ <Pagination
66
+ currentPage={page}
67
+ totalPages={20}
68
+ onPageChange={setPage}
69
+ stretched={true}
70
+ />
71
+ </div>
72
+ );
73
+ }
74
+ ```
75
+
76
+ ## Anatomy
77
+
78
+ ```jsx
79
+ import { Pagination } from '@xsolla/xui-pagination';
80
+
81
+ <Pagination
82
+ currentPage={1} // Current active page
83
+ totalPages={10} // Total number of pages
84
+ onPageChange={setPage} // Page change handler
85
+ siblingCount={1} // Pages shown on each side
86
+ showNavigation={true} // Show prev/next arrows
87
+ stretched={false} // Center and stretch
88
+ disabled={false} // Disabled state
89
+ size="md" // Size variant
90
+ />
91
+ ```
92
+
93
+ ## Examples
94
+
95
+ ### Pagination Sizes
12
96
 
13
97
  ```tsx
98
+ import * as React from 'react';
14
99
  import { Pagination } from '@xsolla/xui-pagination';
15
100
 
16
- function MyComponent() {
17
- const [currentPage, setCurrentPage] = React.useState(1);
101
+ export default function PaginationSizes() {
102
+ return (
103
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
104
+ <Pagination size="sm" currentPage={3} totalPages={10} />
105
+ <Pagination size="md" currentPage={3} totalPages={10} />
106
+ <Pagination size="lg" currentPage={3} totalPages={10} />
107
+ </div>
108
+ );
109
+ }
110
+ ```
111
+
112
+ ### Without Navigation Arrows
113
+
114
+ ```tsx
115
+ import * as React from 'react';
116
+ import { Pagination } from '@xsolla/xui-pagination';
117
+
118
+ export default function NoArrowsPagination() {
119
+ const [page, setPage] = React.useState(1);
18
120
 
19
121
  return (
20
122
  <Pagination
123
+ currentPage={page}
21
124
  totalPages={10}
22
- currentPage={currentPage}
23
- onPageChange={setCurrentPage}
125
+ onPageChange={setPage}
126
+ showNavigation={false}
24
127
  />
25
128
  );
26
129
  }
27
130
  ```
28
131
 
29
- ## Props
132
+ ### More Sibling Pages
133
+
134
+ ```tsx
135
+ import * as React from 'react';
136
+ import { Pagination } from '@xsolla/xui-pagination';
137
+
138
+ export default function MoreSiblingsPagination() {
139
+ const [page, setPage] = React.useState(10);
140
+
141
+ return (
142
+ <Pagination
143
+ currentPage={page}
144
+ totalPages={50}
145
+ onPageChange={setPage}
146
+ siblingCount={2}
147
+ />
148
+ );
149
+ }
150
+ ```
151
+
152
+ ### Disabled Pagination
153
+
154
+ ```tsx
155
+ import * as React from 'react';
156
+ import { Pagination } from '@xsolla/xui-pagination';
157
+
158
+ export default function DisabledPagination() {
159
+ return (
160
+ <Pagination
161
+ currentPage={5}
162
+ totalPages={10}
163
+ disabled={true}
164
+ />
165
+ );
166
+ }
167
+ ```
168
+
169
+ ## API Reference
30
170
 
31
171
  ### Pagination
32
172
 
173
+ **Pagination Props:**
174
+
33
175
  | Prop | Type | Default | Description |
34
- |------|------|---------|-------------|
35
- | `currentPage` | `number` | `1` | Active page (1-indexed) |
36
- | `totalPages` | `number` | `1` | Total number of pages |
37
- | `onPageChange` | `(page: number) => void` | — | Called when a page is selected |
38
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size variant |
39
- | `siblingCount` | `number` | `1` | Page buttons shown either side of current page |
40
- | `showNavigation` | `boolean` | `true` | Show prev/next arrow buttons |
41
- | `disabled` | `boolean` | `false` | Disable all interactions |
42
- | `stretched` | `boolean` | `false` | Stretch to fill container width |
43
- | `backgroundColor` | `string` | — | Custom background colour |
176
+ | :--- | :--- | :------ | :---------- |
177
+ | currentPage | `number` | `1` | Current active page (1-indexed). |
178
+ | totalPages | `number` | `1` | Total number of pages. |
179
+ | onPageChange | `(page: number) => void` | - | Page change handler. |
180
+ | siblingCount | `number` | `1` | Number of pages shown on each side of current. |
181
+ | showNavigation | `boolean` | `true` | Show previous/next arrow buttons. |
182
+ | stretched | `boolean` | `false` | Center content and stretch to full width. |
183
+ | disabled | `boolean` | `false` | Disabled state. |
184
+ | size | `"sm" \| "md" \| "lg"` | `"md"` | Size variant. |
185
+ | backgroundColor | `string` | - | Background color. |
186
+ | testID | `string` | - | Test identifier. |
187
+
188
+ ## Behavior
189
+
190
+ - Ellipsis appears when page count exceeds visible slots
191
+ - First and last pages always shown when ellipsis present
192
+ - Navigation arrows disabled at first/last page
193
+ - Active page is visually highlighted
194
+
195
+ ## Page Number Display Logic
196
+
197
+ Given `siblingCount=1` and `totalPages=20`:
198
+ - Page 1: `1 2 3 4 5 ... 20`
199
+ - Page 10: `1 ... 9 10 11 ... 20`
200
+ - Page 20: `1 ... 16 17 18 19 20`
201
+
202
+ ## Accessibility
203
+
204
+ - Page buttons have `aria-label` describing page number
205
+ - Current page has `aria-current="page"`
206
+ - Navigation buttons have descriptive `aria-label`
207
+ - All buttons have `role="button"`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-pagination",
3
- "version": "0.99.0",
3
+ "version": "0.101.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -10,8 +10,8 @@
10
10
  "build:native": "PLATFORM=native tsup"
11
11
  },
12
12
  "dependencies": {
13
- "@xsolla/xui-core": "0.99.0",
14
- "@xsolla/xui-primitives-core": "0.99.0"
13
+ "@xsolla/xui-core": "0.101.0",
14
+ "@xsolla/xui-primitives-core": "0.101.0"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": ">=16.8.0"