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