diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx index 482347162..5f12a471e 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx +++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx @@ -22,6 +22,7 @@ import { DocumentsTabPrefs, readDocumentsTabPrefs, saveDocumentsTabPrefs, + saveDocumentsTabPrefsDebounced, } from "Explorer/Tabs/DocumentsTabV2/documentsTabPrefs"; import { getPlatformTheme } from "Explorer/Theme/ThemeUtil"; import { useSelectedNode } from "Explorer/useSelectedNode"; @@ -1305,6 +1306,7 @@ export const DocumentsTabComponent: React.FunctionComponent { + if (!prefs.columnWidths) { + prefs.columnWidths = {}; + } + prefs.columnWidths[columnId] = width; + saveDocumentsTabPrefsDebounced(prefs); + setPrefs({ ...prefs }); + }; + return (
@@ -1832,6 +1844,7 @@ export const DocumentsTabComponent: React.FunctionComponent {tableItems.length > 0 && ( void; } interface TableRowData extends RowStateBase { @@ -58,7 +59,7 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps { } const DEFAULT_COLUMN_WIDTH_PX = 200; -const MIN_COLUMN_WIDTH_PX = 50; +const MIN_COLUMN_WIDTH_PX = 20; export const DocumentsTableComponent: React.FC = ({ items, @@ -68,6 +69,7 @@ export const DocumentsTableComponent: React.FC = size, columnsDefinition, isSelectionDisabled, + onColumnResize: _onColumnResize, }: IDocumentsTableComponentProps) => { const initialSizingOptions: TableColumnSizingOptions = {}; columnsDefinition.forEach((column) => { @@ -79,15 +81,19 @@ export const DocumentsTableComponent: React.FC = const [columnSizingOptions, setColumnSizingOptions] = React.useState(initialSizingOptions); - const onColumnResize = React.useCallback((_, { columnId, width }) => { - setColumnSizingOptions((state) => ({ - ...state, - [columnId]: { - ...state[columnId], - idealWidth: width, - }, - })); - }, []); + const onColumnResize = React.useCallback( + (_, { columnId, width }) => { + setColumnSizingOptions((state) => ({ + ...state, + [columnId]: { + ...state[columnId], + idealWidth: width, + }, + })); + _onColumnResize(columnId, width); + }, + [_onColumnResize], + ); // Columns must be a static object and cannot change on re-renders otherwise React will complain about too many refreshes const columns: TableColumnDefinition[] = useMemo( diff --git a/src/Explorer/Tabs/DocumentsTabV2/documentsTabPrefs.ts b/src/Explorer/Tabs/DocumentsTabV2/documentsTabPrefs.ts index 06f45d690..5753fa5b4 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/documentsTabPrefs.ts +++ b/src/Explorer/Tabs/DocumentsTabV2/documentsTabPrefs.ts @@ -4,7 +4,7 @@ import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility"; export interface DocumentsTabPrefs { leftPaneWidthPercent: number; - columnWidths?: number[]; + columnWidths?: { [columnId: string]: number }; } const defaultPrefs: DocumentsTabPrefs = { @@ -19,3 +19,16 @@ export const readDocumentsTabPrefs = (): DocumentsTabPrefs => { export const saveDocumentsTabPrefs = (prefs: DocumentsTabPrefs): void => { LocalStorageUtility.setEntryObject(StorageKey.DocumentsTabPrefs, prefs); }; + +const DEBOUNCE_TIMEOUT_MS = 300; +let timeoutId: NodeJS.Timeout | undefined; +/** + * Wait for a short period of time before saving the preferences to avoid too many updates. + * @param prefs + */ +export const saveDocumentsTabPrefsDebounced = (prefs: DocumentsTabPrefs): void => { + if (timeoutId) { + clearTimeout(timeoutId); + } + timeoutId = setTimeout(() => saveDocumentsTabPrefs(prefs), DEBOUNCE_TIMEOUT_MS); +};