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

Fix header resizer not coming up on Container, form and modal

Browse source
This commit is contained in:
Nakul Nagargade 2025-07-02 12:23:49 +05:30 committed by Nithin David Thomas
parent 95866aed82
commit d84ba96bc3
7 changed files with 8 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/AppBuilder/Widgets/Container/Container.jsx
View file

@ -33,7 +33,6 @@ export const Container = ({
setExposedVariables,
setExposedVariable
);
const { dynamicHeight } = properties;
useDynamicHeight({
@ -51,10 +50,8 @@ export const Container = ({
shallow
);
const isEditing = useStore((state) => state.currentMode === 'edit');
const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
const activeSlot = useActiveSlot(id); // Track the active slot for this widget
const { borderRadius, borderColor, boxShadow } = styles;
const { headerHeight = 80 } = properties;
const headerMaxHeight = parseInt(height, 10) - 100 - 10;
@ -118,7 +115,6 @@ export const Container = ({
<HorizontalSlot
slotName={'header'}
slotStyle={containerHeaderStyles}
isEditing={isEditing}
id={`${id}-header`}
height={headerHeight}
width={width}

6
frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
View file

@ -2,6 +2,9 @@ import React, { useEffect } from 'react';
import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
import { showGridLines, hideGridLines } from '@/AppBuilder/AppCanvas/Grid/gridUtils';
import { useSubContainerResizable } from '@/AppBuilder/_hooks/useSubContainerResizable';
import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
import useStore from '@/AppBuilder/_stores/store';
import { shallow } from 'zustand/shallow';
export const HorizontalSlot = React.memo(
({
@ -14,10 +17,11 @@ export const HorizontalSlot = React.memo(
slotName = 'header', // 'header' or 'footer'
slotStyle = {},
onResize,
isEditing,
maxHeight,
componentType,
}) => {
const { moduleId } = useModuleContext();
const isEditing = useStore((state) => state.modeStore.modules[moduleId].currentMode === 'edit', shallow);
const parsedHeight = parseInt(height, 10);
const { getRootProps, getHandleProps, getResizeState } = useSubContainerResizable({
initialHeight: parsedHeight,

9
frontend/src/AppBuilder/Widgets/Form/Form.jsx
View file

@ -341,13 +341,8 @@ const FormComponent = (props) => {
});
setChildrenData(childDataRef.current);
};
const mode = useStore((state) => state.currentMode, shallow);
const isEditing = mode === 'edit';
const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
const activeSlot = useActiveSlot(id); // Track the active slot for this widget
const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
// const updateContainerAutoHeight = useStore((state) => state.updateContainerAutoHeight);
const updateHeaderSizeInStore = ({ newHeight }) => {
const _height = parseInt(newHeight, 10);
@ -388,7 +383,6 @@ const FormComponent = (props) => {
<HorizontalSlot
slotName="header"
slotStyle={formHeader}
isEditing={isEditing}
id={`${id}-header`}
height={headerHeight}
width={width}
@ -469,7 +463,6 @@ const FormComponent = (props) => {
<HorizontalSlot
slotName="footer"
slotStyle={formFooter}
isEditing={isEditing}
id={`${id}-footer`}
height={footerHeight}
width={width}

2
frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
View file

@ -13,7 +13,6 @@ export const ModalFooter = React.memo(
width,
footerHeight,
onClick,
isEditing,
updateFooterSizeInStore,
activeSlot,
footerMaxHeight,
@ -29,7 +28,6 @@ export const ModalFooter = React.memo(
padding: `${4.5}px ${MODAL_CANVAS_PADDING}px`,
margin: '0px',
}}
isEditing={isEditing}
id={`${id}-footer`}
height={canvasFooterHeight}
width={width}

2
frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
View file

@ -15,7 +15,6 @@ export const ModalHeader = React.memo(
onHideModal,
headerHeight,
onClick,
isEditing,
updateHeaderSizeInStore,
activeSlot,
headerMaxHeight,
@ -34,7 +33,6 @@ export const ModalHeader = React.memo(
maxHeight: isFullScreen ? `${headerMaxHeight}` : `${headerMaxHeight}px`,
minHeight: '10px',
}}
isEditing={isEditing}
id={`${id}-header`}
height={canvasHeaderHeight}
width={width}

5
frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
View file

@ -29,9 +29,8 @@ export const ModalWidget = ({ ...restProps }) => {
isFullScreen,
} = restProps['modalProps'];
const isEditing = useStore((state) => state.currentMode === 'edit');
const setComponentProperty = useStore((state) => state.setComponentProperty);
const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
const activeSlot = useActiveSlot(id); // Track the active slot for this widget
const _modalHeight = isFullScreen ? '100vh' : `${modalHeight}px`;
const headerMaxHeight = isFullScreen
? `calc(${_modalHeight} - ${footerHeight} - 100px - 10px)`
@ -122,7 +121,6 @@ export const ModalWidget = ({ ...restProps }) => {
onHideModal={onHideModal}
headerHeight={headerHeight}
onClick={handleModalSlotClick}
isEditing={isEditing}
updateHeaderSizeInStore={updateHeaderSizeInStore}
activeSlot={activeSlot}
headerMaxHeight={headerMaxHeight}
@ -168,7 +166,6 @@ export const ModalWidget = ({ ...restProps }) => {
width={modalWidth}
footerHeight={footerHeight}
onClick={handleModalSlotClick}
isEditing={isEditing}
updateFooterSizeInStore={updateFooterSizeInStore}
activeSlot={activeSlot}
footerMaxHeight={footerMaxHeight}

1
frontend/src/AppBuilder/_hooks/useActiveSlot.js
View file

@ -23,7 +23,6 @@ export const useActiveSlot = (widgetId) => {
useEffect(() => {
const handleDoubleClick = (event) => {
let target = event.target;
if (!widgetId) {
setActiveSlot(null);
return;