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 { computed, makeObservable } from "mobx";
import { observer } from "mobx-react";
import { Observer, observer } from "mobx-react";
import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallbacks } from "../table";
import { boundMethod, cssNames, IClassName, isReactNode, prevDefault, stopPropagation } from "../../utils";
@ -70,58 +70,82 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
@boundMethod
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 (
<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];
<div>
<Observer>
{() => {
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 (copyClassNameFromHeadCells && headCell) {
cellProps.className = cssNames(cellProps.className, headCell.className);
}
if (!item) return null;
const itemId = item.getId();
if (!headCell || this.showColumn(headCell)) {
return <TableCell key={index} {...cellProps} />;
}
return (
<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;
})
}
{renderItemMenu && (
<TableCell className="menu">
<div onClick={stopPropagation}>
{renderItemMenu(item, store)}
</div>
</TableCell>
)}
</TableRow>
if (copyClassNameFromHeadCells && headCell) {
cellProps.className = cssNames(
cellProps.className,
headCell.className,
);
}
if (!headCell || this.showColumn(headCell)) {
return <TableCell key={index} {...cellProps} />;
}
return null;
})}
{renderItemMenu && (
<TableCell className="menu">
<div onClick={stopPropagation}>
{renderItemMenu(item, store)}
</div>
</TableCell>
)}
</TableRow>
);
}}
</Observer>
</div>
);
}