GitHub/divkit
1
0
Fork 0
mirror of https://github.com/divkit/divkit.git synced 2026-05-07 20:02:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Pager wrap content fixes

Browse Source 
commit_hash:6a7c78031d17a3ca031667c091b139dc5c14372e
This commit is contained in:
4eb0da
2025-12-16 11:36:21 +03:00
parent 924ca2368b
commit 474d88d0be
8 changed files with 38 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.mapping.json
+4
View File
@@ -19716,6 +19716,8 @@
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-few-pages-end/firefoxMobile/horizontal-pager-wrap-content-size-mode-few-pages-end.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-few-pages-end/firefoxMobile/horizontal-pager-wrap-content-size-mode-few-pages-end.png",
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-few-pages/chromeMobile/horizontal-pager-wrap-content-size-mode-few-pages.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-few-pages/chromeMobile/horizontal-pager-wrap-content-size-mode-few-pages.png",
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-few-pages/firefoxMobile/horizontal-pager-wrap-content-size-mode-few-pages.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-few-pages/firefoxMobile/horizontal-pager-wrap-content-size-mode-few-pages.png",
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-match-parent/chromeMobile/horizontal-pager-wrap-content-size-mode-match-parent.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-match-parent/chromeMobile/horizontal-pager-wrap-content-size-mode-match-parent.png",
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-match-parent/firefoxMobile/horizontal-pager-wrap-content-size-mode-match-parent.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-match-parent/firefoxMobile/horizontal-pager-wrap-content-size-mode-match-parent.png",
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-with-item-spacing/chromeMobile/horizontal-pager-wrap-content-size-mode-with-item-spacing.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-with-item-spacing/chromeMobile/horizontal-pager-wrap-content-size-mode-with-item-spacing.png",
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-with-item-spacing/firefoxMobile/horizontal-pager-wrap-content-size-mode-with-item-spacing.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-with-item-spacing/firefoxMobile/horizontal-pager-wrap-content-size-mode-with-item-spacing.png",
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-width-with-paddings/chromeMobile/horizontal-pager-wrap-content-width-with-paddings.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-width-with-paddings/chromeMobile/horizontal-pager-wrap-content-width-with-paddings.png",
@@ -19808,6 +19810,8 @@
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-height-with-paddings/firefoxMobile/vertical-pager-wrap-content-height-with-paddings.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-height-with-paddings/firefoxMobile/vertical-pager-wrap-content-height-with-paddings.png",
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-height/chromeMobile/vertical-pager-wrap-content-height.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-height/chromeMobile/vertical-pager-wrap-content-height.png",
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-height/firefoxMobile/vertical-pager-wrap-content-height.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-height/firefoxMobile/vertical-pager-wrap-content-height.png",
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-size-match-parent/chromeMobile/vertical-pager-wrap-content-size-match-parent.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-size-match-parent/chromeMobile/vertical-pager-wrap-content-size-match-parent.png",
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-size-match-parent/firefoxMobile/vertical-pager-wrap-content-size-match-parent.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-size-match-parent/firefoxMobile/vertical-pager-wrap-content-size-match-parent.png",
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-size-mode-alignment-end/chromeMobile/vertical-pager-wrap-content-size-mode-alignment-end.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-size-mode-alignment-end/chromeMobile/vertical-pager-wrap-content-size-mode-alignment-end.png",
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-size-mode-alignment-end/firefoxMobile/vertical-pager-wrap-content-size-mode-alignment-end.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-size-mode-alignment-end/firefoxMobile/vertical-pager-wrap-content-size-mode-alignment-end.png",
"client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-size-mode-alignment-start/chromeMobile/vertical-pager-wrap-content-size-mode-alignment-start.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-size-mode-alignment-start/chromeMobile/vertical-pager-wrap-content-size-mode-alignment-start.png",
client/web/divkit/src/components/pager/Pager.svelte
+30 -8
View File
@@ -109,7 +109,8 @@
let itemSpacing = '0em';
let paddingObj: EdgeInsets = {};
let padding = '';
let sizeVal = '';
let autoSizeVal = '';
let templateSizeVal = '';
let childLayoutParams: LayoutParams = {};
let crossAxisAlignment: 'start' | 'center' | 'end' = 'start';
@@ -361,7 +362,8 @@
padding = edgeInsertsToCss(paddingObj, $direction);
}
$: gridSizeProp = orientation === 'horizontal' ? 'grid-auto-columns' : 'grid-auto-rows';
$: gridAutoSizeProp = orientation === 'horizontal' ? 'grid-auto-columns' : 'grid-auto-rows';
$: gridTemplateSizeProp = orientation === 'horizontal' ? 'grid-template-columns' : 'grid-template-rows';
$: if ($jsonScrollAxisAlignment === 'start' || $jsonScrollAxisAlignment === 'center' || $jsonScrollAxisAlignment === 'end') {
scrollAxisAlignment = $jsonScrollAxisAlignment;
@@ -392,20 +394,39 @@
const neighbourPageWidth = $jsonLayoutMode.neighbour_page_width?.value || 0;
if (scrollAxisAlignment === 'center') {
sizeVal = `calc(100% + ${paddingStart} + ${paddingEnd} - 2 * ${pxToEmWithUnits(neighbourPageWidth)} - 2 * ${itemSpacing})`;
autoSizeVal = `calc(100% + ${paddingStart} + ${paddingEnd} - 2 * ${pxToEmWithUnits(neighbourPageWidth)} - 2 * ${itemSpacing})`;
} else if (scrollAxisAlignment === 'start') {
sizeVal = `calc(100% + ${paddingEnd} - ${pxToEmWithUnits(neighbourPageWidth)} - ${itemSpacing})`;
autoSizeVal = `calc(100% + ${paddingEnd} - ${pxToEmWithUnits(neighbourPageWidth)} - ${itemSpacing})`;
} else {
sizeVal = `calc(100% + ${paddingStart} - ${pxToEmWithUnits(neighbourPageWidth)} - ${itemSpacing})`;
autoSizeVal = `calc(100% + ${paddingStart} - ${pxToEmWithUnits(neighbourPageWidth)} - ${itemSpacing})`;
}
templateSizeVal = '';
} else if ($jsonLayoutMode?.type === 'percentage') {
let pageWidth = $jsonLayoutMode.page_width?.value;
if (typeof pageWidth !== 'number' || pageWidth < 0) {
pageWidth = 100;
}
sizeVal = `calc(${(pageWidth / 100).toFixed(2)} * (100% + ${paddingStart} + ${paddingEnd}))`;
autoSizeVal = `calc(${(pageWidth / 100).toFixed(2)} * (100% + ${paddingStart} + ${paddingEnd}))`;
templateSizeVal = '';
} else if ($jsonLayoutMode?.type === 'wrap_content') {
sizeVal = 'minmax(max-content, auto)';
autoSizeVal = '';
templateSizeVal = visibleItems.map(item => {
const size = item[orientation === 'horizontal' ? 'width' : 'height'];
if (size?.type === 'fixed' || size?.type === 'wrap_content') {
return 'minmax(max-content, auto)';
}
let val = '100%';
if (size?.type === 'match_parent') {
if (isNonNegativeNumber(size.max_size?.value)) {
val = `min(${val}, ${pxToEmWithUnits(size.max_size.value)})`;
}
if (isNonNegativeNumber(size.min_size?.value)) {
val = `max(${val}, ${pxToEmWithUnits(size.min_size.value)})`;
}
}
return val;
}).join(' ');
}
}
@@ -420,7 +441,8 @@
$: style = {
'grid-gap': itemSpacing,
padding,
[gridSizeProp]: sizeVal,
[gridAutoSizeProp]: autoSizeVal,
[gridTemplateSizeProp]: templateSizeVal,
transform: transformStr,
};
client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-match-parent/chromeMobile/horizontal-pager-wrap-content-size-mode-match-parent.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/horizontal-pager-wrap-content-size-mode-match-parent/firefoxMobile/horizontal-pager-wrap-content-size-mode-match-parent.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-size-match-parent/chromeMobile/vertical-pager-wrap-content-size-match-parent.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

client/web/divkit/tests/hermione/screens/crossplatform/components/div-pager/vertical-pager-wrap-content-size-match-parent/firefoxMobile/vertical-pager-wrap-content-size-match-parent.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

test_data/snapshot_test_data/div-pager/horizontal-pager-wrap-content-size-mode-match-parent.json
+2 -1
View File
@@ -1,7 +1,8 @@
{
"description": "Horizontal pager with wrap_content layout mode and children with match_parent width without constraints.",
"platforms": [
"android"
"android",
"web"
],
"templates": {
"text_page": {
test_data/snapshot_test_data/div-pager/vertical-pager-wrap-content-size-match-parent.json
+2 -1
View File
@@ -1,7 +1,8 @@
{
"description": "Vertical pager with wrap_content layout mode and children with match_parent height with constraints.",
"platforms": [
"android"
"android",
"web"
],
"templates": {
"text_page": {