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

Fix virtual list behaviour in item list layout by making table rows observer

Browse Source 
Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen 2022-02-02 08:17:32 +02:00
parent c1d557aeee
commit aa850f8e79
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
1 changed files with 73 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/renderer/components/item-object-list/content.tsx
View File

@ -7,7 +7,7 @@ import "./item-list-layout.scss";
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import { computed, makeObservable } from "mobx"; import { computed, makeObservable } from "mobx";
import { observer } from "mobx-react"; import { Observer, observer } from "mobx-react";
import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog"; import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallbacks } from "../table"; import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallbacks } from "../table";
import { boundMethod, cssNames, IClassName, isReactNode, prevDefault, stopPropagation } from "../../utils"; import { boundMethod, cssNames, IClassName, isReactNode, prevDefault, stopPropagation } from "../../utils";
@ -70,13 +70,26 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
@boundMethod @boundMethod
getRow(uid: string) { getRow(uid: string) {
return (
<div>
<Observer>
{() => {
const { const {
isSelectable, renderTableHeader, renderTableContents, renderItemMenu, isSelectable,
store, hasDetailsView, onDetails, renderTableHeader,
copyClassNameFromHeadCells, customizeTableRowProps, detailsItem, renderTableContents,
renderItemMenu,
store,
hasDetailsView,
onDetails,
copyClassNameFromHeadCells,
customizeTableRowProps,
detailsItem,
} = this.props; } = this.props;
const { isSelected } = store; const { isSelected } = store;
const item = this.props.getItems().find(item => item.getId() == uid); const item = this.props
.getItems()
.find((item) => item.getId() == uid);
if (!item) return null; if (!item) return null;
const itemId = item.getId(); const itemId = item.getId();
@ -88,7 +101,11 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
searchItem={item} searchItem={item}
sortItem={item} sortItem={item}
selected={detailsItem && detailsItem.getId() === itemId} selected={detailsItem && detailsItem.getId() === itemId}
onClick={hasDetailsView ? prevDefault(() => onDetails(item)) : undefined} onClick={
hasDetailsView
? prevDefault(() => onDetails(item))
: undefined
}
{...customizeTableRowProps(item)} {...customizeTableRowProps(item)}
> >
{isSelectable && ( {isSelectable && (
@ -98,13 +115,17 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
onClick={prevDefault(() => store.toggleSelection(item))} onClick={prevDefault(() => store.toggleSelection(item))}
/> />
)} )}
{ {renderTableContents(item).map((content, index) => {
renderTableContents(item).map((content, index) => { const cellProps: TableCellProps = isReactNode(content)
const cellProps: TableCellProps = isReactNode(content) ? { children: content } : content; ? { children: content }
: content;
const headCell = renderTableHeader?.[index]; const headCell = renderTableHeader?.[index];
if (copyClassNameFromHeadCells && headCell) { if (copyClassNameFromHeadCells && headCell) {
cellProps.className = cssNames(cellProps.className, headCell.className); cellProps.className = cssNames(
cellProps.className,
headCell.className,
);
} }
if (!headCell || this.showColumn(headCell)) { if (!headCell || this.showColumn(headCell)) {
@ -112,8 +133,7 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
} }
return null; return null;
}) })}
}
{renderItemMenu && ( {renderItemMenu && (
<TableCell className="menu"> <TableCell className="menu">
<div onClick={stopPropagation}> <div onClick={stopPropagation}>
@ -123,6 +143,10 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
)} )}
</TableRow> </TableRow>
); );
}}
</Observer>
</div>
);
} }
@boundMethod @boundMethod