From c9ee4655072e095bf305e5d97efb69e55256f612 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 15 Jul 2022 13:47:39 +0100 Subject: [PATCH] Replace incorrect usages of element.childNodes with element.children --- .../_components/navigation/DNDPositionIndicator.svelte | 2 +- packages/client/src/components/Component.svelte | 2 +- packages/client/src/components/preview/DNDHandler.svelte | 4 ++-- packages/client/src/components/preview/IndicatorSet.svelte | 3 +-- packages/client/src/components/preview/SettingsBar.svelte | 2 +- 5 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte index c01bcaf36f..4612440a2c 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte @@ -16,7 +16,7 @@ // Get root li element const el = document.getElementById(`component-${component?._id}`) // Get inner nav item content element - const child = el?.childNodes[0]?.childNodes[0] + const child = el?.children[0]?.children[0] if (!el) { return } diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index 808bfdae07..08407e008e 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -399,7 +399,7 @@ } const scrollIntoView = () => { - const node = document.getElementsByClassName(id)?.[0]?.childNodes[0] + const node = document.getElementsByClassName(id)?.[0]?.children[0] if (!node) { return } diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte index 6c1922ecff..c37eb93afa 100644 --- a/packages/client/src/components/preview/DNDHandler.svelte +++ b/packages/client/src/components/preview/DNDHandler.svelte @@ -35,8 +35,8 @@ const getDOMNodeForComponent = component => { const parent = component.closest(".component") - const children = Array.from(parent.childNodes) - return children?.find(node => node?.nodeType === 1) + const children = Array.from(parent.children) + return children[0] } // Callback when initially starting a drag on a draggable component diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte index b9113f9532..bbd03aa974 100644 --- a/packages/client/src/components/preview/IndicatorSet.svelte +++ b/packages/client/src/components/preview/IndicatorSet.svelte @@ -71,8 +71,7 @@ // Extract valid children // Sanity limit of 100 active indicators const children = Array.from(parents) - .map(parent => parent?.childNodes?.[0]) - .filter(node => node?.nodeType === 1) + .map(parent => parent?.children?.[0]) .slice(0, 100) // If there aren't any nodes then reset diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte index bc227c87d9..5ea9b2339f 100644 --- a/packages/client/src/components/preview/SettingsBar.svelte +++ b/packages/client/src/components/preview/SettingsBar.svelte @@ -37,7 +37,7 @@ } const id = $builderStore.selectedComponentId const parent = document.getElementsByClassName(id)?.[0] - const element = parent?.childNodes?.[0] + const element = parent?.children?.[0] // The settings bar is higher in the dom tree than the selection indicators // as we want to be able to render the settings bar wider than the screen,