mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
fixed non-virtual list row rendering (#4983)
This commit is contained in:
parent
8b6f8e5dc3
commit
98235d17ac
@ -68,67 +68,76 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
|
|||||||
return this.props.store.failedLoading;
|
return this.props.store.failedLoading;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@boundMethod
|
||||||
|
renderRow(item: I) {
|
||||||
|
return this.getTableRow(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
getTableRow(item: I) {
|
||||||
|
const {
|
||||||
|
isSelectable, renderTableHeader, renderTableContents, renderItemMenu,
|
||||||
|
store, hasDetailsView, onDetails,
|
||||||
|
copyClassNameFromHeadCells, customizeTableRowProps, detailsItem,
|
||||||
|
} = this.props;
|
||||||
|
const { isSelected } = store;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TableRow
|
||||||
|
nowrap
|
||||||
|
searchItem={item}
|
||||||
|
sortItem={item}
|
||||||
|
selected={detailsItem && detailsItem.getId() === item.getId()}
|
||||||
|
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];
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@boundMethod
|
@boundMethod
|
||||||
getRow(uid: string) {
|
getRow(uid: string) {
|
||||||
return (
|
return (
|
||||||
<div key={uid}>
|
<div key={uid}>
|
||||||
<Observer>
|
<Observer>
|
||||||
{() => {
|
{() => {
|
||||||
const {
|
const item = this.props.getItems().find(item => item.getId() === uid);
|
||||||
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;
|
if (!item) return null;
|
||||||
const itemId = item.getId();
|
|
||||||
|
|
||||||
return (
|
return this.getTableRow(item);
|
||||||
<TableRow
|
|
||||||
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];
|
|
||||||
|
|
||||||
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>
|
</Observer>
|
||||||
</div>
|
</div>
|
||||||
@ -248,6 +257,7 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
|
|||||||
selectable={hasDetailsView}
|
selectable={hasDetailsView}
|
||||||
sortable={sortingCallbacks}
|
sortable={sortingCallbacks}
|
||||||
getTableRow={this.getRow}
|
getTableRow={this.getRow}
|
||||||
|
renderRow={virtual ? undefined : this.renderRow}
|
||||||
items={items}
|
items={items}
|
||||||
selectedItemId={selectedItemId}
|
selectedItemId={selectedItemId}
|
||||||
noItems={this.renderNoItems()}
|
noItems={this.renderNoItems()}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user