random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change persistence format for column width (#1944)

This commit is contained in:
Laurent Nguyen 2024-08-22 17:00:49 +02:00 committed by GitHub
parent 038142c180
commit 833d677d20
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
View File

@ -14,7 +14,7 @@ export enum SubComponentName {
} }
export type ColumnSizesMap = { [columnId: string]: WidthDefinition }; export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
export type WidthDefinition = { idealWidth?: number; minWidth?: number }; export type WidthDefinition = { widthPx: number };
export type TabDivider = { leftPaneWidthPercent: number }; export type TabDivider = { leftPaneWidthPercent: number };
/** /**

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

@ -28,7 +28,6 @@ import {
readSubComponentState, readSubComponentState,
saveSubComponentState, saveSubComponentState,
SubComponentName, SubComponentName,
WidthDefinition,
} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil"; } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
import { INITIAL_SELECTED_ROW_INDEX, useDocumentsTabStyles } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2"; import { INITIAL_SELECTED_ROW_INDEX, useDocumentsTabStyles } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper"; import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
@ -68,11 +67,10 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
data: TableRowData[]; data: TableRowData[];
} }
const defaultSize: WidthDefinition = { const defaultSize = {
idealWidth: 200, idealWidth: 200,
minWidth: 50, minWidth: 50,
}; };
export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
items, items,
onSelectedRowsChange, onSelectedRowsChange,
@ -86,16 +84,28 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => { const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => {
const columnIds = ["id"].concat(columnHeaders.partitionKeyHeaders); const columnIds = ["id"].concat(columnHeaders.partitionKeyHeaders);
const columnSizesMap: ColumnSizesMap = readSubComponentState(SubComponentName.ColumnSizes, collection, {}); const columnSizesMap: ColumnSizesMap = readSubComponentState(SubComponentName.ColumnSizes, collection, {});
const columnSizesPx: ColumnSizesMap = {}; const columnSizesPx: TableColumnSizingOptions = {};
columnIds.forEach((columnId) => { columnIds.forEach((columnId) => {
columnSizesPx[columnId] = (columnSizesMap && columnSizesMap[columnId]) || defaultSize; if (
!columnSizesMap ||
!columnSizesMap[columnId] ||
columnSizesMap[columnId].widthPx === undefined ||
isNaN(columnSizesMap[columnId].widthPx)
) {
columnSizesPx[columnId] = defaultSize;
} else {
columnSizesPx[columnId] = {
idealWidth: columnSizesMap[columnId].widthPx,
minWidth: 50,
};
}
}); });
return columnSizesPx; return columnSizesPx;
}); });
const styles = useDocumentsTabStyles(); const styles = useDocumentsTabStyles();
const onColumnResize = React.useCallback((_, { columnId, width }) => { const onColumnResize = React.useCallback((_, { columnId, width }: { columnId: string; width: number }) => {
setColumnSizingOptions((state) => { setColumnSizingOptions((state) => {
const newSizingOptions = { const newSizingOptions = {
...state, ...state,
@ -105,7 +115,14 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
}, },
}; };
saveSubComponentState(SubComponentName.ColumnSizes, collection, newSizingOptions, true); const persistentSizes = Object.keys(newSizingOptions).reduce((acc, key) => {
acc[key] = {
widthPx: newSizingOptions[key].idealWidth,
};
return acc;
}, {} as ColumnSizesMap);
saveSubComponentState(SubComponentName.ColumnSizes, collection, persistentSizes, true);
return newSizingOptions; return newSizingOptions;
}); });