random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-04-26 11:34:25 +01: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); setCurrentDocument(content);
}); });
return <FluentProvider theme={dataExplorerLightTheme} style={{ overflow: "hidden" }}> return <FluentProvider theme={dataExplorerLightTheme} style={{ height: "100%" }}>
<div <div
className="tab-pane active tabdocuments flexContainer" className="tab-pane active"
data-bind=" /* data-bind="
setTemplateReady: true, setTemplateReady: true,
attr:{ attr:{
id: tabId id: tabId
}, },
visible: isActive" visible: isActive"
*/
role="tabpanel" role="tabpanel"
style={{ display: "flex" }}
> >
{/* <!-- Filter - Start --> */} {/* <!-- Filter - Start --> */}
{isFilterCreated && {isFilterCreated &&
@ -548,13 +550,15 @@ const DocumentsTabComponent: React.FunctionComponent<{
} }
{/* <!-- Filter - End --> */} {/* <!-- Filter - End --> */}
<Split style={{ height: "100%" }}> {/* <Split> doesn't like to be a flex child */}
<div style={{ minWidth: "20%", width: "20%" }}> <div style={{ overflow: "hidden" }}>
<DocumentsTableComponent items={tableItems} onSelectedItem={onSelectedDocument} /> <Split>
</div> <div style={{ minWidth: 440, width: "20%" }}>
<div style={{ minWidth: "20%", flex: 1 }}><pre>{JSON.stringify(currentDocument, undefined, " ")}</pre></div> <DocumentsTableComponent style={{ width: "100%", height: "100%" }} items={tableItems} onSelectedItem={onSelectedDocument} />
</Split> </div>
<div style={{ minWidth: "20%" }}><pre>{JSON.stringify(currentDocument, undefined, " ")}</pre></div>
</Split>
</div>
</div > </div >
</FluentProvider>; </FluentProvider>;
} }

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

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