diff --git a/client/src/components/production-board-kanban/trello-board/components/Lane/HeightMemoryWrapper.jsx b/client/src/components/production-board-kanban/trello-board/components/Lane/HeightMemoryWrapper.jsx index a9f2fb472..d423276d2 100644 --- a/client/src/components/production-board-kanban/trello-board/components/Lane/HeightMemoryWrapper.jsx +++ b/client/src/components/production-board-kanban/trello-board/components/Lane/HeightMemoryWrapper.jsx @@ -1,40 +1,56 @@ -import React, { useEffect, useRef } from "react"; +import React, { useEffect, useRef, useState } from "react"; import PropTypes from "prop-types"; +const heightMap = new Map(); + /** * Height Memory Wrapper * @param children * @param maxHeight * @param setMaxHeight * @param override - Override the minHeight style from being set + * @param key - Unique key to preserve height for items with the same key * @returns {Element} * @constructor */ -const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override }) => { +const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override, itemKey }) => { const ref = useRef(null); + const [localMaxHeight, setLocalMaxHeight] = useState(maxHeight); useEffect(() => { const currentRef = ref.current; // Step 1: Capture the current ref value const updateHeight = () => { const currentHeight = currentRef?.firstChild?.clientHeight || 0; + if (itemKey) { + const keyHeight = heightMap.get(itemKey) || 0; + const newHeight = Math.max(keyHeight, currentHeight); + heightMap.set(itemKey, newHeight); + setLocalMaxHeight(newHeight); + } else { + setLocalMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight)); + } setMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight)); }; const resizeObserver = new ResizeObserver(updateHeight); if (currentRef?.firstChild) { - // Step 2: Use the captured ref for observing resizeObserver.observe(currentRef.firstChild); } return () => { if (currentRef?.firstChild) { - // Step 2: Use the captured ref for observing resizeObserver.unobserve(currentRef.firstChild); } }; - }, [setMaxHeight]); + }, [itemKey, setMaxHeight]); - const style = override ? {} : { minHeight: maxHeight }; + useEffect(() => { + if (itemKey && heightMap.has(itemKey)) { + setLocalMaxHeight(heightMap.get(itemKey)); + } + }, [itemKey]); + + const style = override ? {} : { minHeight: localMaxHeight }; return (
@@ -47,7 +63,8 @@ HeightMemoryWrapper.propTypes = { children: PropTypes.node.isRequired, maxHeight: PropTypes.number.isRequired, setMaxHeight: PropTypes.func.isRequired, - override: PropTypes.bool + override: PropTypes.bool, + itemKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) }; export default HeightMemoryWrapper; diff --git a/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx b/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx index f6e387877..08f178a96 100644 --- a/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx +++ b/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx @@ -183,8 +183,20 @@ const Lane = ({ const shouldOverride = orientation !== "horizontal" && (collapsed || !renderedCards.length); const shouldRenderPlaceholder = orientation !== "horizontal" && (collapsed || renderedCards.length === 0); + const hasKey = + orientation === "vertical" + ? { + key: id + } + : {}; + return ( - +
); }, - [orientation, collapsed, isVisible, renderDraggable, maxLaneHeight, setMaxLaneHeight, maxCardWidth] + [orientation, collapsed, isVisible, renderDraggable, maxLaneHeight, setMaxLaneHeight, maxCardWidth, id] ); const renderDragContainer = useCallback(