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

[improvement] Widget components #1475 - image widget (#1487)

Browse source 
* new implementation/image

* Revert "new implementation/image"

This reverts commit 637bd83108.

* new implementation/image
This commit is contained in:
Arpit 2021-12-14 16:46:52 +05:30 committed by GitHub
parent c550836497
commit 8fa30f5612
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,41 +1,18 @@
import React from 'react';
import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
import LazyLoad from 'react-lazyload';
export const Image = function Image({ id, height, component, onComponentClick, currentState }) {
const source = component.definition.properties.source.value;
const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
const disabledState = component.definition.styles?.disabledState?.value ?? false;
const parsedDisabledState =
typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
let data = resolveReferences(source, currentState, null);
let parsedWidgetVisibility = widgetVisibility;
try {
parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []);
} catch (err) {
console.log(err);
}
if (data === '') data = null;
export const Image = function Image({ height, properties, styles }) {
const source = properties.source;
const widgetVisibility = styles.visibility ?? true;
function Placeholder() {
return <div className="skeleton-image" style={{ objectFit: 'contain', height }}></div>;
}
return (
<div
data-disabled={parsedDisabledState}
style={{ display: parsedWidgetVisibility ? '' : 'none' }}
onClick={(event) => {
event.stopPropagation();
onComponentClick(id, component, event);
}}
>
<div data-disabled={styles.disabledState} style={{ display: widgetVisibility ? '' : 'none' }}>
<LazyLoad height={height} placeholder={<Placeholder />} debounce={500}>
<img style={{ objectFit: 'contain' }} src={data} height={height} />
<img src={source} height={height} />
</LazyLoad>
</div>
);