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 selection behavior and some layout issue

Browse Source
This commit is contained in:
Laurent Nguyen 2024-02-29 11:15:29 +01:00
parent 2165d968b9
commit c6cec71fd9
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -442,16 +442,18 @@ const DocumentsTabComponent: React.FunctionComponent<{
setCurrentDocument(content);
});
return <FluentProvider theme={dataExplorerLightTheme} style={{ overflow: "hidden" }}>
return <FluentProvider theme={dataExplorerLightTheme} style={{ height: "100%" }}>
<div
className="tab-pane active tabdocuments flexContainer"
data-bind="
className="tab-pane active"
/* data-bind="
setTemplateReady: true,
attr:{
id: tabId
},
visible: isActive"
*/
role="tabpanel"
style={{ display: "flex" }}
>
{/* <!-- Filter - Start --> */}
{isFilterCreated &&
@ -548,13 +550,15 @@ const DocumentsTabComponent: React.FunctionComponent<{
}
{/* <!-- Filter - End --> */}
<Split style={{ height: "100%" }}>
<div style={{ minWidth: "20%", width: "20%" }}>
<DocumentsTableComponent items={tableItems} onSelectedItem={onSelectedDocument} />
</div>
<div style={{ minWidth: "20%", flex: 1 }}><pre>{JSON.stringify(currentDocument, undefined, " ")}</pre></div>
</Split>
{/* <Split> doesn't like to be a flex child */}
<div style={{ overflow: "hidden" }}>
<Split>
<div style={{ minWidth: 440, width: "20%" }}>
<DocumentsTableComponent style={{ width: "100%", height: "100%" }} items={tableItems} onSelectedItem={onSelectedDocument} />
</div>
<div style={{ minWidth: "20%" }}><pre>{JSON.stringify(currentDocument, undefined, " ")}</pre></div>
</Split>
</div>
</div >
</FluentProvider>;
}

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

@ -46,9 +46,11 @@ const columns: TableColumnDefinition<DocumentsTableComponentItem>[] = [
export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
items, onSelectedItem, style,
}: IDocumentsTableComponentProps) => {
const [activeItemIndex, setActiveItemIndex] = React.useState<number>(undefined);
const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>({
id: {
idealWidth: 300,
idealWidth: 280,
minWidth: 273,
},
type: {
@ -126,7 +128,11 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
// Load document depending on selection
useEffect(() => {
if (selectedRows.size === 1 && items.length > 0) {
onSelectedItem(selectedRows.values().next().value);
const newActiveItemIndex = selectedRows.values().next().value;
if (newActiveItemIndex !== activeItemIndex) {
onSelectedItem(newActiveItemIndex);
setActiveItemIndex(newActiveItemIndex);
}
}
}, [selectedRows, items]);