feat(action-strip): Implement isMenu option #6941

IgniteUI · Apr 3, 2020 · af4eaa5 · af4eaa5
1 parent 2af9d4e
commit af4eaa5
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 13 deletions.
diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.html b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.html
@@ -1,4 +1,20 @@
+<ng-template #menuTemplate>
+    <igx-icon [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">more_vert</igx-icon>
+    <igx-drop-down #dropdown (onSelection)="onSelection($event)" (onOpening)="onOpening()">
+        <igx-drop-down-item *ngFor="let item of menuItems">
+            <div class="igx-drop-down__item-template">
+                <ng-container *ngTemplateOutlet="item.templateRef; context: {$implicit: item}";></ng-container>
+            </div>
+        </igx-drop-down-item>
+    </igx-drop-down>
+</ng-template>
+
+<ng-template #contentTemplate>
+    <ng-content #content></ng-content>
+</ng-template>
+
 <div class="igx-action-strip__overlay"
     *ngIf="!hidden">
-    <ng-content></ng-content>
+    <ng-container *ngTemplateOutlet="isMenu ? menuTemplate : contentTemplate;">
+    </ng-container>
 </div>
diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts
@@ -1,4 +1,14 @@
-import { Component, NgModule, Input, ViewContainerRef, Renderer2, HostBinding, ViewChild, ContentChild } from '@angular/core';
+import { Component,
+    NgModule,
+    Input,
+    ViewContainerRef,
+    Renderer2,
+    HostBinding,
+    ContentChild,
+    ContentChildren,
+    TemplateRef,
+    QueryList,
+    Directive } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IgxGridActionsComponent } from './grid-actions/grid-actions.component';
 import { IgxDropDownModule } from '../drop-down/index';
@@ -9,6 +19,15 @@ import { IgxGridEditingActionsComponent } from './grid-actions/grid-editing-acti
 
 let NEXT_ID = 0;
 
+@Directive({
+    selector: '[igxActionStripMenuItem]'
+})
+export class IgxActionStripMenuItemDirective {
+    constructor(
+        public templateRef: TemplateRef<any>
+    ) { }
+}
+
 /**
  * Action Strip provides templatable area for one or more actions.
  *
@@ -38,7 +57,7 @@ let NEXT_ID = 0;
 export class IgxActionStripComponent {
     constructor(
         private _viewContainer: ViewContainerRef,
-        private renderer: Renderer2) {}
+        private renderer: Renderer2) { }
 
     /**
      * An @Input property that set the visibility of the Action Strip.
@@ -69,11 +88,24 @@ export class IgxActionStripComponent {
     @HostBinding('class.igx-action-strip')
     public cssClass = 'igx-action-strip';
 
+    /**
+     * Specifies if the items into the Action Strip to be shown as menu.
+     *
+     * @example
+     * ```html
+     * <igx-action-strip #actionstrip1 [isMenu]="true">
+     *      <igx-grid-pinning-actions *IgxActionStripMenuItem [grid]="grid1"></igx-grid-pinning-actions>
+     *      <igx-grid-editing-actions *IgxActionStripMenuItem [grid]="grid1"></igx-grid-editing-actions>
+     *  </igx-action-strip>
+     */
+    @Input() isMenu = false;
+
     public context;
 
-    @ContentChild(IgxGridActionsComponent, { static: true }) public gridActions: IgxGridActionsComponent;
-    @ContentChild(IgxGridPinningActionsComponent, { static: true }) public gridPinningActions: IgxGridPinningActionsComponent;
-    @ContentChild(IgxGridEditingActionsComponent, { static: true }) public gridEditingActions: IgxGridEditingActionsComponent;
+    @ContentChild(IgxGridActionsComponent, { static: false }) public gridActions: IgxGridActionsComponent;
+    @ContentChild(IgxGridPinningActionsComponent, { static: false }) public gridPinningActions: IgxGridPinningActionsComponent;
+    @ContentChild(IgxGridEditingActionsComponent, { static: false }) public gridEditingActions: IgxGridEditingActionsComponent;
+    @ContentChildren(IgxActionStripMenuItemDirective) public menuItems: QueryList<IgxActionStripMenuItemDirective>;
 
     show(context) {
         this.context = context;
@@ -105,8 +137,18 @@ export class IgxActionStripComponent {
  * @hidden
  */
 @NgModule({
-    declarations: [IgxActionStripComponent, IgxGridActionsComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent],
-    exports: [IgxActionStripComponent, IgxGridActionsComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent],
+    declarations: [
+        IgxActionStripComponent,
+        IgxActionStripMenuItemDirective,
+        IgxGridPinningActionsComponent,
+        IgxGridEditingActionsComponent
+    ],
+    exports: [
+        IgxActionStripComponent,
+        IgxActionStripMenuItemDirective,
+        IgxGridPinningActionsComponent,
+        IgxGridEditingActionsComponent
+    ],
     imports: [CommonModule, IgxDropDownModule, IgxToggleModule, IgxIconModule]
 })
 export class IgxActionStripModule { }
diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions.component.html b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions.component.html
@@ -1,5 +1,5 @@
 <igx-icon [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">more_vert</igx-icon>
-<igx-drop-down #dropdown (onSelection)="onSelection($event)" (onOpening)="onOpen()">
+<igx-drop-down #dropdown>
     <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header">
         <div class="igx-drop-down__item-template">
             {{ item.field }}

diff --git a/src/app/action-strip/action-strip.sample.html b/src/app/action-strip/action-strip.sample.html
@@ -23,7 +23,7 @@
         <article>
             <div class="sample-column">
                 <igx-grid #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false"
-                    [rowEditable]="true" [primaryKey]="'ID'" (mouseleave)="actionstrip1.hide()">
+                    [rowEditable]="true" [primaryKey]="'ID'">
                     <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
                         [width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
                         <ng-template igxCell let-cell="cell" let-val>
@@ -33,9 +33,9 @@
                         </ng-template>
                     </igx-column>
 
-                    <igx-action-strip #actionstrip1>
-                        <igx-grid-pinning-actions [grid]="grid1"></igx-grid-pinning-actions>
-                        <igx-grid-editing-actions [grid]="grid1"></igx-grid-editing-actions>
+                    <igx-action-strip #actionstrip1 [isMenu]="true">
+                        <igx-grid-pinning-actions *IgxActionStripMenuItem [grid]="grid1"></igx-grid-pinning-actions>
+                        <igx-grid-editing-actions *IgxActionStripMenuItem [grid]="grid1"></igx-grid-editing-actions>
                     </igx-action-strip>
                 </igx-grid>
             </div>