Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 17:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Avoid lazyload if widget has parent (#4911)

Browse source
This commit is contained in:
Kavin Venkatachalam 2022-12-07 16:15:57 +05:30 committed by GitHub
parent 21177d1317
commit 8d03c93e17
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 56 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
frontend/src/Editor/Components/Image.jsx
View file

@ -3,7 +3,7 @@ import React, { useRef, useEffect, useState } from 'react';
import LazyLoad, { forceCheck } from 'react-lazyload';
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
export const Image = function Image({ component, height, properties, styles, fireEvent, width }) {
export const Image = function Image({ component, height, properties, styles, fireEvent, width, parentId = null }) {
const { source, loadingState, alternativeText, zoomButtons, rotateButton } = properties;
const { visibility, disabledState, borderType, backgroundColor, padding, imageFit } = styles;
const {
@ -20,7 +20,9 @@ export const Image = function Image({ component, height, properties, styles, fir
return <div className="skeleton-image" style={{ objectFit: 'contain', height }}></div>;
}
useEffect(() => {
setImageOffset(computeOffset());
if (parentId === null) {
setImageOffset(computeOffset());
}
}, [imageRef]);
useEffect(() => {
@ -68,6 +70,53 @@ export const Image = function Image({ component, height, properties, styles, fir
resetTransform();
};
const renderImageContainer = () => {
return (
<>
{loadingState === true ? (
<center>
<div className="spinner-border " role="status"></div>
</center>
) : zoomButtons ? (
<TransformWrapper>
{({ zoomIn, zoomOut, resetTransform }) => (
<>
{zoomReset && resetZoom(resetTransform)}
<TransformComponent>{renderImage()}</TransformComponent>
{zoomButtons && (
<div className="zoom-button-wrapper">
{rotateButton && (
<button className="btn zoom-buttons" onClick={rotateImage}>
<span>↻</span>
</button>
)}
<button className="btn zoom-buttons" onClick={() => zoomIn()}>
+
</button>
<button className="btn zoom-buttons" onClick={() => zoomOut()}>
-
</button>
</div>
)}
</>
)}
</TransformWrapper>
) : (
<>
{rotateButton && (
<div className="zoom-button-wrapper" style={{ zIndex: 1 }}>
<button className="btn zoom-buttons" onClick={rotateImage}>
<span>↻</span>
</button>
</div>
)}
{renderImage()}
</>
)}
</>
);
};
return (
<div
data-disabled={disabledState}
@ -79,56 +128,18 @@ export const Image = function Image({ component, height, properties, styles, fir
ref={imageRef}
className="image-widget-wrapper"
>
{imageRef.current && (
{imageRef.current && parentId === null ? (
<LazyLoad
offset={imageOffset > 0 ? imageOffset : 0}
height={height}
placeholder={<Placeholder />}
debounce={500}
scrollContainer={'.canvas-container'}
>
{loadingState === true ? (
<center>
<div className="spinner-border " role="status"></div>
</center>
) : zoomButtons ? (
<>
<TransformWrapper>
{({ zoomIn, zoomOut, resetTransform }) => (
<>
{zoomReset && resetZoom(resetTransform)}
<TransformComponent>{renderImage()}</TransformComponent>
{zoomButtons && (
<div className="zoom-button-wrapper">
{rotateButton && (
<button className="btn zoom-buttons" onClick={rotateImage}>
<span>↻</span>
</button>
)}
<button className="btn zoom-buttons" onClick={() => zoomIn()}>
+
</button>
<button className="btn zoom-buttons" onClick={() => zoomOut()}>
-
</button>
</div>
)}
</>
)}
</TransformWrapper>
</>
) : (
<>
{rotateButton && (
<div className="zoom-button-wrapper" style={{ zIndex: 1 }}>
<button className="btn zoom-buttons" onClick={rotateImage}>
<span>↻</span>
</button>
</div>
)}
{renderImage()}
</>
)}
{renderImageContainer()}
</LazyLoad>
) : (
imageRef.current && renderImageContainer()
)}
</div>
);