feat(dropdown): Adding disabled option #984

IgniteUI · Apr 23, 2018 · 0134477 · 0134477
1 parent c95e8bc
commit 0134477
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 9 deletions.
diff --git a/demos/app/drop-down/sample.component.html b/demos/app/drop-down/sample.component.html
@@ -1,7 +1,7 @@
 <button (click)="toggleDropDown()">Toggle</button>
-<igx-drop-down [width]="width" (itemClicked)="itemClicked($event)" (onSelection)="onSelection($event)">
-    <igx-drop-down-item *ngFor="let item of items">
-        {{ item }}
+<igx-drop-down (itemClicked)="itemClicked($event)">
+    <igx-drop-down-item *ngFor="let item of items" isDisabled={{item.disabled}}>
+        {{ item.field }}
     </igx-drop-down-item>
     <igx-drop-down-item isSelected="true">Selected</igx-drop-down-item>
 </igx-drop-down>
diff --git a/demos/app/drop-down/sample.component.ts b/demos/app/drop-down/sample.component.ts
@@ -10,12 +10,16 @@ export class DropDownSampleComponent {
     @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;
 
     itemsCount = 10;
-    items: any[] = [];
+    items: any[] = [
+        { field: "Cables" },
+        { field: "Switches", disabled: true },
+        { field: "Batteries" }
+    ];
 
     constructor() {
-        for (let i = 0; i < this.itemsCount; i += 1) {
-            this.items.push("Item " + i);
-        }
+        //for (let i = 0; i < this.itemsCount; i += 1) {
+        //    this.items.push("Item " + i);
+        //}
     }
 
     public toggleDropDown() {

diff --git a/src/drop-down/dropDownItem.component.ts b/src/drop-down/dropDownItem.component.ts
@@ -7,10 +7,12 @@ import { IgxDropDownComponent, ISelectionEventArgs } from "./dropDown.component"
     styles: [
         ":host { display: block; }",
         ":host.selected { background-color: #1A73E8; }",
-        ":host.focused { border: 1px solid #8bb8f4; }"
+        ":host.focused { border: 1px solid #8bb8f4; }",
+        ":host.disabled { background-color: grey; }"
     ]
 })
 export class IgxDropDownItemComponent implements OnInit {
+    private _disabled = false;
     get isSelected() {
         return this.dropDown.selectedItem === this;
     }
@@ -26,11 +28,28 @@ export class IgxDropDownItemComponent implements OnInit {
         this.dropDown.onSelection.emit(args);
     }
 
+    get isDisabled() {
+        return this._disabled;
+    }
+
+    @Input() set isDisabled(value: boolean) {
+        if (this._disabled === value) {
+            return;
+        }
+
+        this._disabled = value;
+    }
+
     @HostBinding("class.selected")
     get selectedStyle(): boolean {
         return this.isSelected;
     }
 
+    @HostBinding("class.disabled")
+    get disabledStyle(): boolean {
+        return this.isDisabled;
+    }
+
     @HostBinding("class.focused")
     public isFocused = false;
 
@@ -40,7 +59,9 @@ export class IgxDropDownItemComponent implements OnInit {
     ) { }
 
     @HostListener("click", ["$event"]) clicked(event) {
-        this.dropDown.itemClicked.emit(this);
+        if (this.isDisabled) {
+            return;
+        }
         const oldSelection = this.dropDown.selectedItem;
         this.dropDown.selectedItem = this;
         this.dropDown._initialSelectionChanged = true;