feat(module:list): add option class

NG-NEST · Jul 31, 2023 · bf3cb99 · bf3cb99
1 parent 22bab47
commit bf3cb99
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 4 deletions.
diff --git a/lib/ng-nest/ui/dropdown/dropdown-portal.component.html b/lib/ng-nest/ui/dropdown/dropdown-portal.component.html
@@ -10,6 +10,7 @@
     [data]="data"
     (nodeClick)="nodeClick($event)"
     [(ngModel)]="activatedId"
+    [optionClass]="optionClass"
     (nodeMouseenter)="onEnter($event)"
     (nodeMouseleave)="onLeave()"
   ></x-list>

diff --git a/lib/ng-nest/ui/dropdown/dropdown-portal.component.ts b/lib/ng-nest/ui/dropdown/dropdown-portal.component.ts
@@ -45,6 +45,7 @@ export class XDropdownPortalComponent implements OnDestroy {
   positionChange!: Subject<any>;
   portalPositionChange: Subject<any> = new Subject();
   node!: XDropdownNode;
+  portalNode?: XDropdownNode | null;
   timeoutHide: any;
   timespan = 200;
   minWidth!: string | number;
@@ -70,6 +71,12 @@ export class XDropdownPortalComponent implements OnDestroy {
     return XIsString(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`;
   }
 
+  optionClass = (node: XDropdownNode) => {
+    return {
+      'x-dropdown-portal-hover': node.id === this.portalNode?.id
+    };
+  };
+
   @HostListener('mouseenter') mouseenter() {
     this.portalHover(true);
   }
@@ -190,10 +197,11 @@ export class XDropdownPortalComponent implements OnDestroy {
     if (this.timeoutHide) clearTimeout(this.timeoutHide);
     if (this.portalAttached() && this.node?.id !== node.id) {
       this.portal?.overlayRef?.dispose();
+      this.portalNode = null;
     }
     this.node = node;
     if (!this.portalAttached()) {
-      console.log(this.node);
+      this.portalNode = node;
       this.createPortal();
     }
     this.cdr.detectChanges();
@@ -203,6 +211,7 @@ export class XDropdownPortalComponent implements OnDestroy {
     if (this.portalAttached()) {
       this.timeoutHide = setTimeout(() => {
         this.portal?.overlayRef?.dispose();
+        this.portalNode = null;
       });
     }
   }

diff --git a/lib/ng-nest/ui/list/list-option.component.html b/lib/ng-nest/ui/list/list-option.component.html
@@ -1,6 +1,6 @@
 <div
   class="x-list-option"
-  [ngClass]="classMap"
+  [ngClass]="optionClass ? getClassMap(optionClass(node!), classMap) : classMap"
   [class.x-selected]="selected"
   [class.x-disabled]="disabled"
   [class.x-active]="active"

diff --git a/lib/ng-nest/ui/list/list-option.component.ts b/lib/ng-nest/ui/list/list-option.component.ts
@@ -21,6 +21,7 @@ import { XClassMap, XClearClass, XConfigService, XIsChange } from '@ng-nest/ui/c
 export class XListOptionComponent extends XListOptionProperty implements Highlightable {
   @HostBinding('attr.role') role = 'option';
   classMap: XClassMap = {};
+
   constructor(public elementRef: ElementRef<HTMLElement>, private cdr: ChangeDetectorRef, public configService: XConfigService) {
     super();
   }
@@ -34,6 +35,11 @@ export class XListOptionComponent extends XListOptionProperty implements Highlig
     this.classMap[`${XListOptionPrefix}-${this.size}`] = this.size ? true : false;
   }
 
+  getClassMap(optionClass: { [className: string]: boolean }, classMap: XClassMap) {
+    console.log(optionClass);
+    return { ...optionClass, ...classMap };
+  }
+
   setActiveStyles(): void {
     this.active = true;
     this.activeChange.emit(this.active);

diff --git a/lib/ng-nest/ui/list/list.component.html b/lib/ng-nest/ui/list/list.component.html
@@ -30,6 +30,7 @@
       [nodeTpl]="nodeTpl"
       [selected]="node.selected"
       [disabled]="node.disabled"
+      [optionClass]="optionClass"
       [(active)]="node.active"
       [icon]="node.icon"
       [label]="node.label"
@@ -78,6 +79,7 @@
       [selected]="node.selected"
       [disabled]="node.disabled"
       [(active)]="node.active"
+      [optionClass]="optionClass"
       [icon]="node.icon"
       [label]="node.label"
       [leaf]="node.leaf"

diff --git a/lib/ng-nest/ui/list/list.property.ts b/lib/ng-nest/ui/list/list.property.ts
@@ -140,6 +140,11 @@ export class XListProperty extends XControlValueAccessor<any> {
    * @en_US Case-sensitive
    */
   @Input() @XInputBoolean() @XWithConfig<XBoolean>(X_CONFIG_NAME, true) caseSensitive!: XBoolean;
+  /**
+   * @zh_CN 自定义数据对象样式
+   * @en_US Customize data object styles
+   */
+  @Input() optionClass?: (node: XListNode) => { [className: string]: boolean };
   /**
    * @zh_CN Full event
    * @en_US 全选事件
@@ -251,6 +256,11 @@ export class XListOptionProperty {
    * @en_US active
    */
   @Input() @XInputBoolean() active?: boolean;
+  /**
+   * @zh_CN 自定义数据对象样式
+   * @en_US Customize data object styles
+   */
+  @Input() optionClass?: (node: XListNode) => { [className: string]: boolean };
   /**
    * @zh_CN 图标
    * @en_US icon

diff --git a/src/environments/environment.ts b/src/environments/environment.ts
@@ -5,7 +5,7 @@
 export const environment = {
   production: false,
   layout: 'test',
-  defaultPage: 'anchor',
+  defaultPage: 'menu',
   static: 'http://localhost:9494'
 };
 

diff --git a/src/main/test/modules/menu/leaf/leaf.component.html b/src/main/test/modules/menu/leaf/leaf.component.html
@@ -1 +1 @@
-<x-menu [data]="data"> </x-menu>
+<x-menu [data]="data" [portalMinWidth]="150" [trigger]="'click'"> </x-menu>