feat(module:menu): add hover open class

NG-NEST · Aug 1, 2023 · 8e2237c · 8e2237c
1 parent bf3cb99
commit 8e2237c
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 26 deletions.
diff --git a/lib/ng-nest/ui/dropdown/dropdown-portal.component.html b/lib/ng-nest/ui/dropdown/dropdown-portal.component.html
@@ -10,7 +10,6 @@
     [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,7 +45,7 @@ export class XDropdownPortalComponent implements OnDestroy {
   positionChange!: Subject<any>;
   portalPositionChange: Subject<any> = new Subject();
   node!: XDropdownNode;
-  portalNode?: XDropdownNode | null;
+  openNode!: XDropdownNode;
   timeoutHide: any;
   timespan = 200;
   minWidth!: string | number;
@@ -71,12 +71,6 @@ 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);
   }
@@ -196,12 +190,13 @@ export class XDropdownPortalComponent implements OnDestroy {
     if (!node.leaf || node.disabled || this.childAnimating) return;
     if (this.timeoutHide) clearTimeout(this.timeoutHide);
     if (this.portalAttached() && this.node?.id !== node.id) {
+      this.changeOpenNode(false);
       this.portal?.overlayRef?.dispose();
-      this.portalNode = null;
     }
     this.node = node;
     if (!this.portalAttached()) {
-      this.portalNode = node;
+      this.openNode = node;
+      this.changeOpenNode(true);
       this.createPortal();
     }
     this.cdr.detectChanges();
@@ -210,9 +205,18 @@ export class XDropdownPortalComponent implements OnDestroy {
   onLeave() {
     if (this.portalAttached()) {
       this.timeoutHide = setTimeout(() => {
+        this.changeOpenNode(false);
         this.portal?.overlayRef?.dispose();
-        this.portalNode = null;
       });
+    } else {
+      this.changeOpenNode(false);
+    }
+  }
+
+  changeOpenNode(open: boolean) {
+    if (this.openNode) {
+      this.openNode.openPortal = open;
+      this.openNode.change && this.openNode.change();
     }
   }
 }
diff --git a/lib/ng-nest/ui/dropdown/style/mixin.scss b/lib/ng-nest/ui/dropdown/style/mixin.scss
@@ -19,6 +19,9 @@
   border-radius: $--x-border-radius;
   box-shadow: $--x-box-shadow-light;
   overflow: auto;
+  .x-open-portal {
+    background-color: $--x-background-a200;
+  }
 }
 
 @mixin dropdown-portal-child {

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

diff --git a/lib/ng-nest/ui/list/list-option.component.ts b/lib/ng-nest/ui/list/list-option.component.ts
@@ -25,6 +25,14 @@ export class XListOptionComponent extends XListOptionProperty implements Highlig
   constructor(public elementRef: ElementRef<HTMLElement>, private cdr: ChangeDetectorRef, public configService: XConfigService) {
     super();
   }
+
+  ngOnInit() {
+    if (this.node)
+      this.node.change = () => {
+        this.cdr.detectChanges();
+      };
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     const { size } = changes;
     XIsChange(size) && this.setClassMap();
@@ -35,11 +43,6 @@ 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,7 +30,7 @@
       [nodeTpl]="nodeTpl"
       [selected]="node.selected"
       [disabled]="node.disabled"
-      [optionClass]="optionClass"
+      [openPortal]="node.openPortal"
       [(active)]="node.active"
       [icon]="node.icon"
       [label]="node.label"
@@ -79,7 +79,7 @@
       [selected]="node.selected"
       [disabled]="node.disabled"
       [(active)]="node.active"
-      [optionClass]="optionClass"
+      [openPortal]="node.openPortal"
       [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,11 +140,6 @@ 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 全选事件
@@ -207,11 +202,21 @@ export interface XListNode extends XParentIdentityProperty<XListNode> {
    * @en_US Hover
    */
   hover?: boolean;
+  /**
+   * @zh_CN 打开弹框
+   * @en_US open portal
+   */
+  openPortal?: boolean;
   /**
    * @zh_CN 激活
    * @en_US Active
    */
   active?: boolean;
+  /**
+   * @zh_CN 检查更新
+   * @en_US Check for updates
+   */
+  change?: Function;
 }
 
 /**
@@ -256,6 +261,11 @@ export class XListOptionProperty {
    * @en_US active
    */
   @Input() @XInputBoolean() active?: boolean;
+  /**
+   * @zh_CN 打开弹框
+   * @en_US open portal
+   */
+  @Input() @XInputBoolean() openPortal?: boolean;
   /**
    * @zh_CN 自定义数据对象样式
    * @en_US Customize data object styles

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" [portalMinWidth]="150" [trigger]="'click'"> </x-menu>
+<x-menu [data]="data" [portalMinWidth]="150"> </x-menu>
diff --git a/src/main/test/modules/menu/leaf/leaf.component.ts b/src/main/test/modules/menu/leaf/leaf.component.ts
@@ -18,6 +18,9 @@ export class ExLeafComponent {
     { id: 10, pid: 5, label: '计算' },
     { id: 11, pid: 5, label: '网络' },
     { id: 12, pid: 5, label: '存储' },
-    { id: 13, pid: 5, label: '数据库' }
+    { id: 13, pid: 10, label: '数据库' },
+    { id: 14, pid: 10, label: '网络' },
+    { id: 15, pid: 10, label: '存储' },
+    { id: 16, pid: 10, label: '数据库' }
   ];
 }