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

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

Browse source 
This reverts commit 709ab62502.
This commit is contained in:
Nakul Nagargade 2025-07-02 12:25:07 +05:30
parent 709ab62502
commit ddcd0d65d9
7 changed files with 23 additions and 8 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,6 +33,7 @@ export const Container = ({
setExposedVariables,
setExposedVariable
);
const { dynamicHeight } = properties;
useDynamicHeight({
@ -50,8 +51,10 @@ export const Container = ({
shallow
);
const isEditing = useStore((state) => state.currentMode === 'edit');
const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
const activeSlot = useActiveSlot(id); // Track the active slot for this widget
const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
const { borderRadius, borderColor, boxShadow } = styles;
const { headerHeight = 80 } = properties;
const headerMaxHeight = parseInt(height, 10) - 100 - 10;
@ -115,6 +118,7 @@ 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,9 +2,6 @@ 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(
({
@ -17,11 +14,10 @@ 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,8 +341,13 @@ const FormComponent = (props) => {
});
setChildrenData(childDataRef.current);
};
const activeSlot = useActiveSlot(id); // Track the active slot for this widget
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 setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
// const updateContainerAutoHeight = useStore((state) => state.updateContainerAutoHeight);
const updateHeaderSizeInStore = ({ newHeight }) => {
const _height = parseInt(newHeight, 10);
@ -383,6 +388,7 @@ const FormComponent = (props) => {
<HorizontalSlot
slotName="header"
slotStyle={formHeader}
isEditing={isEditing}
id={`${id}-header`}
height={headerHeight}
width={width}
@ -463,6 +469,7 @@ 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,6 +13,7 @@ export const ModalFooter = React.memo(
width,
footerHeight,
onClick,
isEditing,
updateFooterSizeInStore,
activeSlot,
footerMaxHeight,
@ -28,6 +29,7 @@ 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,6 +15,7 @@ export const ModalHeader = React.memo(
onHideModal,
headerHeight,
onClick,
isEditing,
updateHeaderSizeInStore,
activeSlot,
headerMaxHeight,
@ -33,6 +34,7 @@ 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,8 +29,9 @@ export const ModalWidget = ({ ...restProps }) => {
isFullScreen,
} = restProps['modalProps'];
const isEditing = useStore((state) => state.currentMode === 'edit');
const setComponentProperty = useStore((state) => state.setComponentProperty);
const activeSlot = useActiveSlot(id); // Track the active slot for this widget
const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
const _modalHeight = isFullScreen ? '100vh' : `${modalHeight}px`;
const headerMaxHeight = isFullScreen
? `calc(${_modalHeight} - ${footerHeight} - 100px - 10px)`
@ -121,6 +122,7 @@ export const ModalWidget = ({ ...restProps }) => {
onHideModal={onHideModal}
headerHeight={headerHeight}
onClick={handleModalSlotClick}
isEditing={isEditing}
updateHeaderSizeInStore={updateHeaderSizeInStore}
activeSlot={activeSlot}
headerMaxHeight={headerMaxHeight}
@ -166,6 +168,7 @@ 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,6 +23,7 @@ export const useActiveSlot = (widgetId) => {
useEffect(() => {
const handleDoubleClick = (event) => {
let target = event.target;
if (!widgetId) {
setActiveSlot(null);
return;