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

Fix visibility off using CSA, widget height not updating

Browse source
This commit is contained in:
Nakul Nagargade 2025-03-17 12:12:05 +05:30
parent 54afb15fb6
commit 9f3750eb2e
5 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
View file

@ -45,7 +45,6 @@ export const ConfigHandle = ({
);
}, shallow);
let height = visibility === false ? 10 : widgetHeight;
return (
<div
className={`config-handle ${customClassName}`}
@ -57,7 +56,7 @@ export const ConfigHandle = ({
: position === 'top'
? '-20px'
: `${height - (CONFIG_HANDLE_HEIGHT + BUFFER_HEIGHT)}px`,
visibility: _showHandle ? 'visible' : 'hidden',
visibility: _showHandle || visibility === false ? 'visible' : 'hidden',
left: '-1px',
}}
onClick={(e) => {

3
frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
View file

@ -65,6 +65,7 @@ export default function Grid({ gridWidth, currentLayout }) {
const prevDragParentId = useRef(null);
const newDragParentId = useRef(null);
const [isGroupDragging, setIsGroupDragging] = useState(false);
const checkIfAnyWidgetVisibilityChanged = useStore((state) => state.checkIfAnyWidgetVisibilityChanged(), shallow);
useEffect(() => {
const selectedSet = new Set(selectedComponents);
@ -316,7 +317,7 @@ export default function Grid({ gridWidth, currentLayout }) {
useEffect(() => {
reloadGrid();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedComponents, openModalWidgetId, boxList, currentLayout]);
}, [selectedComponents, openModalWidgetId, boxList, currentLayout, checkIfAnyWidgetVisibilityChanged]);
const updateNewPosition = (events, parent = null) => {
const posWithParent = {

8
frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
View file

@ -37,6 +37,8 @@ const WidgetWrapper = memo(
});
const visibility = useStore((state) => {
const component = state.getResolvedComponent(id, subContainerIndex);
const componentExposedVisibility = state.getExposedValueOfComponent(id)?.isVisible;
if (componentExposedVisibility === false) return false;
if (component?.properties?.visibility === false || component?.styles?.visibility === false) return false;
return true;
});
@ -60,9 +62,9 @@ const WidgetWrapper = memo(
<>
<div
className={cx(`moveable-box ele-${id}`, {
[`target widget-target target1 moveable-box widget-${id}`]: !readOnly,
[`widget-${id} nested-target`]: id !== 'canvas' && !readOnly,
'position-absolute': readOnly,
[`target widget-target target1 moveable-box widget-${id}`]: !readOnly && visibility !== false,
[`widget-${id} nested-target`]: id !== 'canvas' && !readOnly && visibility !== false,
'position-absolute': readOnly || visibility === false,
'active-target': isWidgetActive,
'opacity-0': isDragging || isResizing,
})}

2
frontend/src/AppBuilder/AppCanvas/selecto.scss
View file

@ -1,5 +1,5 @@
.active-target {
outline: 1px solid #4af;
outline: 1px solid #4af !important;
}
.main-editor-canvas .widget-target:not(:has(.widget-target:hover)):hover {

16
frontend/src/AppBuilder/_stores/slices/gridSlice.js
View file

@ -73,4 +73,20 @@ export const createGridSlice = (set, get) => ({
setLastCanvasClickPosition: (position) => {
set({ lastCanvasClickPosition: position });
},
checkIfAnyWidgetVisibilityChanged: () => {
// This is required to reload the grid if visibility is turned off using CSA
const { getExposedValueOfComponent, getCurrentPageComponents } = get();
const currentPageComponents = getCurrentPageComponents();
const visibilityState = {};
Object.keys(currentPageComponents).forEach((componentId) => {
const componentExposedVisibility = getExposedValueOfComponent(componentId)?.isVisible;
// Determine if component is visible
visibilityState[componentId] = !(componentExposedVisibility === false);
});
return visibilityState;
},
});