- misc updates / clear stage

Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-07-16 15:53:56 -04:00
parent 4b44ff29ee
commit f45aa69917
3 changed files with 22 additions and 20 deletions

View File

@@ -1,30 +1,28 @@
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
* @param itemKey - Unique key to preserve height for items with the same key
* @returns {JSX.Element}
*/
const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override, itemKey }) => {
const ref = useRef(null);
const heightMapRef = useRef(new Map());
const [localMaxHeight, setLocalMaxHeight] = useState(maxHeight);
useEffect(() => {
const currentRef = ref.current; // Step 1: Capture the current ref value
const currentRef = ref.current;
const updateHeight = () => {
const currentHeight = currentRef?.firstChild?.clientHeight || 0;
if (itemKey) {
const keyHeight = heightMap.get(itemKey) || 0;
const keyHeight = heightMapRef.current.get(itemKey) || 0;
const newHeight = Math.max(keyHeight, currentHeight);
heightMap.set(itemKey, newHeight);
heightMapRef.current.set(itemKey, newHeight);
setLocalMaxHeight(newHeight);
} else {
setLocalMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight));
@@ -45,8 +43,8 @@ const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override, item
}, [itemKey, setMaxHeight]);
useEffect(() => {
if (itemKey && heightMap.has(itemKey)) {
setLocalMaxHeight(heightMap.get(itemKey));
if (itemKey && heightMapRef.current.has(itemKey)) {
setLocalMaxHeight(heightMapRef.current.get(itemKey));
}
}, [itemKey]);

View File

@@ -5,20 +5,13 @@ const SizeMemoryWrapper = ({ children, maxHeight, setMaxHeight, maxWidth, setMax
const ref = useRef(null);
useEffect(() => {
const currentRef = ref.current; // Capture the current ref value
const currentRef = ref.current;
const updateSize = () => {
// Check if the zoom level is less than 100%
if (window.devicePixelRatio < 1) {
return; // Do not update width and height
}
const currentHeight = currentRef?.firstChild?.clientHeight || 0;
const currentWidth = currentRef?.firstChild?.clientWidth || 0;
// Update height as before
setMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight));
// Update width to decrease when zooming back in
setMaxWidth((prevWidth) => Math.max(prevWidth, currentWidth)); // Increase width if current is greater than previous
setMaxWidth((prevWidth) => Math.max(prevWidth, currentWidth));
};
const resizeObserver = new ResizeObserver(updateSize);
@@ -27,10 +20,20 @@ const SizeMemoryWrapper = ({ children, maxHeight, setMaxHeight, maxWidth, setMax
resizeObserver.observe(currentRef.firstChild);
}
const handleLoad = () => {
if (window.devicePixelRatio < 1) {
return; // Do not update width and height
}
updateSize();
};
window.addEventListener("load", handleLoad);
return () => {
if (currentRef?.firstChild) {
resizeObserver.unobserve(currentRef.firstChild);
}
window.removeEventListener("load", handleLoad);
};
}, [setMaxHeight, setMaxWidth]);

View File

@@ -172,7 +172,8 @@ const Lane = ({
itemKey={objectHash({
id,
orientation,
cardSettings
cardSettings,
cardLength: renderedCards?.length
})}
maxHeight={maxLaneHeight}
setMaxHeight={setMaxLaneHeight}