mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-21 16:08:35 +00:00
chore: Exposes CSAs for Container widget (#11229)
* chore: Exposes CSAs for Container widget * Introduces hook to expose variables * Updates hook to expose variable after setting the state * Update frontend/src/AppBuilder/_hooks/useExposeVariables.js Co-authored-by: Kavin Venkatachalam <50441969+kavinvenkatachalam@users.noreply.github.com> * Removes unwanted imports * Exposing CSA to control component actions * Moves CSA's to additional actions section * Fixes wrong handle param --------- Co-authored-by: Kavin Venkatachalam <50441969+kavinvenkatachalam@users.noreply.github.com>
This commit is contained in:
Nithin David Thomas
GitHub
parent
966c208333
commit
aa4cd1fc2e
6 changed files with 206 additions and 64 deletions
|
|
@ -12,6 +12,7 @@ import { shallow } from 'zustand/shallow';
|
|||
|
||||
const SHOW_ADDITIONAL_ACTIONS = [
|
||||
'Text',
|
||||
'Container',
|
||||
'TextInput',
|
||||
'NumberInput',
|
||||
'PasswordInput',
|
||||
|
|
|
|||
|
|
@ -15,6 +15,25 @@ export const containerConfig = {
|
|||
loadingState: {
|
||||
type: 'toggle',
|
||||
displayName: 'Loading state',
|
||||
section: 'additionalActions',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
defaultValue: false,
|
||||
},
|
||||
},
|
||||
visibility: {
|
||||
type: 'toggle',
|
||||
displayName: 'Visibility',
|
||||
section: 'additionalActions',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
disabledState: {
|
||||
type: 'toggle',
|
||||
displayName: 'Disable',
|
||||
section: 'additionalActions',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
defaultValue: false,
|
||||
|
|
@ -50,40 +69,44 @@ export const containerConfig = {
|
|||
defaultValue: '#fff',
|
||||
},
|
||||
},
|
||||
visibility: {
|
||||
type: 'toggle',
|
||||
displayName: 'Visibility',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
disabledState: {
|
||||
type: 'toggle',
|
||||
displayName: 'Disable',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
},
|
||||
defaultValue: false,
|
||||
},
|
||||
},
|
||||
exposedVariables: {},
|
||||
exposedVariables: {
|
||||
isVisible: true,
|
||||
isDisabled: false,
|
||||
isLoading: false,
|
||||
},
|
||||
actions: [
|
||||
{
|
||||
handle: 'setVisibility',
|
||||
displayName: 'Set visibility',
|
||||
params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
|
||||
},
|
||||
{
|
||||
handle: 'setDisable',
|
||||
displayName: 'Set disable',
|
||||
params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
|
||||
},
|
||||
{
|
||||
handle: 'setLoading',
|
||||
displayName: 'Set loading',
|
||||
params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
|
||||
},
|
||||
],
|
||||
definition: {
|
||||
others: {
|
||||
showOnDesktop: { value: '{{true}}' },
|
||||
showOnMobile: { value: '{{false}}' },
|
||||
},
|
||||
properties: {
|
||||
visible: { value: '{{true}}' },
|
||||
loadingState: { value: `{{false}}` },
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
},
|
||||
events: [],
|
||||
styles: {
|
||||
backgroundColor: { value: '#fff' },
|
||||
borderRadius: { value: '4' },
|
||||
borderColor: { value: '#fff' },
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,28 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import { Container as ContainerComponent } from '@/AppBuilder/AppCanvas/Container';
|
||||
import Spinner from '@/_ui/Spinner';
|
||||
import { useExposeState } from '@/AppBuilder/_hooks/useExposeVariables';
|
||||
|
||||
export const Container = ({
|
||||
id,
|
||||
properties,
|
||||
styles,
|
||||
darkMode,
|
||||
height,
|
||||
width,
|
||||
setExposedVariables,
|
||||
setExposedVariable,
|
||||
}) => {
|
||||
const { borderRadius, borderColor, boxShadow } = styles;
|
||||
|
||||
const { isDisabled, isVisible, isLoading } = useExposeState(
|
||||
properties.loadingState,
|
||||
properties.visibility,
|
||||
properties.disabledState,
|
||||
setExposedVariables,
|
||||
setExposedVariable
|
||||
);
|
||||
|
||||
export const Container = ({ id, properties, styles, darkMode, height, width }) => {
|
||||
const { visibility, disabledState, borderRadius, borderColor, boxShadow } = styles;
|
||||
const bgColor = useMemo(() => {
|
||||
return {
|
||||
backgroundColor:
|
||||
|
|
@ -16,19 +35,19 @@ export const Container = ({ id, properties, styles, darkMode, height, width }) =
|
|||
borderRadius: borderRadius ? parseFloat(borderRadius) : 0,
|
||||
border: `1px solid ${borderColor}`,
|
||||
height,
|
||||
display: visibility ? 'flex' : 'none',
|
||||
display: isVisible ? 'flex' : 'none',
|
||||
overflow: 'hidden auto',
|
||||
position: 'relative',
|
||||
boxShadow,
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className={`jet-container ${properties.loadingState && 'jet-container-loading'}`}
|
||||
className={`jet-container ${isLoading && 'jet-container-loading'}`}
|
||||
id={id}
|
||||
data-disabled={disabledState}
|
||||
data-disabled={isDisabled}
|
||||
style={computedStyles}
|
||||
>
|
||||
{properties.loadingState ? (
|
||||
{isLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<ContainerComponent id={id} styles={bgColor} canvasHeight={height} canvasWidth={width} darkMode={darkMode} />
|
||||
|
|
|
|||
51
frontend/src/AppBuilder/_hooks/useExposeVariables.js
Normal file
51
frontend/src/AppBuilder/_hooks/useExposeVariables.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
|
||||
export const useExposeState = (loadingState, visibleState, disabledState, setExposedVariables, setExposedVariable) => {
|
||||
const [isDisabled, setDisable] = useState(disabledState || false);
|
||||
const [isVisible, setVisibility] = useState(visibleState || true);
|
||||
const [isLoading, setLoading] = useState(loadingState || false);
|
||||
|
||||
// Effect to conditionally update state from properties passed to widget
|
||||
useEffect(() => {
|
||||
setDisable(disabledState);
|
||||
}, [disabledState]);
|
||||
|
||||
useEffect(() => {
|
||||
setVisibility(visibleState);
|
||||
}, [visibleState]);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(loadingState);
|
||||
}, [loadingState]);
|
||||
|
||||
// exposed variables with state and async setters, happens on first time load
|
||||
useEffect(() => {
|
||||
setExposedVariables({
|
||||
setDisable: async (value) => setDisable(value),
|
||||
setVisibility: async (value) => setVisibility(value),
|
||||
setLoading: async (value) => setLoading(value),
|
||||
});
|
||||
}, [setExposedVariables]);
|
||||
|
||||
//Side effect to state variables, these will run after the state is set and the values will be exposed
|
||||
useEffect(() => {
|
||||
setExposedVariable('isDisabled', isDisabled);
|
||||
}, [isDisabled, setExposedVariable]);
|
||||
|
||||
useEffect(() => {
|
||||
setExposedVariable('isVisible', isVisible);
|
||||
}, [isVisible, setExposedVariable]);
|
||||
|
||||
useEffect(() => {
|
||||
setExposedVariable('isLoading', isLoading);
|
||||
}, [isLoading, setExposedVariable]);
|
||||
|
||||
return {
|
||||
isDisabled,
|
||||
setDisable,
|
||||
isVisible,
|
||||
setVisibility,
|
||||
isLoading,
|
||||
setLoading,
|
||||
};
|
||||
};
|
||||
|
|
@ -15,6 +15,25 @@ export const containerConfig = {
|
|||
loadingState: {
|
||||
type: 'toggle',
|
||||
displayName: 'Loading state',
|
||||
section: 'additionalActions',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
defaultValue: false,
|
||||
},
|
||||
},
|
||||
visibility: {
|
||||
type: 'toggle',
|
||||
displayName: 'Visibility',
|
||||
section: 'additionalActions',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
disabledState: {
|
||||
type: 'toggle',
|
||||
section: 'additionalActions',
|
||||
displayName: 'Disable',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
defaultValue: false,
|
||||
|
|
@ -50,32 +69,38 @@ export const containerConfig = {
|
|||
defaultValue: '#fff',
|
||||
},
|
||||
},
|
||||
visibility: {
|
||||
type: 'toggle',
|
||||
displayName: 'Visibility',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
disabledState: {
|
||||
type: 'toggle',
|
||||
displayName: 'Disable',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
},
|
||||
defaultValue: false,
|
||||
},
|
||||
},
|
||||
exposedVariables: {},
|
||||
exposedVariables: {
|
||||
isVisible: true,
|
||||
isDisabled: false,
|
||||
isLoading: false,
|
||||
},
|
||||
actions: [
|
||||
{
|
||||
handle: 'setVisibility',
|
||||
displayName: 'Set visibility',
|
||||
params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
|
||||
},
|
||||
{
|
||||
handle: 'setLoading',
|
||||
displayName: 'Set disable',
|
||||
params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
|
||||
},
|
||||
{
|
||||
handle: 'setLoading',
|
||||
displayName: 'Set loading',
|
||||
params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
|
||||
},
|
||||
],
|
||||
definition: {
|
||||
others: {
|
||||
showOnDesktop: { value: '{{true}}' },
|
||||
showOnMobile: { value: '{{false}}' },
|
||||
},
|
||||
properties: {
|
||||
visible: { value: '{{true}}' },
|
||||
loadingState: { value: `{{false}}` },
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
},
|
||||
events: [],
|
||||
styles: {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,25 @@ export const containerConfig = {
|
|||
loadingState: {
|
||||
type: 'toggle',
|
||||
displayName: 'Loading state',
|
||||
section: 'additionalActions',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
defaultValue: false,
|
||||
},
|
||||
},
|
||||
visibility: {
|
||||
type: 'toggle',
|
||||
displayName: 'Visibility',
|
||||
section: 'additionalActions',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
disabledState: {
|
||||
type: 'toggle',
|
||||
displayName: 'Disable',
|
||||
section: 'additionalActions',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
defaultValue: false,
|
||||
|
|
@ -50,40 +69,44 @@ export const containerConfig = {
|
|||
defaultValue: '#fff',
|
||||
},
|
||||
},
|
||||
visibility: {
|
||||
type: 'toggle',
|
||||
displayName: 'Visibility',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
disabledState: {
|
||||
type: 'toggle',
|
||||
displayName: 'Disable',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
},
|
||||
defaultValue: false,
|
||||
},
|
||||
},
|
||||
exposedVariables: {},
|
||||
exposedVariables: {
|
||||
isVisible: true,
|
||||
isDisabled: false,
|
||||
isLoading: false,
|
||||
},
|
||||
actions: [
|
||||
{
|
||||
handle: 'setVisibility',
|
||||
displayName: 'Set visibility',
|
||||
params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
|
||||
},
|
||||
{
|
||||
handle: 'setDisable',
|
||||
displayName: 'Set disable',
|
||||
params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
|
||||
},
|
||||
{
|
||||
handle: 'setLoading',
|
||||
displayName: 'Set loading',
|
||||
params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
|
||||
},
|
||||
],
|
||||
definition: {
|
||||
others: {
|
||||
showOnDesktop: { value: '{{true}}' },
|
||||
showOnMobile: { value: '{{false}}' },
|
||||
},
|
||||
properties: {
|
||||
visible: { value: '{{true}}' },
|
||||
loadingState: { value: `{{false}}` },
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
},
|
||||
events: [],
|
||||
styles: {
|
||||
backgroundColor: { value: '#fff' },
|
||||
borderRadius: { value: '4' },
|
||||
borderColor: { value: '#fff' },
|
||||
visibility: { value: '{{true}}' },
|
||||
disabledState: { value: '{{false}}' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue