diff --git a/src/renderer/components/item-object-list/content.tsx b/src/renderer/components/item-object-list/content.tsx index ccfdddd7d3..5630c2b686 100644 --- a/src/renderer/components/item-object-list/content.tsx +++ b/src/renderer/components/item-object-list/content.tsx @@ -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 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 ( - onDetails(item)) : undefined} - {...customizeTableRowProps(item)} - > - {isSelectable && ( - store.toggleSelection(item))} - /> - )} - { - renderTableContents(item).map((content, index) => { - const cellProps: TableCellProps = isReactNode(content) ? { children: content } : content; - const headCell = renderTableHeader?.[index]; +
+ + {() => { + 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 ; - } + return ( + onDetails(item)) + : undefined + } + {...customizeTableRowProps(item)} + > + {isSelectable && ( + store.toggleSelection(item))} + /> + )} + {renderTableContents(item).map((content, index) => { + const cellProps: TableCellProps = isReactNode(content) + ? { children: content } + : content; + const headCell = renderTableHeader?.[index]; - return null; - }) - } - {renderItemMenu && ( - -
- {renderItemMenu(item, store)} -
-
- )} -
+ if (copyClassNameFromHeadCells && headCell) { + cellProps.className = cssNames( + cellProps.className, + headCell.className, + ); + } + + if (!headCell || this.showColumn(headCell)) { + return ; + } + + return null; + })} + {renderItemMenu && ( + +
+ {renderItemMenu(item, store)} +
+
+ )} + + ); + }} +
+
); }