react-router-pagination 3.2.0 → 3.2.1
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.
- package/README.md +58 -58
- package/package.json +1 -1
- package/src/pagination/component.tsx +3 -3
package/README.md
CHANGED
|
@@ -46,39 +46,39 @@ Generates:
|
|
|
46
46
|
|
|
47
47
|
```html
|
|
48
48
|
<ul class="pagination">
|
|
49
|
-
<li class="
|
|
49
|
+
<li class="current-page">
|
|
50
50
|
<a href="/1">
|
|
51
|
-
<span class="
|
|
51
|
+
<span class="page-number">1</span>
|
|
52
52
|
</a>
|
|
53
53
|
</li>
|
|
54
54
|
<li class="page">
|
|
55
55
|
<a href="/2">
|
|
56
|
-
<span class="
|
|
56
|
+
<span class="page-number">2</span>
|
|
57
57
|
</a>
|
|
58
58
|
</li>
|
|
59
59
|
<li class="page">
|
|
60
60
|
<a href="/3">
|
|
61
|
-
<span class="
|
|
61
|
+
<span class="page-number">3</span>
|
|
62
62
|
</a>
|
|
63
63
|
</li>
|
|
64
64
|
<li class="page">
|
|
65
65
|
<a href="/4">
|
|
66
|
-
<span class="
|
|
66
|
+
<span class="page-number">4</span>
|
|
67
67
|
</a>
|
|
68
68
|
</li>
|
|
69
69
|
<li class="page">
|
|
70
70
|
<a href="/5">
|
|
71
|
-
<span class="
|
|
71
|
+
<span class="page-number">5</span>
|
|
72
72
|
</a>
|
|
73
73
|
</li>
|
|
74
|
-
<li class="
|
|
74
|
+
<li class="forward-page">
|
|
75
75
|
<a href="/6">
|
|
76
|
-
<span class="
|
|
76
|
+
<span class="forward">»</span>
|
|
77
77
|
</a>
|
|
78
78
|
</li>
|
|
79
|
-
<li class="
|
|
79
|
+
<li class="last-page">
|
|
80
80
|
<a href="/12">
|
|
81
|
-
<span class="
|
|
81
|
+
<span class="page-number">12</span>
|
|
82
82
|
</a>
|
|
83
83
|
</li>
|
|
84
84
|
</ul>
|
|
@@ -262,39 +262,39 @@ Given a `totalPages` of 12 and a `spread` of 5 then *React Router Pagination* wi
|
|
|
262
262
|
|
|
263
263
|
```html
|
|
264
264
|
<ul class="pagination">
|
|
265
|
-
<li class="
|
|
265
|
+
<li class="current-page">
|
|
266
266
|
<a href="/catalogue/products/ABCDEF/stores/1">
|
|
267
|
-
<span class="
|
|
267
|
+
<span class="page-number">1</span>
|
|
268
268
|
</a>
|
|
269
269
|
</li>
|
|
270
270
|
<li class="page">
|
|
271
271
|
<a href="/catalogue/products/ABCDEF/stores/2">
|
|
272
|
-
<span class="
|
|
272
|
+
<span class="page-number">2</span>
|
|
273
273
|
</a>
|
|
274
274
|
</li>
|
|
275
275
|
<li class="page">
|
|
276
276
|
<a href="/catalogue/products/ABCDEF/stores/3">
|
|
277
|
-
<span class="
|
|
277
|
+
<span class="page-number">3</span>
|
|
278
278
|
</a>
|
|
279
279
|
</li>
|
|
280
280
|
<li class="page">
|
|
281
281
|
<a href="/catalogue/products/ABCDEF/stores/4">
|
|
282
|
-
<span class="
|
|
282
|
+
<span class="page-number">4</span>
|
|
283
283
|
</a>
|
|
284
284
|
</li>
|
|
285
285
|
<li class="page">
|
|
286
286
|
<a href="/catalogue/products/ABCDEF/stores/5">
|
|
287
|
-
<span class="
|
|
287
|
+
<span class="page-number">5</span>
|
|
288
288
|
</a>
|
|
289
289
|
</li>
|
|
290
|
-
<li class="
|
|
290
|
+
<li class="forward-page">
|
|
291
291
|
<a href="/catalogue/products/ABCDEF/stores/6">
|
|
292
|
-
<span class="
|
|
292
|
+
<span class="forward">»</span>
|
|
293
293
|
</a>
|
|
294
294
|
</li>
|
|
295
|
-
<li class="
|
|
295
|
+
<li class="last-page">
|
|
296
296
|
<a href="/catalogue/products/ABCDEF/stores/12">
|
|
297
|
-
<span class="
|
|
297
|
+
<span class="page-number">12</span>
|
|
298
298
|
</a>
|
|
299
299
|
</li>
|
|
300
300
|
</ul>
|
|
@@ -313,43 +313,43 @@ The value for `spread` should be an integer. It's the maximum number of page lin
|
|
|
313
313
|
|
|
314
314
|
If `totalPages` is 12, `pageNumber` is 1, and `spread` is 5, then links to pages 1, 2, 3, 4 and 5 will be displayed (as well as a "forward" link to page 6 and a link to the last page, 12).
|
|
315
315
|
|
|
316
|
-
Class names indicate the `
|
|
316
|
+
Class names indicate the `current-page`, the `forward-page`, and the `last-page`.
|
|
317
317
|
|
|
318
318
|
```html
|
|
319
319
|
<ul class="pagination">
|
|
320
|
-
<li class="
|
|
320
|
+
<li class="current-page">
|
|
321
321
|
<a href="/1">
|
|
322
|
-
<span class="
|
|
322
|
+
<span class="page-number">1</span>
|
|
323
323
|
</a>
|
|
324
324
|
</li>
|
|
325
325
|
<li class="page">
|
|
326
326
|
<a href="/2">
|
|
327
|
-
<span class="
|
|
327
|
+
<span class="page-number">2</span>
|
|
328
328
|
</a>
|
|
329
329
|
</li>
|
|
330
330
|
<li class="page">
|
|
331
331
|
<a href="/3">
|
|
332
|
-
<span class="
|
|
332
|
+
<span class="page-number">3</span>
|
|
333
333
|
</a>
|
|
334
334
|
</li>
|
|
335
335
|
<li class="page">
|
|
336
336
|
<a href="/4">
|
|
337
|
-
<span class="
|
|
337
|
+
<span class="page-number">4</span>
|
|
338
338
|
</a>
|
|
339
339
|
</li>
|
|
340
340
|
<li class="page">
|
|
341
341
|
<a href="/5">
|
|
342
|
-
<span class="
|
|
342
|
+
<span class="page-number">5</span>
|
|
343
343
|
</a>
|
|
344
344
|
</li>
|
|
345
|
-
<li class="
|
|
345
|
+
<li class="forward-page">
|
|
346
346
|
<a href="/6">
|
|
347
|
-
<span class="
|
|
347
|
+
<span class="forward">»</span>
|
|
348
348
|
</a>
|
|
349
349
|
</li>
|
|
350
|
-
<li class="
|
|
350
|
+
<li class="last-page">
|
|
351
351
|
<a href="/12">
|
|
352
|
-
<span class="
|
|
352
|
+
<span class="page-number">12</span>
|
|
353
353
|
</a>
|
|
354
354
|
</li>
|
|
355
355
|
</ul>
|
|
@@ -357,48 +357,48 @@ Class names indicate the `currentPage`, the `forwardPage`, and the `lastPage`.
|
|
|
357
357
|
|
|
358
358
|
If `totalPages` is 12, `pageNumber` is 4, and `spread` is 5, then links to pages 1, 2, 3, 4 and 5 will be displayed (as well as a "forward" link to page 6 and a link to the last page, 12).
|
|
359
359
|
|
|
360
|
-
Class names indicate the `
|
|
360
|
+
Class names indicate the `zero-page`, the `current-page`, the `forward-page`, and the `last-page`.
|
|
361
361
|
|
|
362
362
|
```html
|
|
363
363
|
<ul class="pagination">
|
|
364
|
-
<li class="
|
|
364
|
+
<li class="zero-page">
|
|
365
365
|
<a href="/1">
|
|
366
|
-
<span class="
|
|
366
|
+
<span class="page-number">1</span>
|
|
367
367
|
</a>
|
|
368
368
|
</li>
|
|
369
369
|
<li class="page">
|
|
370
370
|
<a href="/2">
|
|
371
|
-
<span class="
|
|
371
|
+
<span class="page-number">2</span>
|
|
372
372
|
</a>
|
|
373
373
|
</li>
|
|
374
374
|
<li class="page">
|
|
375
375
|
<a href="/3">
|
|
376
|
-
<span class="
|
|
376
|
+
<span class="page-number">3</span>
|
|
377
377
|
</a>
|
|
378
378
|
</li>
|
|
379
|
-
<li class="
|
|
379
|
+
<li class="current-page">
|
|
380
380
|
<a href="/4">
|
|
381
|
-
<span class="
|
|
381
|
+
<span class="page-number">4</span>
|
|
382
382
|
</a>
|
|
383
383
|
</li>
|
|
384
384
|
<li class="page">
|
|
385
385
|
<a href="/5">
|
|
386
|
-
<span class="
|
|
386
|
+
<span class="page-number">5</span>
|
|
387
387
|
</a>
|
|
388
388
|
</li>
|
|
389
389
|
<li class="page">
|
|
390
390
|
<a href="/6">
|
|
391
|
-
<span class="
|
|
391
|
+
<span class="page-number">6</span>
|
|
392
392
|
</a>
|
|
393
393
|
</li>
|
|
394
|
-
<li class="
|
|
394
|
+
<li class="forward-page">
|
|
395
395
|
<a href="/7">
|
|
396
|
-
<span class="
|
|
396
|
+
<span class="forward">»</span>
|
|
397
397
|
</a>
|
|
398
398
|
</li>
|
|
399
|
-
<li class="
|
|
399
|
+
<li class="last-page">
|
|
400
400
|
<a href="/12">
|
|
401
|
-
<span class="
|
|
401
|
+
<span class="page-number">12</span>
|
|
402
402
|
</a>
|
|
403
403
|
</li>
|
|
404
404
|
</ul>
|
|
@@ -406,53 +406,53 @@ Class names indicate the `zeroPage`, the `currentPage`, the `forwardPage`, and t
|
|
|
406
406
|
|
|
407
407
|
If `totalPages` is 12, `pageNumber` is 8, and `spread` is 5, then links to pages 6, 7, 8, 9, and 10 will be displayed (as well as a "reverse" link to page 5, a "forward" link to page 11 and a link to the first page, 1, and the last page, 12).
|
|
408
408
|
|
|
409
|
-
Class names indicate the `
|
|
409
|
+
Class names indicate the `zero-page`, the `reverse-page`, the `current-page`, the `forward-page`, and the `last-page`.
|
|
410
410
|
|
|
411
411
|
```html
|
|
412
412
|
<ul class="pagination">
|
|
413
|
-
<li class="
|
|
413
|
+
<li class="zero-page">
|
|
414
414
|
<a href="/1">
|
|
415
|
-
<span class="
|
|
415
|
+
<span class="page-number">1</span>
|
|
416
416
|
</a>
|
|
417
417
|
</li>
|
|
418
|
-
<li class="
|
|
418
|
+
<li class="reverse-page">
|
|
419
419
|
<a href="/5">
|
|
420
420
|
<span class="reverse">«</span>
|
|
421
421
|
</a>
|
|
422
422
|
</li>
|
|
423
423
|
<li class="page">
|
|
424
424
|
<a href="/6">
|
|
425
|
-
<span class="
|
|
425
|
+
<span class="page-number">6</span>
|
|
426
426
|
</a>
|
|
427
427
|
</li>
|
|
428
428
|
<li class="page">
|
|
429
429
|
<a href="/7">
|
|
430
|
-
<span class="
|
|
430
|
+
<span class="page-number">7</span>
|
|
431
431
|
</a>
|
|
432
432
|
</li>
|
|
433
|
-
<li class="
|
|
433
|
+
<li class="current-page">
|
|
434
434
|
<a href="/8">
|
|
435
|
-
<span class="
|
|
435
|
+
<span class="page-number">8</span>
|
|
436
436
|
</a>
|
|
437
437
|
</li>
|
|
438
438
|
<li class="page">
|
|
439
439
|
<a href="/9">
|
|
440
|
-
<span class="
|
|
440
|
+
<span class="page-number">9</span>
|
|
441
441
|
</a>
|
|
442
442
|
</li>
|
|
443
443
|
<li class="page">
|
|
444
444
|
<a href="/10">
|
|
445
|
-
<span class="
|
|
445
|
+
<span class="page-number">10</span>
|
|
446
446
|
</a>
|
|
447
447
|
</li>
|
|
448
|
-
<li class="
|
|
448
|
+
<li class="forward-page">
|
|
449
449
|
<a href="/11">
|
|
450
|
-
<span class="
|
|
450
|
+
<span class="forward">»</span>
|
|
451
451
|
</a>
|
|
452
452
|
</li>
|
|
453
|
-
<li class="
|
|
453
|
+
<li class="last-page">
|
|
454
454
|
<a href="/12">
|
|
455
|
-
<span class="
|
|
455
|
+
<span class="page-number">12</span>
|
|
456
456
|
</a>
|
|
457
457
|
</li>
|
|
458
458
|
</ul>
|
package/package.json
CHANGED
|
@@ -109,7 +109,7 @@ export default abstract class AbstractPagination<P, S> extends Component<P & Abs
|
|
|
109
109
|
<li key={getListItemKey('reverse')} className='reverse-page'>
|
|
110
110
|
<Link to={getLinkTo(match, n)} onClick={() => this.handlePageNumberSelect(n)}>
|
|
111
111
|
<span className='reverse'>
|
|
112
|
-
{'\
|
|
112
|
+
{'\u2039'}
|
|
113
113
|
</span>
|
|
114
114
|
</Link>
|
|
115
115
|
</li>
|
|
@@ -124,8 +124,8 @@ export default abstract class AbstractPagination<P, S> extends Component<P & Abs
|
|
|
124
124
|
return (
|
|
125
125
|
<li key={getListItemKey('forward')} className='forward-page'>
|
|
126
126
|
<Link to={getLinkTo(match, n)} onClick={() => this.handlePageNumberSelect(n)}>
|
|
127
|
-
<span className='forward
|
|
128
|
-
{'\
|
|
127
|
+
<span className='forward'>
|
|
128
|
+
{'\u203A'}
|
|
129
129
|
</span>
|
|
130
130
|
</Link>
|
|
131
131
|
</li>
|