From 9e009a9a0022c357d73207857c813afafb36bc4d Mon Sep 17 00:00:00 2001 From: Huy Kon Date: Thu, 15 Dec 2022 09:19:55 +0700 Subject: [PATCH 1/2] fix: Homepage slider creates unexpected GET-requests --- .../Banner/__tests__/__snapshots__/banner.spec.js.snap | 2 +- packages/pagebuilder/lib/ContentTypes/Banner/banner.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/pagebuilder/lib/ContentTypes/Banner/__tests__/__snapshots__/banner.spec.js.snap b/packages/pagebuilder/lib/ContentTypes/Banner/__tests__/__snapshots__/banner.spec.js.snap index 783a660b8d..8130ae7ff7 100644 --- a/packages/pagebuilder/lib/ContentTypes/Banner/__tests__/__snapshots__/banner.spec.js.snap +++ b/packages/pagebuilder/lib/ContentTypes/Banner/__tests__/__snapshots__/banner.spec.js.snap @@ -305,7 +305,7 @@ exports[`renders a configured collage-left Banner component on mobile 1`] = ` Object { "backgroundAttachment": "scroll", "backgroundColor": "blue", - "backgroundImage": "url(null)", + "backgroundImage": "url()", "backgroundPosition": "center center", "backgroundRepeat": "no-repeat", "backgroundSize": "cover", diff --git a/packages/pagebuilder/lib/ContentTypes/Banner/banner.js b/packages/pagebuilder/lib/ContentTypes/Banner/banner.js index 10c3e1df32..dd04383629 100644 --- a/packages/pagebuilder/lib/ContentTypes/Banner/banner.js +++ b/packages/pagebuilder/lib/ContentTypes/Banner/banner.js @@ -31,7 +31,7 @@ const Banner = props => { const viewportElement = useRef(null); const classes = useStyle(defaultClasses, props.classes); const [hovered, setHovered] = useState(false); - const [bgImageStyle, setBgImageStyle] = useState(null); + const [bgImageStyle, setBgImageStyle] = useState(''); const toggleHover = () => setHovered(!hovered); const intersectionObserver = useIntersectionObserver(); const { From 4a8ed624de1fe4c7780a246ac1e763c5c8607f5b Mon Sep 17 00:00:00 2001 From: Huy Kon Date: Thu, 15 Dec 2022 15:38:59 +0700 Subject: [PATCH 2/2] fix: only query background image when have value --- .../Banner/__tests__/__snapshots__/banner.spec.js.snap | 5 ----- packages/pagebuilder/lib/ContentTypes/Banner/banner.js | 4 ++-- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/pagebuilder/lib/ContentTypes/Banner/__tests__/__snapshots__/banner.spec.js.snap b/packages/pagebuilder/lib/ContentTypes/Banner/__tests__/__snapshots__/banner.spec.js.snap index 8130ae7ff7..82959b3b76 100644 --- a/packages/pagebuilder/lib/ContentTypes/Banner/__tests__/__snapshots__/banner.spec.js.snap +++ b/packages/pagebuilder/lib/ContentTypes/Banner/__tests__/__snapshots__/banner.spec.js.snap @@ -303,12 +303,7 @@ exports[`renders a configured collage-left Banner component on mobile 1`] = ` className="wrapper" style={ Object { - "backgroundAttachment": "scroll", "backgroundColor": "blue", - "backgroundImage": "url()", - "backgroundPosition": "center center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "cover", "border": "solid", "borderColor": "rgb(0,0,0)", "borderRadius": "15px", diff --git a/packages/pagebuilder/lib/ContentTypes/Banner/banner.js b/packages/pagebuilder/lib/ContentTypes/Banner/banner.js index dd04383629..192bfa076b 100644 --- a/packages/pagebuilder/lib/ContentTypes/Banner/banner.js +++ b/packages/pagebuilder/lib/ContentTypes/Banner/banner.js @@ -31,7 +31,7 @@ const Banner = props => { const viewportElement = useRef(null); const classes = useStyle(defaultClasses, props.classes); const [hovered, setHovered] = useState(false); - const [bgImageStyle, setBgImageStyle] = useState(''); + const [bgImageStyle, setBgImageStyle] = useState(null); const toggleHover = () => setHovered(!hovered); const intersectionObserver = useIntersectionObserver(); const { @@ -160,7 +160,7 @@ const Banner = props => { ]); /* eslint-enable react-hooks/exhaustive-deps */ - if (image) { + if (image && bgImageStyle) { wrapperStyles.backgroundImage = `url(${bgImageStyle})`; wrapperStyles.backgroundSize = backgroundSize; wrapperStyles.backgroundPosition = backgroundPosition;