Skip to content

Commit 5844212

Browse files
SnowyLeopardSnowyLeopard
authored
Fixed an issue where noRowsPerPage option wasn't being respected on smaller screensizes (jbetancur#1127)
1 parent a6ee440 commit 5844212

3 files changed

Lines changed: 218 additions & 1 deletion

File tree

‎src/DataTable/Pagination.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ function Pagination({
174174
{paginationIconPrevious}
175175
</Button>
176176

177-
{!shouldShow && select}
177+
{!options.noRowsPerPage && !shouldShow && select}
178178

179179
<Button
180180
id="pagination-next-page"

‎src/DataTable/__tests__/Pagination.test.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,3 +210,23 @@ describe('when clicking the Previous Page button', () => {
210210
expect(onChangeRowsPerPageMock).toBeCalledWith(20, 2);
211211
});
212212
});
213+
214+
describe('when the screensize is small', () => {
215+
test('paginationComponentOption noRowsPerPage should be respected', () => {
216+
global.innerWidth = 500;
217+
const { container } = renderWithTheme(
218+
<Pagination
219+
currentPage={1}
220+
rowsPerPage={10}
221+
rowCount={40}
222+
onChangePage={jest.fn()}
223+
onChangeRowsPerPage={jest.fn()}
224+
paginationComponentOptions={{
225+
noRowsPerPage: true,
226+
}}
227+
/>,
228+
);
229+
230+
expect(container.firstChild).toMatchSnapshot();
231+
});
232+
});

‎src/DataTable/__tests__/__snapshots__/Pagination.test.tsx.snap‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,3 +335,200 @@ exports[`should render correctly with default props 1`] = `
335335
</div>
336336
</nav>
337337
`;
338+
339+
exports[`when the screensize is small paginationComponentOption noRowsPerPage should be respected 1`] = `
340+
.c0 {
341+
display: -webkit-box;
342+
display: -webkit-flex;
343+
display: -ms-flexbox;
344+
display: flex;
345+
-webkit-flex: 1 1 auto;
346+
-ms-flex: 1 1 auto;
347+
flex: 1 1 auto;
348+
-webkit-box-pack: end;
349+
-webkit-justify-content: flex-end;
350+
-ms-flex-pack: end;
351+
justify-content: flex-end;
352+
-webkit-align-items: center;
353+
-webkit-box-align: center;
354+
-ms-flex-align: center;
355+
align-items: center;
356+
box-sizing: border-box;
357+
padding-right: 8px;
358+
padding-left: 8px;
359+
width: 100%;
360+
color: rgba(0,0,0,0.54);
361+
font-size: 13px;
362+
min-height: 56px;
363+
background-color: #FFFFFF;
364+
border-top-style: solid;
365+
border-top-width: 1px;
366+
border-top-color: rgba(0,0,0,.12);
367+
}
368+
369+
.c2 {
370+
position: relative;
371+
display: block;
372+
-webkit-user-select: none;
373+
-moz-user-select: none;
374+
-ms-user-select: none;
375+
user-select: none;
376+
border: none;
377+
border-radius: 50%;
378+
height: 40px;
379+
width: 40px;
380+
padding: 8px;
381+
margin: px;
382+
cursor: pointer;
383+
-webkit-transition: 0.4s;
384+
transition: 0.4s;
385+
color: rgba(0,0,0,.54);
386+
fill: rgba(0,0,0,.54);
387+
background-color: transparent;
388+
}
389+
390+
.c2:disabled {
391+
cursor: unset;
392+
color: rgba(0,0,0,.18);
393+
fill: rgba(0,0,0,.18);
394+
}
395+
396+
.c2:hover:not(:disabled) {
397+
background-color: rgba(0,0,0,.12);
398+
}
399+
400+
.c2:focus {
401+
outline: none;
402+
background-color: rgba(0,0,0,.12);
403+
}
404+
405+
.c1 {
406+
display: -webkit-box;
407+
display: -webkit-flex;
408+
display: -ms-flexbox;
409+
display: flex;
410+
-webkit-align-items: center;
411+
-webkit-box-align: center;
412+
-ms-flex-align: center;
413+
align-items: center;
414+
border-radius: 4px;
415+
white-space: nowrap;
416+
}
417+
418+
@media screen and (max-width:599px) {
419+
.c1 {
420+
width: 100%;
421+
-webkit-box-pack: space-around;
422+
-webkit-justify-content: space-around;
423+
-ms-flex-pack: space-around;
424+
justify-content: space-around;
425+
}
426+
}
427+
428+
<nav
429+
class="c0 rdt_Pagination"
430+
>
431+
<div
432+
class="c1"
433+
>
434+
<button
435+
aria-disabled="true"
436+
aria-label="First Page"
437+
class="c2"
438+
disabled=""
439+
id="pagination-first-page"
440+
type="button"
441+
>
442+
<svg
443+
aria-hidden="true"
444+
height="24"
445+
role="presentation"
446+
viewBox="0 0 24 24"
447+
width="24"
448+
xmlns="http://www.w3.org/2000/svg"
449+
>
450+
<path
451+
d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"
452+
/>
453+
<path
454+
d="M24 24H0V0h24v24z"
455+
fill="none"
456+
/>
457+
</svg>
458+
</button>
459+
<button
460+
aria-disabled="true"
461+
aria-label="Previous Page"
462+
class="c2"
463+
disabled=""
464+
id="pagination-previous-page"
465+
type="button"
466+
>
467+
<svg
468+
aria-hidden="true"
469+
height="24"
470+
role="presentation"
471+
viewBox="0 0 24 24"
472+
width="24"
473+
xmlns="http://www.w3.org/2000/svg"
474+
>
475+
<path
476+
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
477+
/>
478+
<path
479+
d="M0 0h24v24H0z"
480+
fill="none"
481+
/>
482+
</svg>
483+
</button>
484+
<button
485+
aria-disabled="false"
486+
aria-label="Next Page"
487+
class="c2"
488+
id="pagination-next-page"
489+
type="button"
490+
>
491+
<svg
492+
aria-hidden="true"
493+
height="24"
494+
role="presentation"
495+
viewBox="0 0 24 24"
496+
width="24"
497+
xmlns="http://www.w3.org/2000/svg"
498+
>
499+
<path
500+
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
501+
/>
502+
<path
503+
d="M0 0h24v24H0z"
504+
fill="none"
505+
/>
506+
</svg>
507+
</button>
508+
<button
509+
aria-disabled="false"
510+
aria-label="Last Page"
511+
class="c2"
512+
id="pagination-last-page"
513+
type="button"
514+
>
515+
<svg
516+
aria-hidden="true"
517+
height="24"
518+
role="presentation"
519+
viewBox="0 0 24 24"
520+
width="24"
521+
xmlns="http://www.w3.org/2000/svg"
522+
>
523+
<path
524+
d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"
525+
/>
526+
<path
527+
d="M0 0h24v24H0V0z"
528+
fill="none"
529+
/>
530+
</svg>
531+
</button>
532+
</div>
533+
</nav>
534+
`;

0 commit comments

Comments
 (0)