random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-02-01 13:46:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix selection behavior

Browse Source
This commit is contained in:
Laurent Nguyen 2024-03-28 08:11:59 +01:00
parent c4b659cdf7
commit 5f92a62e4f
1 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -131,8 +131,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
const [selectedDocumentContent, setSelectedDocumentContent] = useState<string>(undefined); const [selectedDocumentContent, setSelectedDocumentContent] = useState<string>(undefined);
const [selectedDocumentContentBaseline, setSelectedDocumentContentBaseline] = useState<string>(undefined); const [selectedDocumentContentBaseline, setSelectedDocumentContentBaseline] = useState<string>(undefined);
const [selectedDocumentId, setSelectedDocumentId] = useState<DocumentId>(undefined); // Table user clicked on this row
// Table selection const [clickedRow, setClickedRow] = useState<TableRowId>(undefined);
// Table multiple selection
const [selectedRows, setSelectedRows] = React.useState<Set<TableRowId>>(() => new Set<TableRowId>([0])); const [selectedRows, setSelectedRows] = React.useState<Set<TableRowId>>(() => new Set<TableRowId>([0]));
// Command buttons // Command buttons
@ -436,6 +437,8 @@ const DocumentsTabComponent: React.FunctionComponent<{
documentContent, documentContent,
partitionKey as PartitionKeyDefinition, partitionKey as PartitionKeyDefinition,
); );
const selectedDocumentId = documentIds[clickedRow as number];
selectedDocumentId.partitionKeyValue = partitionKeyValueArray; selectedDocumentId.partitionKeyValue = partitionKeyValueArray;
setIsExecutionError(false); setIsExecutionError(false);
@ -536,7 +539,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
setDocumentIds(newDocumentIds); setDocumentIds(newDocumentIds);
setSelectedDocumentContent(undefined); setSelectedDocumentContent(undefined);
setSelectedDocumentId(undefined); setClickedRow(undefined);
setSelectedRows(new Set()); setSelectedRows(new Set());
setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected); setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
}) })
@ -992,10 +995,11 @@ const DocumentsTabComponent: React.FunctionComponent<{
/** /**
* replicate logic of selectedDocument.click(); * replicate logic of selectedDocument.click();
* Document has been clicked on in table * Document has been clicked on in table
* @param index * @param tabRowId
*/ */
const onDocumentClicked = (index: number) => { const onDocumentClicked = (tabRowId: TableRowId) => {
setSelectedDocumentId(documentIds[index]); const index = tabRowId as number;
setClickedRow(index);
if (isEditorDirty()) { if (isEditorDirty()) {
useDialog useDialog
@ -1105,6 +1109,27 @@ const DocumentsTabComponent: React.FunctionComponent<{
partitionKeyHeaders: partitionKeyPropertyHeaders || [], partitionKeyHeaders: partitionKeyPropertyHeaders || [],
}; };
const onSelectedRowsChange = (selectedRows: Set<TableRowId>) => {
if (selectedRows.size === 0) {
setSelectedDocumentContent(undefined);
setClickedRow(undefined);
}
// Find if clickedRow is in selectedRows.If not, clear clickedRow and content
if (clickedRow !== undefined && !selectedRows.has(clickedRow)) {
setClickedRow(undefined);
setSelectedDocumentContent(undefined);
}
// If only one selection, we consider as a click
if (selectedRows.size === 1) {
const selectedRow = Array.from(selectedRows)[0];
onDocumentClicked(selectedRow);
}
setSelectedRows(selectedRows);
};
return ( return (
<FluentProvider theme={dataExplorerLightTheme} style={{ height: "100%" }}> <FluentProvider theme={dataExplorerLightTheme} style={{ height: "100%" }}>
<div <div
@ -1256,7 +1281,7 @@ data-bind="
style={{ width: 200 }} style={{ width: 200 }}
items={tableItems} items={tableItems}
onItemClicked={onDocumentClicked} onItemClicked={onDocumentClicked}
onSelectedRowsChange={setSelectedRows} onSelectedRowsChange={onSelectedRowsChange}
selectedRows={selectedRows} selectedRows={selectedRows}
size={tableContainerSizePx} size={tableContainerSizePx}
columnHeaders={columnHeaders} columnHeaders={columnHeaders}