Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/hyperlist rendering #56

Merged
merged 3 commits into from
Jan 23, 2024
Merged

Fix/hyperlist rendering #56

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e651568
bypass generated compiler alias
buckhalt Jan 19, 2024
c723a61
remove initial attempt to use portals
buckhalt Jan 19, 2024
3eb8968
Merge branch 'main' into fix/hyperlist-rendering
jthrilly Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 25 additions & 11 deletions lib/interviewer/containers/HyperList/HyperList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down