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

122
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,58 +70,82 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
@boundMethod @boundMethod
getRow(uid: string) { getRow(uid: string) {
const {
isSelectable, renderTableHeader, renderTableContents, renderItemMenu,
store, hasDetailsView, onDetails,
copyClassNameFromHeadCells, customizeTableRowProps, detailsItem,
} = this.props;
const { isSelected } = store;
const item = this.props.getItems().find(item => item.getId() == uid);
if (!item) return null;
const itemId = item.getId();
return ( return (
<TableRow <div>
key={itemId} <Observer>
nowrap {() => {
searchItem={item} const {
sortItem={item} isSelectable,
selected={detailsItem && detailsItem.getId() === itemId} renderTableHeader,
onClick={hasDetailsView ? prevDefault(() => onDetails(item)) : undefined} renderTableContents,
{...customizeTableRowProps(item)} renderItemMenu,
> store,
{isSelectable && ( hasDetailsView,
<TableCell onDetails,
checkbox copyClassNameFromHeadCells,
isChecked={isSelected(item)} customizeTableRowProps,
onClick={prevDefault(() => store.toggleSelection(item))} detailsItem,
/> } = this.props;
)} const { isSelected } = store;
{ const item = this.props
renderTableContents(item).map((content, index) => { .getItems()
const cellProps: TableCellProps = isReactNode(content) ? { children: content } : content; .find((item) => item.getId() == uid);
const headCell = renderTableHeader?.[index];
if (copyClassNameFromHeadCells && headCell) { if (!item) return null;
cellProps.className = cssNames(cellProps.className, headCell.className); const itemId = item.getId();
}
if (!headCell || this.showColumn(headCell)) { return (
return <TableCell key={index} {...cellProps} />; <TableRow
} key={itemId}
nowrap
searchItem={item}
sortItem={item}
selected={detailsItem && detailsItem.getId() === itemId}
onClick={
hasDetailsView
? prevDefault(() => onDetails(item))
: undefined
}
{...customizeTableRowProps(item)}
>
{isSelectable && (
<TableCell
checkbox
isChecked={isSelected(item)}
onClick={prevDefault(() => store.toggleSelection(item))}
/>
)}
{renderTableContents(item).map((content, index) => {
const cellProps: TableCellProps = isReactNode(content)
? { children: content }
: content;
const headCell = renderTableHeader?.[index];
return null; if (copyClassNameFromHeadCells && headCell) {
}) cellProps.className = cssNames(
} cellProps.className,
{renderItemMenu && ( headCell.className,
<TableCell className="menu"> );
<div onClick={stopPropagation}> }
{renderItemMenu(item, store)}
</div> if (!headCell || this.showColumn(headCell)) {
</TableCell> return <TableCell key={index} {...cellProps} />;
)} }
</TableRow>
return null;
})}
{renderItemMenu && (
<TableCell className="menu">
<div onClick={stopPropagation}>
{renderItemMenu(item, store)}
</div>
</TableCell>
)}
</TableRow>
);
}}
</Observer>
</div>
); );
} }