random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-01-19 15:30:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix NaN height issue

Browse Source
This commit is contained in:
Laurent Nguyen 2024-02-29 13:51:03 +01:00
parent 82c7760af2
commit 5d970d4c1f
2 changed files with 4 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
View File

@ -448,16 +448,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
if (!tableContainerRef.current) {
return undefined;
}
const resizeObserver = new ResizeObserver(() => {
// Do what you want to do when the size of the element changes
setTableContainerHeightPx(tableContainerRef.current.offsetHeight);
console.log('height', tableContainerRef.current.offsetHeight);
});
const resizeObserver = new ResizeObserver(() => tableContainerRef.current.offsetHeight !== undefined && setTableContainerHeightPx(tableContainerRef.current.offsetHeight));
resizeObserver.observe(tableContainerRef.current);
return () => resizeObserver.disconnect(); // clean up
}, []);
return <FluentProvider theme={dataExplorerLightTheme} style={{ height: "100%" }}>
@ -571,9 +564,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
{/* <Split> doesn't like to be a flex child */}
<div style={{ overflow: "hidden", height: "100%" }}>
<Split>
<div style={{ minWidth: 440, width: "20%", display: "flex", flexDirection: "column", height: "100%" }}
<div style={{ minWidth: 440, width: "20%", display: "flex", height: "100%" }}
ref={tableContainerRef}>
<DocumentsTableComponent style={{ width: "100%", height: "100%" }} items={tableItems} onSelectedItem={onSelectedDocument} height={tableContainerHeightPx} />
<DocumentsTableComponent style={{ width: "100%" }} items={tableItems} onSelectedItem={onSelectedDocument} height={tableContainerHeightPx} />
</div>
<div style={{ minWidth: "20%" }}><pre>{JSON.stringify(currentDocument, undefined, " ")}</pre></div>
</Split>

2
src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
View File

@ -235,7 +235,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
</TableHeader>
<TableBody style={{ height: "100%", flex: 1 }}>
<List
height={height - 32}
height={height !== undefined ? height - 32 : 0}
itemCount={items.length}
itemSize={45}
width="100%"