From c8d09c1402545bcb7eeabe789cf6ba70c2a8c84d Mon Sep 17 00:00:00 2001 From: Mykola Kapravczuk Date: Mon, 13 Feb 2023 17:23:39 +0100 Subject: [PATCH 1/5] fix: RLL-000: fix lazy loading in iframe --- src/LazyLoad.tsx | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/src/LazyLoad.tsx b/src/LazyLoad.tsx index 1ec3488..badc6e0 100644 --- a/src/LazyLoad.tsx +++ b/src/LazyLoad.tsx @@ -61,9 +61,8 @@ export default class LazyLoad extends Component { this.elementObserver = new IntersectionObserver(this.lazyLoadHandler, options); - const node = this.wrapper?.current; - - if (node instanceof HTMLElement) { + const node = this.getRefElement(); + if (node) { this.elementObserver.observe(node); } } @@ -73,8 +72,8 @@ export default class LazyLoad extends Component { } componentWillUnmount() { - const node = this.wrapper?.current; - if (node && node instanceof HTMLElement) { + const node = this.getRefElement(); + if (node) { this.elementObserver?.unobserve(node); } } @@ -83,6 +82,19 @@ export default class LazyLoad extends Component { return scrollParent(this.wrapper?.current); } + getRefElement(): HTMLElement | null { + const node = this.wrapper?.current as HTMLElement | null; + const { elementType } = this.props; + const toStringExpected = `[object html${elementType}element]`; + const toStringActual = Object.prototype.toString.call(node).toLocaleLowerCase(); + + if (toStringExpected === toStringActual) { + return node as HTMLElement; + } + + return null; + } + lazyLoadHandler = (entries: IntersectionObserverEntry[]) => { const { onContentVisible } = this.props; const [entry] = entries; @@ -96,8 +108,8 @@ export default class LazyLoad extends Component { }); // Stop observing - const node = this.wrapper?.current; - if (node && node instanceof HTMLElement) { + const node = this.getRefElement(); + if (node) { this.elementObserver?.unobserve(node); } } From 9ba60c55053817ea1df37ff62a1dfcda0c2d90d4 Mon Sep 17 00:00:00 2001 From: Mykola Kapravczuk Date: Mon, 13 Feb 2023 17:36:12 +0100 Subject: [PATCH 2/5] fix: RLL-000: fix lazy loading in iframe --- src/LazyLoad.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/LazyLoad.tsx b/src/LazyLoad.tsx index badc6e0..28b9576 100644 --- a/src/LazyLoad.tsx +++ b/src/LazyLoad.tsx @@ -79,7 +79,7 @@ export default class LazyLoad extends Component { } getEventNode() { - return scrollParent(this.wrapper?.current); + return scrollParent(this.getRefElement()); } getRefElement(): HTMLElement | null { From 62193a73518305b7c89b830990e8cfa9645cd15f Mon Sep 17 00:00:00 2001 From: Mykola Kapravczuk Date: Mon, 13 Feb 2023 17:38:59 +0100 Subject: [PATCH 3/5] fix: RLL-000: fix lazy loading in iframe --- src/utils/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/index.js b/src/utils/index.js index 5c624a2..f47fed1 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -5,7 +5,7 @@ const style = (element, prop) => (typeof getComputedStyle !== 'undefined' const overflow = element => style(element, 'overflow') + style(element, 'overflow-y') + style(element, 'overflow-x'); export default element => { - if (!(element instanceof HTMLElement)) { + if (!element) { return window; } From 9d7da6d7aaecfab34d4051708327924aba54f279 Mon Sep 17 00:00:00 2001 From: Mykola Kapravczuk Date: Tue, 14 Feb 2023 10:47:39 +0100 Subject: [PATCH 4/5] fix: RLL-000: refactoring --- src/LazyLoad.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/LazyLoad.tsx b/src/LazyLoad.tsx index 28b9576..edcee4b 100644 --- a/src/LazyLoad.tsx +++ b/src/LazyLoad.tsx @@ -62,6 +62,7 @@ export default class LazyLoad extends Component { this.elementObserver = new IntersectionObserver(this.lazyLoadHandler, options); const node = this.getRefElement(); + if (node) { this.elementObserver.observe(node); } @@ -84,11 +85,10 @@ export default class LazyLoad extends Component { getRefElement(): HTMLElement | null { const node = this.wrapper?.current as HTMLElement | null; - const { elementType } = this.props; - const toStringExpected = `[object html${elementType}element]`; - const toStringActual = Object.prototype.toString.call(node).toLocaleLowerCase(); + const regExp = /\[object HTML.*?Element\]/i; + const nodeToString = Object.prototype.toString.call(node); - if (toStringExpected === toStringActual) { + if (regExp.test(nodeToString)) { return node as HTMLElement; } From c6cc95b1186af5011c9b120d7e5a68d27f83507f Mon Sep 17 00:00:00 2001 From: Mykola Kapravczuk Date: Tue, 14 Feb 2023 17:13:16 +0100 Subject: [PATCH 5/5] fix: RLL-000: refactoring --- src/LazyLoad.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/LazyLoad.tsx b/src/LazyLoad.tsx index edcee4b..30d2184 100644 --- a/src/LazyLoad.tsx +++ b/src/LazyLoad.tsx @@ -85,7 +85,7 @@ export default class LazyLoad extends Component { getRefElement(): HTMLElement | null { const node = this.wrapper?.current as HTMLElement | null; - const regExp = /\[object HTML.*?Element\]/i; + const regExp = /\[object HTML[\S]*Element\]/i; const nodeToString = Object.prototype.toString.call(node); if (regExp.test(nodeToString)) {