Merge branch 'main' into feature/no-active-protocol

complexdatacollective · Jan 23, 2024 · c45c737 · c45c737
2 parents 6722eaa + 9b14783
commit c45c737
Showing 1 changed file with 25 additions and 11 deletions.
diff --git a/lib/interviewer/containers/HyperList/HyperList.js b/lib/interviewer/containers/HyperList/HyperList.js
@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import PropTypes from 'prop-types';
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, useCallback } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeList as List } from 'react-window';
 import { compose } from 'recompose';
@@ -10,6 +10,7 @@ import {
   DropTarget,
   MonitorDropTarget,
 } from '../../behaviours/DragAndDrop';
+import { renderToString } from 'next/dist/compiled/react-dom/cjs/react-dom-server-legacy.browser.development';
 
 const LargeRosterNotice = () => (
   <div
@@ -135,24 +136,37 @@ const HyperList = ({
 
   const classNames = cx('hyper-list', className);
 
+  const SizeRenderer = useCallback(
+    (props) => (
+      <div className="hyper-list__item">
+        <ItemComponent {...props} />
+      </div>
+    ),
+    [ItemComponent],
+  );
+
   const getItemSize = (item, listWidth) => {
     if (!listWidth) {
       return 0;
     }
 
-    // const itemData = items[item];
-    // const { props } = itemData;
+    const itemData = items[item];
+    const { props } = itemData;
+    const newHiddenSizingEl = document.createElement('div');
+
+    newHiddenSizingEl.style.position = 'absolute';
+    newHiddenSizingEl.style.top = '0';
+    newHiddenSizingEl.style.width = `${listWidth - GUTTER_SIZE * 2 - 14}px`; // Additional 14 for scrollbar
+    newHiddenSizingEl.style.pointerEvents = 'none';
 
-    // const sizingElement = simpleRenderToString(
-    //   <div className="hyper-list__item">
-    //     <ItemComponent {...props} />
-    //   </div>,
-    // );
-    // const height = sizingElement.clientHeight;
+    newHiddenSizingEl.style.visibility = 'hidden';
 
-    // return height + GUTTER_SIZE;
+    document.body.appendChild(newHiddenSizingEl);
+    newHiddenSizingEl.innerHTML = renderToString(<SizeRenderer {...props} />);
+    const height = newHiddenSizingEl.clientHeight;
+    document.body.removeChild(newHiddenSizingEl);
 
-    return 200;
+    return height + GUTTER_SIZE;
   };
 
   // If placeholder is provider it supersedes everything