Skip to content

Commit 7968f78

Browse files
sjbursjbur
authored
Pagination: Component is hidden when itemCount is lower than pageSize (#30955)
1 parent ce06911 commit 7968f78

File tree

14 files changed

+166
-28
lines changed

14 files changed

+166
-28
lines changed

‎packages/devextreme-angular/src/ui/data-grid/nested/pager.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,10 @@ export class DxoDataGridPagerComponent extends NestedOption implements OnDestroy
7979
}
8080

8181
@Input()
82-
get showPageSizeSelector(): boolean {
82+
get showPageSizeSelector(): boolean | Mode {
8383
return this._getOption('showPageSizeSelector');
8484
}
85-
set showPageSizeSelector(value: boolean) {
85+
set showPageSizeSelector(value: boolean | Mode) {
8686
this._setOption('showPageSizeSelector', value);
8787
}
8888

‎packages/devextreme-angular/src/ui/nested/base/pager.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,10 @@ export abstract class DxoPager extends NestedOption {
5454
this._setOption('showNavigationButtons', value);
5555
}
5656

57-
get showPageSizeSelector(): boolean {
57+
get showPageSizeSelector(): Mode | boolean {
5858
return this._getOption('showPageSizeSelector');
5959
}
60-
set showPageSizeSelector(value: boolean) {
60+
set showPageSizeSelector(value: Mode | boolean) {
6161
this._setOption('showPageSizeSelector', value);
6262
}
6363

‎packages/devextreme-angular/src/ui/pagination/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
} from '@angular/core';
2121

2222

23-
import { DisplayMode } from 'devextreme/common';
23+
import { DisplayMode, Mode } from 'devextreme/common';
2424
import { EventInfo } from 'devextreme/common/core/events';
2525

2626
import DxPagination from 'devextreme/ui/pagination';
@@ -298,10 +298,10 @@ export class DxPaginationComponent extends DxComponent implements OnDestroy, OnC
298298
299299
*/
300300
@Input()
301-
get showPageSizeSelector(): boolean {
301+
get showPageSizeSelector(): boolean | Mode {
302302
return this._getOption('showPageSizeSelector');
303303
}
304-
set showPageSizeSelector(value: boolean) {
304+
set showPageSizeSelector(value: boolean | Mode) {
305305
this._setOption('showPageSizeSelector', value);
306306
}
307307

@@ -507,7 +507,7 @@ export class DxPaginationComponent extends DxComponent implements OnDestroy, OnC
507507
* This member supports the internal infrastructure and is not intended to be used directly from your code.
508508
509509
*/
510-
@Output() showPageSizeSelectorChange: EventEmitter<boolean>;
510+
@Output() showPageSizeSelectorChange: EventEmitter<boolean | Mode>;
511511

512512
/**
513513

‎packages/devextreme-angular/src/ui/tree-list/nested/pager.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,10 @@ export class DxoTreeListPagerComponent extends NestedOption implements OnDestroy
7979
}
8080

8181
@Input()
82-
get showPageSizeSelector(): boolean {
82+
get showPageSizeSelector(): boolean | Mode {
8383
return this._getOption('showPageSizeSelector');
8484
}
85-
set showPageSizeSelector(value: boolean) {
85+
set showPageSizeSelector(value: boolean | Mode) {
8686
this._setOption('showPageSizeSelector', value);
8787
}
8888

‎packages/devextreme-react/src/data-grid.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2181,7 +2181,7 @@ type IPagerProps = React.PropsWithChildren<{
21812181
label?: string;
21822182
showInfo?: boolean;
21832183
showNavigationButtons?: boolean;
2184-
showPageSizeSelector?: boolean;
2184+
showPageSizeSelector?: boolean | Mode;
21852185
visible?: boolean | Mode;
21862186
}>
21872187
const _componentPager = (props: IPagerProps) => {

‎packages/devextreme-react/src/tree-list.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1853,7 +1853,7 @@ type IPagerProps = React.PropsWithChildren<{
18531853
label?: string;
18541854
showInfo?: boolean;
18551855
showNavigationButtons?: boolean;
1856-
showPageSizeSelector?: boolean;
1856+
showPageSizeSelector?: boolean | Mode;
18571857
visible?: boolean | Mode;
18581858
}>
18591859
const _componentPager = (props: IPagerProps) => {

‎packages/devextreme-vue/src/data-grid.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2694,7 +2694,7 @@ const DxPagerConfig = {
26942694
label: String,
26952695
showInfo: Boolean,
26962696
showNavigationButtons: Boolean,
2697-
showPageSizeSelector: Boolean,
2697+
showPageSizeSelector: [Boolean, String] as PropType<boolean | Mode>,
26982698
visible: [Boolean, String] as PropType<boolean | Mode>
26992699
}
27002700
};

‎packages/devextreme-vue/src/pagination.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Pagination, { Properties } from "devextreme/ui/pagination";
55
import DOMComponent from "devextreme/core/dom_component";
66
import {
77
DisplayMode,
8+
Mode,
89
} from "devextreme/common";
910
import {
1011
EventInfo,
@@ -70,7 +71,7 @@ const componentConfig = {
7071
rtlEnabled: Boolean,
7172
showInfo: Boolean,
7273
showNavigationButtons: Boolean,
73-
showPageSizeSelector: Boolean,
74+
showPageSizeSelector: [Boolean, String] as PropType<boolean | Mode>,
7475
tabIndex: Number,
7576
visible: Boolean,
7677
width: [Function, Number, String] as PropType<((() => number | string)) | number | string>

‎packages/devextreme-vue/src/tree-list.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2377,7 +2377,7 @@ const DxPagerConfig = {
23772377
label: String,
23782378
showInfo: Boolean,
23792379
showNavigationButtons: Boolean,
2380-
showPageSizeSelector: Boolean,
2380+
showPageSizeSelector: [Boolean, String] as PropType<boolean | Mode>,
23812381
visible: [Boolean, String] as PropType<boolean | Mode>
23822382
}
23832383
};

‎packages/devextreme/js/__internal/pagination/__tests__/content.test.ts‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { describe, expect, it } from '@jest/globals';
2+
import type { ComponentWrapperProps } from '@ts/core/r1/component_wrapper';
3+
4+
import Pagination from '../wrappers/pagination';
5+
6+
describe('Pagination visibility', () => {
7+
const createPagination = (config: ComponentWrapperProps): {
8+
container: HTMLElement;
9+
pagination: Pagination;
10+
} => {
11+
const container = document.createElement('div');
12+
const pagination = new Pagination(container, {
13+
pageSize: 10,
14+
pageIndex: 1,
15+
pagesNavigatorVisible: 'auto',
16+
hasKnownLastPage: true,
17+
showInfo: false,
18+
showNavigationButtons: false,
19+
showPageSizeSelector: false,
20+
...config,
21+
});
22+
return { container, pagination };
23+
};
24+
25+
const isPagesContainerVisible = (container: HTMLElement): boolean => {
26+
const pagesContainer = container.querySelector('.dx-pages');
27+
const style = pagesContainer?.getAttribute('style');
28+
const isVisible = style === null || !style?.includes('visibility: hidden');
29+
return isVisible;
30+
};
31+
32+
const isPagesContainerHidden = (container: HTMLElement): boolean => {
33+
const pagesContainer = container.querySelector('.dx-pages');
34+
const isHidden = pagesContainer?.getAttribute('style')?.includes('visibility: hidden') ?? false;
35+
return isHidden;
36+
};
37+
38+
describe('when pageCount = 1', () => {
39+
it('should hide container when no explicit visible components are enabled', () => {
40+
const { container } = createPagination({ itemCount: 5, pageSize: 10 });
41+
42+
expect(isPagesContainerHidden(container)).toBe(true);
43+
});
44+
45+
it('should hide container when showPageSizeSelector is set to auto', () => {
46+
const { container } = createPagination({ itemCount: 5, pageSize: 10, showPageSizeSelector: 'auto' });
47+
48+
expect(isPagesContainerHidden(container)).toBe(true);
49+
});
50+
51+
it('should show container when showInfo is enabled', () => {
52+
const { container } = createPagination({
53+
itemCount: 8,
54+
pageSize: 10,
55+
showInfo: true,
56+
});
57+
58+
expect(isPagesContainerVisible(container)).toBe(true);
59+
});
60+
61+
it('should show container when showNavigationButtons is enabled', () => {
62+
const { container } = createPagination({
63+
itemCount: 6,
64+
pageSize: 10,
65+
showNavigationButtons: true,
66+
});
67+
68+
expect(isPagesContainerVisible(container)).toBe(true);
69+
});
70+
71+
it('should show container when showPageSizeSelector is enabled', () => {
72+
const { container } = createPagination({
73+
itemCount: 9,
74+
pageSize: 10,
75+
showPageSizeSelector: true,
76+
allowedPageSizes: [5, 10, 'all'],
77+
});
78+
79+
expect(isPagesContainerVisible(container)).toBe(true);
80+
});
81+
});
82+
83+
describe('when pageCount > 1', () => {
84+
it('should always show container regardless of other settings', () => {
85+
const { container } = createPagination({
86+
itemCount: 25,
87+
pageSize: 10,
88+
});
89+
90+
expect(isPagesContainerVisible(container)).toBe(true);
91+
});
92+
});
93+
94+
describe('dynamic visibility changes', () => {
95+
it('should toggle visibility when showInfo changes at runtime', () => {
96+
const { container, pagination } = createPagination({
97+
itemCount: 7,
98+
pageSize: 10,
99+
});
100+
101+
pagination.option('showInfo', true);
102+
103+
expect(isPagesContainerVisible(container)).toBe(true);
104+
105+
pagination.option('showInfo', false);
106+
107+
expect(isPagesContainerHidden(container)).toBe(true);
108+
});
109+
});
110+
111+
it('should keep info block visible when pageSize > itemCount and showInfo=true (T1299780)', () => {
112+
const { container } = createPagination({
113+
itemCount: 4,
114+
pageSize: 10,
115+
showInfo: true,
116+
allowedPageSizes: [4, 6, 11],
117+
});
118+
119+
const infoBlock = container.querySelector('.dx-info');
120+
expect(infoBlock).toBeTruthy();
121+
});
122+
});

0 commit comments

Comments
 (0)