diff --git a/src/renderer/components/item-object-list/item-list-layout.tsx b/src/renderer/components/item-object-list/item-list-layout.tsx index dda2979abf..3d44d6270b 100644 --- a/src/renderer/components/item-object-list/item-list-layout.tsx +++ b/src/renderer/components/item-object-list/item-list-layout.tsx @@ -6,7 +6,7 @@ import { computed, observable } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog"; import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallback } from "../table"; -import { autobind, createStorage, cssNames, IClassName, isReactNode, noop, prevDefault, stopPropagation } from "../../utils"; +import { autobind, createStorage, cssNames, IClassName, isReactNode, noop, prevDefault, stopPropagation, StorageHelper } from "../../utils"; import { AddRemoveButtons, AddRemoveButtonsProps } from "../add-remove-buttons"; import { NoItems } from "../no-items"; import { Spinner } from "../spinner"; @@ -96,13 +96,16 @@ const defaultProps: Partial = { customizeTableRowProps: () => ({} as TableRowProps), }; +type ItemListLayoutStorage = { + showFilters: boolean, + cellSizes: Record +}; + @observer export class ItemListLayout extends React.Component { static defaultProps = defaultProps as object; - private storage = createStorage("item_list_layout", { - showFilters: false, // setup defaults - }); + private storage: StorageHelper; get showFilters(): boolean { return this.storage.get().showFilters; @@ -113,22 +116,37 @@ export class ItemListLayout extends React.Component { } @observable cellSizes: number[]; + get persistentCellSizes(): number[] { - const { clusterId, tableId, renderTableHeader: { length } } = this.props; - const savedSizes = userStore.getTableSizing(clusterId, tableId); + const { tableId, renderTableHeader: { length } } = this.props; + const savedSizes = this.storage.get().cellSizes[tableId] || []; return savedSizes.length !== length ? new Array(length) : savedSizes; } set persistentCellSizes(sizes: number[]) { - const { clusterId, tableId } = this.props; - - userStore.setTableSizing(clusterId, tableId, sizes); + const { tableId } = this.props; + const currentCellSizes = this.storage.get().cellSizes; + + this.storage.merge({ + cellSizes: { + ...currentCellSizes, + [tableId]: sizes + } + }); } constructor(props: ItemListLayoutProps) { super(props); + // create storage + this.storage = createStorage("item_list_layout", { + showFilters: false, + cellSizes: { + [props.tableId]: [] + } + }); + // create a registry to remember column sizes this.cellSizes = new Array(props.renderTableHeader.length); diff --git a/src/renderer/components/table/table-cell.tsx b/src/renderer/components/table/table-cell.tsx index d7755d1d4e..fbc0b3b8df 100644 --- a/src/renderer/components/table/table-cell.tsx +++ b/src/renderer/components/table/table-cell.tsx @@ -123,9 +123,11 @@ export class TableCell extends React.Component { {resizable && ( prevDefault(() => {})} - onDrag={newSize => this.props.onResize(newSize)} + onDrag={newSize => + this.props.onResize(newSize) + } onEnd={() => this.props.onResizeComplete()} - getCurrentExtent={() => size} + getCurrentExtent={() => size || 0} direction={ResizeDirection.HORIZONTAL} placement={ResizeSide.TRAILING} growthDirection={ResizeGrowthDirection.LEFT_TO_RIGHT}