* menu: add headerClass and footerClass to searchMenu.

easysoft · Aug 16, 2024 · 9d97d61 · 9d97d61
1 parent 9c0f800
commit 9d97d61
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/lib/menu/src/component/search-menu.tsx b/lib/menu/src/component/search-menu.tsx
@@ -157,14 +157,14 @@ export class SearchMenu<T extends SearchMenuOptions = SearchMenuOptions> extends
 
     protected _renderWrapperHeader(props: RenderableProps<T>): ComponentChildren {
         const hasHeader = props.header;
-        const {noMatchHint, searchBox, searchPlacement, nestedSearch} = props;
+        const {noMatchHint, searchBox, searchPlacement, nestedSearch, headerClass} = props;
         const hasTopSearchBox = (!nestedSearch || this.isRoot) && searchBox && searchPlacement !== 'bottom';
         if (!hasHeader && !hasTopSearchBox && !noMatchHint) {
             return null;
         }
         return [
             noMatchHint ? <div key="noMatchHint" className="search-menu-no-match-hint">{noMatchHint}</div> : null,
-            (hasHeader || hasTopSearchBox) ? (<header key="header" className="search-menu-header">
+            (hasHeader || hasTopSearchBox) ? (<header key="header" className={classes('search-menu-header', headerClass)}>
                 {hasHeader ? super._renderWrapperHeader(props) : null}
                 {hasTopSearchBox ? this._renderSearchBox(props) : null}
             </header>) : null,
@@ -173,13 +173,13 @@ export class SearchMenu<T extends SearchMenuOptions = SearchMenuOptions> extends
 
     protected _renderWrapperFooter(props: RenderableProps<T>): ComponentChildren {
         const hasFooter = props.footer;
-        const {searchBox, searchPlacement, nestedSearch} = props;
+        const {searchBox, searchPlacement, nestedSearch, footerClass} = props;
         const hasBottomSearchBox = (!nestedSearch || this.isRoot) && searchBox && searchPlacement === 'bottom';
         if (!hasFooter && !hasBottomSearchBox) {
             return null;
         }
         return (
-            <footer key="footer" className="search-menu-footer">
+            <footer key="footer" className={classes('search-menu-footer', footerClass)}>
                 {hasFooter ? super._renderWrapperFooter(props) : null}
                 {hasBottomSearchBox ? this._renderSearchBox(props) : null}
             </footer>

diff --git a/lib/menu/src/types/search-menu-options.ts b/lib/menu/src/types/search-menu-options.ts
@@ -1,3 +1,4 @@
+import type {ClassNameLike} from '@zui/core';
 import type {SearchBoxOptions} from '@zui/search-box';
 import type {MenuOptions} from './menu-options';
 import type {ItemKey} from '@zui/common-list';
@@ -13,6 +14,8 @@ export interface SearchMenuOptions<T extends NestedItem = NestedListItem> extend
     underlineKeys?: boolean;
     searchProps?: string[];
     noMatchHint?: string;
+    headerClass?: ClassNameLike;
+    footerClass?: ClassNameLike;
     limit?: number;
     isItemMatch?: (item: NestedItem, searchKeys: string[], index: number, parentKey: ItemKey | undefined) => boolean;
 }