From a5eefbae764b19981b7031a11c625ee13d2228f8 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Tue, 12 Apr 2022 14:35:18 -0400
Subject: [PATCH] fix list-layout.tsx and header.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../components/item-object-list/header.tsx    |  4 +-
 .../item-object-list/list-layout.tsx          | 45 ++++++++++++-------
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/renderer/components/item-object-list/header.tsx b/src/renderer/components/item-object-list/header.tsx
index ea7f26b0ea..e0d58ad3b3 100644
--- a/src/renderer/components/item-object-list/header.tsx
+++ b/src/renderer/components/item-object-list/header.tsx
@@ -28,7 +28,7 @@ export interface ItemListLayoutHeaderProps<I extends ItemObject, PreLoadStores e
   headerClassName?: IClassName;
   renderHeaderTitle?:
     | ReactNode
-    | ((parent: ItemListLayoutHeader<I, PreLoadStores>) => ReactNode);
+    | (() => ReactNode);
   customizeHeader?: HeaderCustomizer | HeaderCustomizer[];
 }
 
@@ -71,7 +71,7 @@ export class ItemListLayoutHeader<I extends ItemObject, PreLoadStores extends bo
 
     const customizeHeaderFunctions = [customizeHeader].flat().filter(isDefined);
     const renderedTitle = typeof renderHeaderTitle === "function"
-      ? renderHeaderTitle(this)
+      ? renderHeaderTitle()
       : renderHeaderTitle;
 
     const {
diff --git a/src/renderer/components/item-object-list/list-layout.tsx b/src/renderer/components/item-object-list/list-layout.tsx
index 4407327c98..6f68637938 100644
--- a/src/renderer/components/item-object-list/list-layout.tsx
+++ b/src/renderer/components/item-object-list/list-layout.tsx
@@ -72,23 +72,28 @@ export type ItemListStore<I extends ItemObject, PreLoadStores extends boolean> =
     }
 );
 
+export type RenderHeaderTitle<
+  Item extends ItemObject,
+  PreLoadStores extends boolean,
+> = ReactNode | ((parent: NonInjectedItemListLayout<Item, PreLoadStores>) => ReactNode);
+
 export type HeaderCustomizer = (placeholders: HeaderPlaceholders) => HeaderPlaceholders;
-export type ItemListLayoutProps<I extends ItemObject, PreLoadStores extends boolean = boolean> = {
+export type ItemListLayoutProps<Item extends ItemObject, PreLoadStores extends boolean = boolean> = {
   tableId?: string;
   className: IClassName;
-  getItems: () => I[];
-  store: ItemListStore<I, PreLoadStores>;
+  getItems: () => Item[];
+  store: ItemListStore<Item, PreLoadStores>;
   dependentStores?: SubscribableStore[];
   preloadStores?: boolean;
   hideFilters?: boolean;
-  searchFilters?: SearchFilter<I>[];
+  searchFilters?: SearchFilter<Item>[];
   /** @deprecated */
-  filterItems?: ItemsFilter<I>[];
+  filterItems?: ItemsFilter<Item>[];
 
   // header (title, filtering, searching, etc.)
   showHeader?: boolean;
   headerClassName?: IClassName;
-  renderHeaderTitle?: ReactNode | ((parent: NonInjectedItemListLayout<I, PreLoadStores>) => ReactNode);
+  renderHeaderTitle?: RenderHeaderTitle<Item, PreLoadStores>;
   customizeHeader?: HeaderCustomizer | HeaderCustomizer[];
 
   // items list configuration
@@ -96,23 +101,23 @@ export type ItemListLayoutProps<I extends ItemObject, PreLoadStores extends bool
   isSelectable?: boolean; // show checkbox in rows for selecting items
   isConfigurable?: boolean;
   copyClassNameFromHeadCells?: boolean;
-  sortingCallbacks?: TableSortCallbacks<I>;
-  tableProps?: Partial<TableProps<I>>; // low-level table configuration
+  sortingCallbacks?: TableSortCallbacks<Item>;
+  tableProps?: Partial<TableProps<Item>>; // low-level table configuration
   renderTableHeader?: (TableCellProps | undefined | null)[];
-  renderTableContents: (item: I) => (ReactNode | TableCellProps)[];
-  renderItemMenu?: (item: I, store: ItemListStore<I, PreLoadStores>) => ReactNode;
-  customizeTableRowProps?: (item: I) => Partial<TableRowProps<I>>;
+  renderTableContents: (item: Item) => (ReactNode | TableCellProps)[];
+  renderItemMenu?: (item: Item, store: ItemListStore<Item, PreLoadStores>) => ReactNode;
+  customizeTableRowProps?: (item: Item) => Partial<TableRowProps<Item>>;
   addRemoveButtons?: Partial<AddRemoveButtonsProps>;
   virtual?: boolean;
 
   // item details view
   hasDetailsView?: boolean;
-  detailsItem?: I;
-  onDetails?: (item: I) => void;
+  detailsItem?: Item;
+  onDetails?: (item: Item) => void;
 
   // other
-  customizeRemoveDialog?: (selectedItems: I[]) => Partial<ConfirmDialogParams>;
-  renderFooter?: (parent: NonInjectedItemListLayout<I, PreLoadStores>) => React.ReactNode;
+  customizeRemoveDialog?: (selectedItems: Item[]) => Partial<ConfirmDialogParams>;
+  renderFooter?: (parent: NonInjectedItemListLayout<Item, PreLoadStores>) => React.ReactNode;
 
   /**
    * Message to display when a store failed to load
@@ -121,7 +126,7 @@ export type ItemListLayoutProps<I extends ItemObject, PreLoadStores extends bool
    */
   failedToLoadMessage?: React.ReactNode;
 
-  filterCallbacks?: ItemsFilters<I>;
+  filterCallbacks?: ItemsFilters<Item>;
 } & (
   PreLoadStores extends true
     ? {
@@ -261,6 +266,8 @@ class NonInjectedItemListLayout<I extends ItemObject, PreLoadStores extends bool
   }
 
   render() {
+    const { renderHeaderTitle } = this.props;
+
     return untracked(() => (
       <div
         className={cssNames("ItemListLayout flex column", this.props.className)}
@@ -273,7 +280,11 @@ class NonInjectedItemListLayout<I extends ItemObject, PreLoadStores extends bool
           searchFilters={this.props.searchFilters}
           showHeader={this.props.showHeader}
           headerClassName={this.props.headerClassName}
-          renderHeaderTitle={this.props.renderHeaderTitle}
+          renderHeaderTitle={(
+            typeof renderHeaderTitle === "function"
+              ? () => renderHeaderTitle(this)
+              : renderHeaderTitle
+          )}
           customizeHeader={this.props.customizeHeader}
         />