Skip to content

Commit 7c94482

Browse files
DiljohnSinghDiljohnSingh
authored
Merge branch 'main' into fix/DG-col-selector-accessibility
2 parents 1f2a7bc + 295bf74 commit 7c94482

6 files changed

Lines changed: 46 additions & 91 deletions

File tree

‎packages/pluggableWidgets/datagrid-web/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
88

99
### Fixed
1010

11+
- We fixed an issue where the footer would take up unnecessary spacing when no content was rendered inside.
12+
13+
### Added
14+
1115
- We added missing Dutch translations for Datagrid 2.
1216

1317
### Changed

‎packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,23 @@ import { useSelectionCounterViewModel } from "../features/selection-counter/inje
66
import { useCustomPagination, usePaginationConfig, usePaginationVM, useTexts } from "../model/hooks/injection-hooks";
77
import { Pagination } from "./Pagination";
88

9-
export const WidgetFooter = observer(function WidgetFooter(): ReactElement {
9+
export const WidgetFooter = observer(function WidgetFooter(): ReactElement | null {
1010
const pgConfig = usePaginationConfig();
1111
const paging = usePaginationVM();
1212
const { loadMoreButtonCaption } = useTexts();
1313
const selectionCounterVM = useSelectionCounterViewModel();
1414
const customPagination = useCustomPagination();
1515

16+
const showFooter =
17+
selectionCounterVM.isBottomCounterVisible ||
18+
paging.paginationVisible ||
19+
paging.showVirtualScrollingWithRowCount ||
20+
paging.showLoadMore;
21+
22+
if (!showFooter) {
23+
return null;
24+
}
25+
1626
return (
1727
<div className="widget-datagrid-footer table-footer">
1828
<div className="widget-datagrid-paging-bottom">

‎packages/pluggableWidgets/datagrid-web/src/features/pagination/Pagination.viewModel.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ export class PaginationViewModel {
2222
pageSize: computed,
2323
currentPage: computed,
2424
paginationVisible: computed,
25+
showLoadMore: computed,
26+
showVirtualScrollingWithRowCount: computed,
2527
hasMoreItems: computed,
2628
totalCount: computed
2729
});
@@ -51,6 +53,14 @@ export class PaginationViewModel {
5153
}
5254
}
5355

56+
get showLoadMore(): boolean {
57+
return this.hasMoreItems && this.pagination === "loadMore";
58+
}
59+
60+
get showVirtualScrollingWithRowCount(): boolean {
61+
return this.pagination === "virtualScrolling" && this.config.showNumberOfRows;
62+
}
63+
5464
get hasMoreItems(): boolean {
5565
return this.query.hasMoreItems;
5666
}

‎packages/pluggableWidgets/gallery-web/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
88

99
### Fixed
1010

11+
- We fixed an issue where the footer would take up unnecessary spacing when no content was rendered inside.
1112
- We fixed an issue where the row count wasn't displayed when "Virtual scroll" is on.
1213

1314
### Added

‎packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,9 @@ export function Gallery<T extends ObjectItem>(props: GalleryProps<T>): ReactElem
8787
const showTopSelectionCounter = selectionCounter && props.selectionCountPosition === "top";
8888
const showBottomSelectionCounter = selectionCounter && props.selectionCountPosition === "bottom";
8989

90+
const showLoadMore = props.paginationType === "loadMore";
91+
const showFooter = showBottomSelectionCounter || showBottomPagination || showLoadMore;
92+
9093
return (
9194
<GalleryRoot
9295
className={props.className}
@@ -140,21 +143,25 @@ export function Gallery<T extends ObjectItem>(props: GalleryProps<T>): ReactElem
140143
<div className="empty-placeholder">{children}</div>
141144
</section>
142145
))}
143-
<GalleryFooter>
144-
<div className="widget-gallery-footer-controls">
145-
{showBottomSelectionCounter && <div className="widget-gallery-fc-start">{selectionCounter}</div>}
146+
{showFooter && (
147+
<GalleryFooter>
148+
<div className="widget-gallery-footer-controls">
149+
{showBottomSelectionCounter && (
150+
<div className="widget-gallery-fc-start">{selectionCounter}</div>
151+
)}
146152

147-
<div className="widget-gallery-fc-end">
148-
{showBottomPagination && pagination}
149-
{props.paginationType === "loadMore" &&
150-
(props.preview ? (
151-
<LoadMorePreview>{loadMoreButtonCaption}</LoadMorePreview>
152-
) : (
153-
<LoadMore>{loadMoreButtonCaption}</LoadMore>
154-
))}
153+
<div className="widget-gallery-fc-end">
154+
{showBottomPagination && pagination}
155+
{showLoadMore &&
156+
(props.preview ? (
157+
<LoadMorePreview>{loadMoreButtonCaption}</LoadMorePreview>
158+
) : (
159+
<LoadMore>{loadMoreButtonCaption}</LoadMore>
160+
))}
161+
</div>
155162
</div>
156-
</div>
157-
</GalleryFooter>
163+
</GalleryFooter>
164+
)}
158165
</GalleryRoot>
159166
);
160167
}

