diff --git a/lib/interviewer/containers/HyperList/HyperList.js b/lib/interviewer/containers/HyperList/HyperList.js
index 9a9ada35..e6bdc2ec 100644
--- 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 = () => (
(
+
+
+
+ ),
+ [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(
- //
- //
- //
,
- // );
- // const height = sizingElement.clientHeight;
+ newHiddenSizingEl.style.visibility = 'hidden';
- // return height + GUTTER_SIZE;
+ document.body.appendChild(newHiddenSizingEl);
+ newHiddenSizingEl.innerHTML = renderToString(
);
+ const height = newHiddenSizingEl.clientHeight;
+ document.body.removeChild(newHiddenSizingEl);
- return 200;
+ return height + GUTTER_SIZE;
};
// If placeholder is provider it supersedes everything