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 list-layout.tsx and header.tsx

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-04-12 14:35:18 -04:00
parent 4555c4c12e
commit a5eefbae76
2 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/renderer/components/item-object-list/header.tsx
View File

@ -28,7 +28,7 @@ export interface ItemListLayoutHeaderProps<I extends ItemObject, PreLoadStores e
headerClassName?: IClassName; headerClassName?: IClassName;
renderHeaderTitle?: renderHeaderTitle?:
| ReactNode | ReactNode
| ((parent: ItemListLayoutHeader<I, PreLoadStores>) => ReactNode); | (() => ReactNode);
customizeHeader?: HeaderCustomizer | HeaderCustomizer[]; customizeHeader?: HeaderCustomizer | HeaderCustomizer[];
} }
@ -71,7 +71,7 @@ export class ItemListLayoutHeader<I extends ItemObject, PreLoadStores extends bo
const customizeHeaderFunctions = [customizeHeader].flat().filter(isDefined); const customizeHeaderFunctions = [customizeHeader].flat().filter(isDefined);
const renderedTitle = typeof renderHeaderTitle === "function" const renderedTitle = typeof renderHeaderTitle === "function"
? renderHeaderTitle(this) ? renderHeaderTitle()
: renderHeaderTitle; : renderHeaderTitle;
const { const {

45
src/renderer/components/item-object-list/list-layout.tsx
View File

@ -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 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; tableId?: string;
className: IClassName; className: IClassName;
getItems: () => I[]; getItems: () => Item[];
store: ItemListStore<I, PreLoadStores>; store: ItemListStore<Item, PreLoadStores>;
dependentStores?: SubscribableStore[]; dependentStores?: SubscribableStore[];
preloadStores?: boolean; preloadStores?: boolean;
hideFilters?: boolean; hideFilters?: boolean;
searchFilters?: SearchFilter<I>[]; searchFilters?: SearchFilter<Item>[];
/** @deprecated */ /** @deprecated */
filterItems?: ItemsFilter<I>[]; filterItems?: ItemsFilter<Item>[];
// header (title, filtering, searching, etc.) // header (title, filtering, searching, etc.)
showHeader?: boolean; showHeader?: boolean;
headerClassName?: IClassName; headerClassName?: IClassName;
renderHeaderTitle?: ReactNode | ((parent: NonInjectedItemListLayout<I, PreLoadStores>) => ReactNode); renderHeaderTitle?: RenderHeaderTitle<Item, PreLoadStores>;
customizeHeader?: HeaderCustomizer | HeaderCustomizer[]; customizeHeader?: HeaderCustomizer | HeaderCustomizer[];
// items list configuration // 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 isSelectable?: boolean; // show checkbox in rows for selecting items
isConfigurable?: boolean; isConfigurable?: boolean;
copyClassNameFromHeadCells?: boolean; copyClassNameFromHeadCells?: boolean;
sortingCallbacks?: TableSortCallbacks<I>; sortingCallbacks?: TableSortCallbacks<Item>;
tableProps?: Partial<TableProps<I>>; // low-level table configuration tableProps?: Partial<TableProps<Item>>; // low-level table configuration
renderTableHeader?: (TableCellProps | undefined | null)[]; renderTableHeader?: (TableCellProps | undefined | null)[];
renderTableContents: (item: I) => (ReactNode | TableCellProps)[]; renderTableContents: (item: Item) => (ReactNode | TableCellProps)[];
renderItemMenu?: (item: I, store: ItemListStore<I, PreLoadStores>) => ReactNode; renderItemMenu?: (item: Item, store: ItemListStore<Item, PreLoadStores>) => ReactNode;
customizeTableRowProps?: (item: I) => Partial<TableRowProps<I>>; customizeTableRowProps?: (item: Item) => Partial<TableRowProps<Item>>;
addRemoveButtons?: Partial<AddRemoveButtonsProps>; addRemoveButtons?: Partial<AddRemoveButtonsProps>;
virtual?: boolean; virtual?: boolean;
// item details view // item details view
hasDetailsView?: boolean; hasDetailsView?: boolean;
detailsItem?: I; detailsItem?: Item;
onDetails?: (item: I) => void; onDetails?: (item: Item) => void;
// other // other
customizeRemoveDialog?: (selectedItems: I[]) => Partial<ConfirmDialogParams>; customizeRemoveDialog?: (selectedItems: Item[]) => Partial<ConfirmDialogParams>;
renderFooter?: (parent: NonInjectedItemListLayout<I, PreLoadStores>) => React.ReactNode; renderFooter?: (parent: NonInjectedItemListLayout<Item, PreLoadStores>) => React.ReactNode;
/** /**
* Message to display when a store failed to load * 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; failedToLoadMessage?: React.ReactNode;
filterCallbacks?: ItemsFilters<I>; filterCallbacks?: ItemsFilters<Item>;
} & ( } & (
PreLoadStores extends true PreLoadStores extends true
? { ? {
@ -261,6 +266,8 @@ class NonInjectedItemListLayout<I extends ItemObject, PreLoadStores extends bool
} }
render() { render() {
const { renderHeaderTitle } = this.props;
return untracked(() => ( return untracked(() => (
<div <div
className={cssNames("ItemListLayout flex column", this.props.className)} className={cssNames("ItemListLayout flex column", this.props.className)}
@ -273,7 +280,11 @@ class NonInjectedItemListLayout<I extends ItemObject, PreLoadStores extends bool
searchFilters={this.props.searchFilters} searchFilters={this.props.searchFilters}
showHeader={this.props.showHeader} showHeader={this.props.showHeader}
headerClassName={this.props.headerClassName} headerClassName={this.props.headerClassName}
renderHeaderTitle={this.props.renderHeaderTitle} renderHeaderTitle={(
typeof renderHeaderTitle === "function"
? () => renderHeaderTitle(this)
: renderHeaderTitle
)}
customizeHeader={this.props.customizeHeader} customizeHeader={this.props.customizeHeader}
/> />