‎packages/pluggableWidgets/gallery-web/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap‎

Lines changed: 0 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -53,17 +53,6 @@ exports[`Gallery DOM Structure renders correctly 1`] = `
5353
</div>
5454
</div>
5555
</div>
56-
<div
57-
class="widget-gallery-footer"
58-
>
59-
<div
60-
class="widget-gallery-footer-controls"
61-
>
62-
<div
63-
class="widget-gallery-fc-end"
64-
/>
65-
</div>
66-
</div>
6756
</div>
6857
</DocumentFragment>
6958
`;
@@ -136,17 +125,6 @@ exports[`Gallery DOM Structure renders correctly with onclick event 1`] = `
136125
</div>
137126
</div>
138127
</div>
139-
<div
140-
class="widget-gallery-footer"
141-
>
142-
<div
143-
class="widget-gallery-footer-controls"
144-
>
145-
<div
146-
class="widget-gallery-fc-end"
147-
/>
148-
</div>
149-
</div>
150128
</div>
151129
</DocumentFragment>
152130
`;
@@ -207,17 +185,6 @@ exports[`Gallery with accessibility properties renders correctly with items 1`]
207185
</div>
208186
</div>
209187
</div>
210-
<div
211-
class="widget-gallery-footer"
212-
>
213-
<div
214-
class="widget-gallery-footer-controls"
215-
>
216-
<div
217-
class="widget-gallery-fc-end"
218-
/>
219-
</div>
220-
</div>
221188
</div>
222189
</DocumentFragment>
223190
`;
@@ -256,17 +223,6 @@ exports[`Gallery with accessibility properties renders correctly without items 1
256223
</span>
257224
</div>
258225
</section>
259-
<div
260-
class="widget-gallery-footer"
261-
>
262-
<div
263-
class="widget-gallery-footer-controls"
264-
>
265-
<div
266-
class="widget-gallery-fc-end"
267-
/>
268-
</div>
269-
</div>
270226
</div>
271227
</DocumentFragment>
272228
`;
@@ -304,17 +260,6 @@ exports[`Gallery with empty option renders correctly 1`] = `
304260
</span>
305261
</div>
306262
</section>
307-
<div
308-
class="widget-gallery-footer"
309-
>
310-
<div
311-
class="widget-gallery-footer-controls"
312-
>
313-
<div
314-
class="widget-gallery-fc-end"
315-
/>
316-
</div>
317-
</div>
318263
</div>
319264
</DocumentFragment>
320265
`;
@@ -491,17 +436,6 @@ exports[`Gallery with pagination renders correctly 1`] = `
491436
</div>
492437
</div>
493438
</div>
494-
<div
495-
class="widget-gallery-footer"
496-
>
497-
<div
498-
class="widget-gallery-footer-controls"
499-
>
500-
<div
501-
class="widget-gallery-fc-end"
502-
/>
503-
</div>
504-
</div>
505439
</div>
506440
</DocumentFragment>
507441
`;
@@ -553,17 +487,6 @@ exports[`Gallery without filters renders structure without header container 1`]
553487
</div>
554488
</div>
555489
</div>
556-
<div
557-
class="widget-gallery-footer"
558-
>
559-
<div
560-
class="widget-gallery-footer-controls"
561-
>
562-
<div
563-
class="widget-gallery-fc-end"
564-
/>
565-
</div>
566-
</div>
567490
</div>
568491
</DocumentFragment>
569492
`;

0 commit comments

Comments
 (0)