random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-04-21 00:59:26 +01: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) { if (!tableContainerRef.current) {
return undefined; return undefined;
} }
const resizeObserver = new ResizeObserver(() => tableContainerRef.current.offsetHeight !== undefined && setTableContainerHeightPx(tableContainerRef.current.offsetHeight));
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);
});
resizeObserver.observe(tableContainerRef.current); resizeObserver.observe(tableContainerRef.current);
return () => resizeObserver.disconnect(); // clean up return () => resizeObserver.disconnect(); // clean up
}, []); }, []);
return <FluentProvider theme={dataExplorerLightTheme} style={{ height: "100%" }}> return <FluentProvider theme={dataExplorerLightTheme} style={{ height: "100%" }}>
@ -571,9 +564,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
{/* <Split> doesn't like to be a flex child */} {/* <Split> doesn't like to be a flex child */}
<div style={{ overflow: "hidden", height: "100%" }}> <div style={{ overflow: "hidden", height: "100%" }}>
<Split> <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}> 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>
<div style={{ minWidth: "20%" }}><pre>{JSON.stringify(currentDocument, undefined, " ")}</pre></div> <div style={{ minWidth: "20%" }}><pre>{JSON.stringify(currentDocument, undefined, " ")}</pre></div>
</Split> </Split>

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

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