From 923eec3f0a9bfc0c63caeeb705e32665043d4414 Mon Sep 17 00:00:00 2001 From: 4eb0da <4eb0da@yandex-team.com> Date: Tue, 12 Dec 2023 18:24:44 +0300 Subject: [PATCH] Allow empty grid / pager / gallery --- .../src/components/gallery/Gallery.svelte | 152 ++++++++---------- .../divkit/src/components/grid/Grid.svelte | 16 +- .../src/components/indicator/Indicator.svelte | 15 +- .../divkit/src/components/pager/Pager.svelte | 15 +- 4 files changed, 83 insertions(+), 115 deletions(-) diff --git a/client/web/divkit/src/components/gallery/Gallery.svelte b/client/web/divkit/src/components/gallery/Gallery.svelte index 16d9bdd79..e12b65246 100644 --- a/client/web/divkit/src/components/gallery/Gallery.svelte +++ b/client/web/divkit/src/components/gallery/Gallery.svelte @@ -51,7 +51,6 @@ const rightClass = rootCtx.getCustomization('galleryRightClass'); let prevId: string | undefined; - let hasError = false; let columns = 1; let orientation: Orientation = 'horizontal'; let align: Align = 'start'; @@ -75,7 +74,7 @@ padding = ''; } - $: jsonItems = json.items; + $: jsonItems = Array.isArray(json.items) && json.items || []; $: jsonColumnCount = rootCtx.getDerivedFromVars(json.column_count); $: jsonOrientation = rootCtx.getDerivedFromVars(json.orientation); @@ -88,15 +87,6 @@ $: jsonScrollbar = rootCtx.getDerivedFromVars(json.scrollbar); $: jsonDefaultItem = rootCtx.getDerivedFromVars(json.default_item); - $: { - if (!jsonItems?.length || !Array.isArray(jsonItems)) { - hasError = true; - rootCtx.logError(wrapError(new Error('Incorrect or empty "items" prop for div "gallery"'))); - } else { - hasError = false; - } - } - function replaceItems(items: (DivBaseData | undefined)[]): void { json = { ...json, @@ -112,7 +102,7 @@ origJson: DivBaseData; } - $: items = (!hasError && jsonItems || []).map(item => { + $: items = jsonItems.map(item => { let childJson: DivBaseData = item as DivBaseData; let childContext: TemplateContext = templateContext; @@ -128,7 +118,7 @@ }; }); - $: shouldCheckArrows = $isDesktop && mounted && !hasError; + $: shouldCheckArrows = $isDesktop && mounted; $: if (shouldCheckArrows) { if (typeof ResizeObserver !== 'undefined') { // Gallery can contain a dynamic content (e.g. loading images with auto-size) @@ -265,7 +255,7 @@ } function updateArrowsVisibility(): void { - if (!scroller || hasError) { + if (!scroller) { return; } @@ -377,7 +367,7 @@ prevId = undefined; } - if (json.id && !hasError && !layoutParams?.fakeElement) { + if (json.id && !layoutParams?.fakeElement) { prevId = json.id; rootCtx.registerInstance(json.id, { setCurrentItem(item: number) { @@ -428,13 +418,11 @@ onMount(() => { mounted = true; - if (!hasError) { - updateArrowsVisibility(); + updateArrowsVisibility(); - if (defaultItem) { - const galleryElements = getItems(); - scrollToGalleryItem(galleryElements, defaultItem, 'auto'); - } + if (defaultItem) { + const galleryElements = getItems(); + scrollToGalleryItem(galleryElements, defaultItem, 'auto'); } }); @@ -450,70 +438,68 @@ -{#if !hasError} - +
-
- {#each itemsGrid as itemsRow, rowIndex} -
- {#each itemsRow as item} - - {/each} -
- {/each} -
+ {#each itemsGrid as itemsRow, rowIndex} +
+ {#each itemsRow as item} + + {/each} +
+ {/each}
- {#if orientation === 'horizontal'} - {#if hasScrollLeft && shouldCheckArrows} - - -
scroll('left')}> - {#if !leftClass} - - - - {/if} -
- {/if} - {#if hasScrollRight && shouldCheckArrows} - - -
scroll('right')}> - {#if !rightClass} - - - - {/if} -
- {/if} +
+ {#if orientation === 'horizontal'} + {#if hasScrollLeft && shouldCheckArrows} + + +
scroll('left')}> + {#if !leftClass} + + + + {/if} +
{/if} - -{/if} + {#if hasScrollRight && shouldCheckArrows} + + +
scroll('right')}> + {#if !rightClass} + + + + {/if} +
+ {/if} + {/if} + diff --git a/client/web/divkit/src/components/grid/Grid.svelte b/client/web/divkit/src/components/grid/Grid.svelte index e887c9e62..695be5470 100644 --- a/client/web/divkit/src/components/grid/Grid.svelte +++ b/client/web/divkit/src/components/grid/Grid.svelte @@ -29,7 +29,6 @@ const rootCtx = getContext(ROOT_CTX); - let hasItemsError = false; let columnCount = 1; let childStore: Readable; let resultItems: { @@ -53,26 +52,17 @@ contentHAlign = 'left'; } - $: jsonItems = json.items; + $: jsonItems = Array.isArray(json.items) && json.items || []; $: jsonColumnCount = rootCtx.getDerivedFromVars(json.column_count); $: jsonContentVAlign = rootCtx.getDerivedFromVars(json.content_alignment_vertical); $: jsonContentHAlign = rootCtx.getDerivedFromVars(json.content_alignment_horizontal); - $: { - if (!jsonItems?.length || !Array.isArray(jsonItems)) { - hasItemsError = true; - rootCtx.logError(wrapError(new Error('Incorrect or empty "items" prop for div "grid"'))); - } else { - hasItemsError = false; - } - } - $: { columnCount = correctPositiveNumber($jsonColumnCount, columnCount); } - $: items = (!hasItemsError && jsonItems || []).map(item => { + $: items = jsonItems.map(item => { let childJson: DivBaseData = item as DivBaseData; let childContext: TemplateContext = templateContext; @@ -232,7 +222,7 @@ 'grid-template-rows': gridCalcTemplates(rowsWeight, rowsMinHeight, rowCount) }; - $: hasError = hasItemsError || hasLayoutError; + $: hasError = hasLayoutError; {#if !hasError} diff --git a/client/web/divkit/src/components/indicator/Indicator.svelte b/client/web/divkit/src/components/indicator/Indicator.svelte index c2c5102e5..b9ab937ce 100644 --- a/client/web/divkit/src/components/indicator/Indicator.svelte +++ b/client/web/divkit/src/components/indicator/Indicator.svelte @@ -149,13 +149,16 @@ if (indicatorItemsWrapper) { // if not destroyed yet - const currentItemOffsetLeft = - (indicatorItemsWrapper.children[pagerData.currentItem] as HTMLElement).offsetLeft; + const elem = indicatorItemsWrapper.children[pagerData.currentItem] as HTMLElement; - scroller.scroll({ - left: currentItemOffsetLeft - scroller.clientWidth / 2, - behavior: 'smooth' - }); + if (elem) { + const currentItemOffsetLeft = elem.offsetLeft; + + scroller.scroll({ + left: currentItemOffsetLeft - scroller.clientWidth / 2, + behavior: 'smooth' + }); + } } } } diff --git a/client/web/divkit/src/components/pager/Pager.svelte b/client/web/divkit/src/components/pager/Pager.svelte index b5756468d..995da5e92 100644 --- a/client/web/divkit/src/components/pager/Pager.svelte +++ b/client/web/divkit/src/components/pager/Pager.svelte @@ -46,8 +46,6 @@ let pagerItemsWrapper: HTMLElement; let mounted = false; - let hasItemsError = false; - let currentItem = 0; let prevSelectedItem = 0; @@ -70,15 +68,6 @@ $: jsonPaddings = rootCtx.getDerivedFromVars(json.paddings); $: jsonRestrictParentScroll = rootCtx.getDerivedFromVars(json.restrict_parent_scroll); - $: { - if (!json.items?.length || !Array.isArray(json.items)) { - hasItemsError = true; - rootCtx.logError(wrapError(new Error('Incorrect or empty "items" prop for div "pager"'))); - } else { - hasItemsError = false; - } - } - function replaceItems(items: (DivBaseData | undefined)[]): void { json = { ...json, @@ -86,7 +75,7 @@ }; } - $: items = (!hasItemsError && json.items || []).map(item => { + $: items = (Array.isArray(json.items) && json.items || []).map(item => { let childJson: DivBaseData = item as DivBaseData; let childContext: TemplateContext = templateContext; @@ -155,7 +144,7 @@ orientation }; - $: hasError = hasItemsError || hasLayoutModeError; + $: hasError = hasLayoutModeError; $: shouldCheckArrows = $isDesktop && mounted && !hasError;