hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Use mobx observable property instead of react-native component state

Browse Source 
Signed-off-by: Alex Culliere <alozhkin@mirantis.com>
This commit is contained in:
Alex Culliere 2021-02-15 13:48:07 +02:00
parent 2b3d2ed061
commit 9e33399949
1 changed files with 9 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/renderer/components/item-object-list/item-list-layout.tsx
View File

@ -2,7 +2,7 @@ import "./item-list-layout.scss";
import groupBy from "lodash/groupBy"; import groupBy from "lodash/groupBy";
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import { computed } from "mobx"; import { computed, observable } from "mobx";
import { disposeOnUnmount, observer } from "mobx-react"; import { disposeOnUnmount, observer } from "mobx-react";
import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog"; import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallback } from "../table"; import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallback } from "../table";
@ -80,10 +80,6 @@ export interface ItemListLayoutProps<T extends ItemObject = ItemObject> {
renderFooter?: (parent: ItemListLayout) => React.ReactNode; renderFooter?: (parent: ItemListLayout) => React.ReactNode;
} }
interface ItemListLayoutState {
cellSizes: number[];
}
const defaultProps: Partial<ItemListLayoutProps> = { const defaultProps: Partial<ItemListLayoutProps> = {
showHeader: true, showHeader: true,
isSearchable: true, isSearchable: true,
@ -100,7 +96,7 @@ const defaultProps: Partial<ItemListLayoutProps> = {
}; };
@observer @observer
export class ItemListLayout extends React.Component<ItemListLayoutProps, ItemListLayoutState> { export class ItemListLayout extends React.Component<ItemListLayoutProps> {
static defaultProps = defaultProps as object; static defaultProps = defaultProps as object;
private storage = createStorage("item_list_layout", { private storage = createStorage("item_list_layout", {
@ -115,12 +111,13 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps, ItemLis
this.storage.merge({ showFilters }); this.storage.merge({ showFilters });
} }
@observable cellSizes: number[];
constructor(props: ItemListLayoutProps) { constructor(props: ItemListLayoutProps) {
super(props); super(props);
this.state = { // create a registry to remember column sizes
cellSizes: new Array<number>(props.renderTableHeader.length) this.cellSizes = new Array<number>(props.renderTableHeader.length);
};
} }
async componentDidMount() { async componentDidMount() {
@ -222,10 +219,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps, ItemLis
} }
handleCellResize(index: number, width: number) { handleCellResize(index: number, width: number) {
const cellSizes = [...this.state.cellSizes]; this.cellSizes[index] = width;
cellSizes[index] = width;
this.setState({ cellSizes });
} }
@autobind() @autobind()
@ -262,7 +256,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps, ItemLis
renderTableContents(item).map((content, index) => { renderTableContents(item).map((content, index) => {
const cellProps: TableCellProps = isReactNode(content) ? { children: content } : content; const cellProps: TableCellProps = isReactNode(content) ? { children: content } : content;
const headCell = renderTableHeader?.[index]; const headCell = renderTableHeader?.[index];
const cellSize = this.state.cellSizes[index]; const cellSize = this.cellSizes[index];
if (copyClassNameFromHeadCells && headCell) { if (copyClassNameFromHeadCells && headCell) {
cellProps.className = cssNames(cellProps.className, headCell.className); cellProps.className = cssNames(cellProps.className, headCell.className);
@ -428,7 +422,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps, ItemLis
/> />
)} )}
{renderTableHeader.map((cellProps, index) => { {renderTableHeader.map((cellProps, index) => {
const cellSize = this.state.cellSizes[index]; const cellSize = this.cellSizes[index];
const _cellProps = resizable ? const _cellProps = resizable ?
{ ...cellProps, _onResize: (width: number) => this.handleCellResize(index, width), resizable } : { ...cellProps, _onResize: (width: number) => this.handleCellResize(index, width), resizable } :
cellProps; cellProps;