- misc updates / clear stage
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
@@ -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]);
|
||||
|
||||
|
||||
@@ -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]);
|
||||
|
||||
|
||||
@@ -172,7 +172,8 @@ const Lane = ({
|
||||
itemKey={objectHash({
|
||||
id,
|
||||
orientation,
|
||||
cardSettings
|
||||
cardSettings,
|
||||
cardLength: renderedCards?.length
|
||||
})}
|
||||
maxHeight={maxLaneHeight}
|
||||
setMaxHeight={setMaxLaneHeight}
|
||||
|
||||
Reference in New Issue
Block a user