Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[improvement] Widget components #1475 - container widget (#1488)

Browse source 
* new implementation/image

* Revert "new implementation/image"

This reverts commit 637bd83108.

* new implementation/container-widget

* resolved

Co-authored-by: Sherfin Shamsudeen <sherfin94@gmail.com>
This commit is contained in:
Arpit 2021-12-14 16:49:12 +05:30 committed by GitHub
parent 9505589e6e
commit 119275f9ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
frontend/src/Editor/Components/Container.jsx
View file

@ -1,49 +1,20 @@
import React, { useRef } from 'react';
import { SubCustomDragLayer } from '../SubCustomDragLayer';
import { SubContainer } from '../SubContainer';
import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
export const Container = function Container({
id,
component,
width,
height,
containerProps,
currentState,
removeComponent,
}) {
const backgroundColor = component.definition.styles.backgroundColor.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 parsedWidgetVisibility = widgetVisibility;
try {
parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []);
} catch (err) {
console.log(err);
}
export const Container = function Container({ id, width, height, containerProps, removeComponent, styles }) {
const { backgroundColor, visibility, disabledState } = styles;
const computedStyles = {
backgroundColor,
height,
display: parsedWidgetVisibility ? 'flex' : 'none',
display: visibility ? 'flex' : 'none',
};
const parentRef = useRef(null);
return (
<div
data-disabled={parsedDisabledState}
className="jet-container"
id={id}
ref={parentRef}
onClick={() => containerProps.onComponentClick(id, component)}
style={computedStyles}
>
<div data-disabled={disabledState} className="jet-container" id={id} ref={parentRef} style={computedStyles}>
<SubContainer
containerCanvasWidth={width}
parent={id}