diff --git a/src/renderer/components/item-object-list/header-filters.tsx b/src/renderer/components/item-object-list/header-filters.tsx deleted file mode 100644 index 2868b3c15c7b..000000000000 --- a/src/renderer/components/item-object-list/header-filters.tsx +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Copyright (c) OpenLens Authors. All rights reserved. - * Licensed under MIT License. See LICENSE in root directory for more information. - */ -import { observer } from "mobx-react"; -import React from "react"; -import type { HeaderPlaceholders } from "./list-layout"; - -export interface ItemListLayoutHeaderFiltersProps { - headerPlaceholders: HeaderPlaceholders -} - -export const ItemListLayoutHeaderFilters = observer(({ headerPlaceholders }: ItemListLayoutHeaderFiltersProps) => ( - <> - {headerPlaceholders.filters} - -)); diff --git a/src/renderer/components/item-object-list/header-info.tsx b/src/renderer/components/item-object-list/header-info.tsx deleted file mode 100644 index 400d20a6bfbc..000000000000 --- a/src/renderer/components/item-object-list/header-info.tsx +++ /dev/null @@ -1,54 +0,0 @@ -/** - * Copyright (c) OpenLens Authors. All rights reserved. - * Licensed under MIT License. See LICENSE in root directory for more information. - */ -import React from "react"; -import { observer } from "mobx-react"; -import type { ItemObject, ItemStore } from "../../../common/item.store"; -import type { Filter } from "./page-filters.store"; -import type { HeaderPlaceholders } from "./list-layout"; - -interface ItemListLayoutHeaderInfoProps { - headerPlaceholders: HeaderPlaceholders; - getItems: () => I[]; - store: ItemStore; - getFilters: () => Filter[] - toggleFilters: () => void -} - -export const ItemListLayoutHeaderInfo = observer(({ - headerPlaceholders, - getItems, - getFilters, - store, - toggleFilters, -}: ItemListLayoutHeaderInfoProps) => { - const renderInfo = () => { - const allItemsCount = store.getTotalCount(); - const itemsCount = getItems().length; - - if (getFilters().length > 0) { - return ( - <> - Filtered: {itemsCount} / {allItemsCount} - - ); - } - - return allItemsCount === 1 - ? `${allItemsCount} item` - : `${allItemsCount} items`; - }; - - const info = headerPlaceholders.info ?? renderInfo(); - - if (!info) { - return null; - } - - return ( -
- {info} -
- ); -}); diff --git a/src/renderer/components/item-object-list/header-search.tsx b/src/renderer/components/item-object-list/header-search.tsx deleted file mode 100644 index 4e140ed34878..000000000000 --- a/src/renderer/components/item-object-list/header-search.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Copyright (c) OpenLens Authors. All rights reserved. - * Licensed under MIT License. See LICENSE in root directory for more information. - */ -import { observer } from "mobx-react"; -import type { ItemObject } from "../../../common/item.store"; -import { SearchInputUrl } from "../input"; -import React from "react"; -import type { HeaderPlaceholders, SearchFilter } from "./list-layout"; - -interface ItemListLayoutHeaderSearchProps { - searchFilters: SearchFilter[]; - headerPlaceholders: HeaderPlaceholders; -} - -export const ItemListLayoutHeaderSearch = observer(({ - searchFilters, - headerPlaceholders = {}, -}: ItemListLayoutHeaderSearchProps) => { - const { searchProps } = headerPlaceholders; - - if (searchFilters.length === 0 || !searchProps) { - return null; - } - - return ; -}); diff --git a/src/renderer/components/item-object-list/header-title.tsx b/src/renderer/components/item-object-list/header-title.tsx deleted file mode 100644 index 8afcd88e5704..000000000000 --- a/src/renderer/components/item-object-list/header-title.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Copyright (c) OpenLens Authors. All rights reserved. - * Licensed under MIT License. See LICENSE in root directory for more information. - */ -import { observer } from "mobx-react"; -import React from "react"; -import type { HeaderPlaceholders } from "./list-layout"; - -interface ItemListLayoutHeaderTitleProps { - renderHeaderTitle: React.ReactNode | (() => React.ReactNode); - headerPlaceholders: HeaderPlaceholders; -} - -export const ItemListLayoutHeaderTitle = observer(({ renderHeaderTitle, headerPlaceholders }: ItemListLayoutHeaderTitleProps) => { - if (headerPlaceholders.title) { - return <>{headerPlaceholders.title}; - } - - const title = - typeof renderHeaderTitle === "function" - ? renderHeaderTitle() - : renderHeaderTitle; - - return
{title}
; -}); diff --git a/src/renderer/components/item-object-list/header.tsx b/src/renderer/components/item-object-list/header.tsx index dd0d159720a9..ce5f19fd0534 100644 --- a/src/renderer/components/item-object-list/header.tsx +++ b/src/renderer/components/item-object-list/header.tsx @@ -10,11 +10,8 @@ import { observer } from "mobx-react"; import { cssNames, IClassName } from "../../utils"; import type { ItemObject, ItemStore } from "../../../common/item.store"; import type { Filter } from "./page-filters.store"; -import { ItemListLayoutHeaderTitle } from "./header-title"; -import { ItemListLayoutHeaderInfo } from "./header-info"; -import { ItemListLayoutHeaderFilters } from "./header-filters"; -import { ItemListLayoutHeaderSearch } from "./header-search"; -import type { HeaderCustomizer, SearchFilter } from "./list-layout"; +import type { HeaderCustomizer, HeaderPlaceholders, SearchFilter } from "./list-layout"; +import { SearchInputUrl } from "../input"; export interface ItemListLayoutHeaderProps { getItems: () => I[]; @@ -54,37 +51,54 @@ export class ItemListLayoutHeader extends React.Component< return null; } - const customizeHeaders = [customizeHeader].flat().filter(Boolean); + const renderInfo = () => { + const allItemsCount = store.getTotalCount(); + const itemsCount = getItems().length; - const headerPlaceholders = customizeHeaders.reduce( - (prevPlaceholders, customizer) => customizer(prevPlaceholders), - {}, - ); + if (getFilters().length > 0) { + return ( + <> + Filtered: {itemsCount} / {allItemsCount} + + ); + } + return allItemsCount === 1 + ? `${allItemsCount} item` + : `${allItemsCount} items`; + }; - return ( -
- - - + const customizeHeaderFunctions = [customizeHeader].flat().filter(Boolean); + const renderedTitle = typeof renderHeaderTitle === "function" + ? renderHeaderTitle(this) + : renderHeaderTitle; - + const { + filters, + info, + searchProps, + title, + } = customizeHeaderFunctions.reduce( + (prevPlaceholders, customizer) => customizer(prevPlaceholders), + { + title:
{renderedTitle}
, + info: renderInfo(), + searchProps: {}, + }, + ); - + return ( +
+ {title} + { + info && ( +
+ {info} +
+ ) + } + {filters} + {searchFilters.length > 0 && searchProps && }
); }