Fixed #947

primefaces · Sep 27, 2016 · 7b61eaf · 7b61eaf
1 parent 441b692
commit 7b61eaf
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/components/splitbutton/splitbutton.css b/components/splitbutton/splitbutton.css
@@ -1,6 +1,8 @@
 .ui-splitbutton {
     position: relative;
     padding-right: 2em;
+    display: inline-block;
+    zoom: 1;
 }
 
 .ui-splitbutton .ui-button.ui-splitbutton-menubutton {
@@ -11,9 +13,8 @@
     right: 0px;
 }
 
-.ui-splitbutton {
-    display: inline-block;
-    zoom: 1;
+.ui-splitbutton.ui-state-disabled button {
+    cursor: default;
 }
 
 .ui-fluid .ui-splitbutton {

diff --git a/components/splitbutton/splitbutton.ts b/components/splitbutton/splitbutton.ts
@@ -7,20 +7,22 @@ import {Router} from '@angular/router';
 @Component({
     selector: 'p-splitButton',
     template: `
-        <div #container [ngClass]="'ui-splitbutton ui-buttonset ui-widget'" [ngStyle]="style" [class]="styleClass">
+        <div #container [ngClass]="{'ui-splitbutton ui-buttonset ui-widget':true,'ui-state-disabled':disabled}" [ngStyle]="style" [class]="styleClass">
             <button #defaultbtn type="button" class="ui-button ui-widget ui-state-default ui-corner-left"
                 [ngClass]="{'ui-button-text-only':(!icon&&label),'ui-button-icon-only':(icon&&!label),
                 'ui-button-text-icon-left':(icon&&label&&iconPos=='left'),'ui-button-text-icon-right':(icon&&label&&iconPos=='right'),
-                'ui-state-hover':hoverDefaultBtn,'ui-state-focus':focusDefaultBtn,'ui-state-active':activeDefaultBtn}"
-                (mouseenter)="hoverDefaultBtn=true" (mouseleave)="hoverDefaultBtn=false"  (focus)="focusDefaultBtn=true" (blur)="focusDefaultBtn=false"
-                (mousedown)="activeDefaultBtn=true" (mouseup)="activeDefaultBtn=false" (click)="onDefaultButtonClick($event)">
+                'ui-state-hover':hoverDefaultBtn&&!disabled,'ui-state-focus':focusDefaultBtn&&!disabled,'ui-state-active':activeDefaultBtn&&!disabled}"
+                (mouseenter)="hoverDefaultBtn=true" (mouseleave)="hoverDefaultBtn=false" (focus)="focusDefaultBtn=true" (blur)="focusDefaultBtn=false"
+                (mousedown)="activeDefaultBtn=true" (mouseup)="activeDefaultBtn=false" (click)="onDefaultButtonClick($event)"
+                [disabled]="disabled">
                 <span [ngClass]="'ui-button-icon-left ui-c fa fa-fw'" [class]="icon"></span>
                 <span class="ui-button-text ui-c">{{label}}</span>
             </button>
             <button class="ui-splitbutton-menubutton ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right" type="button"
-                [ngClass]="{'ui-state-hover':hoverDropdown,'ui-state-focus':focusDropdown,'ui-state-active':activeDropdown}"
+                [ngClass]="{'ui-state-hover':hoverDropdown&&!disabled,'ui-state-focus':focusDropdown&&!disabled,'ui-state-active':activeDropdown&&!disabled}"
                 (mouseenter)="hoverDropdown=true" (mouseleave)="hoverDropdown=false" (focus)="focusDropdown=true" (blur)="focusDropdown=false"
-                (mousedown)="activeDropdown=true" (mouseup)="activeDropdown=false" (click)="onDropdownClick($event,menu,container)">
+                (mousedown)="activeDropdown=true" (mouseup)="activeDropdown=false" (click)="onDropdownClick($event,menu,container)"
+                [disabled]="disabled">
                 <span class="ui-button-icon-left ui-c fa fa-fw fa-caret-down"></span>
                 <span class="ui-button-text ui-c">ui-button</span>
             </button>
@@ -61,6 +63,8 @@ export class SplitButton implements OnInit,OnDestroy {
     @Input() menuStyle: any;
 
     @Input() menuStyleClass: string;
+
+    @Input() disabled: boolean;
 
     protected hoverDefaultBtn: boolean;
 

diff --git a/showcase/demo/splitbutton/splitbuttondemo.html b/showcase/demo/splitbutton/splitbuttondemo.html
@@ -87,6 +87,12 @@ <h3>Attributes</h3>
                             <td>null</td>
                             <td>Style class of the overlay menu.</td>
                         </tr>
+                        <tr>
+                            <td>disabled</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>When present, it specifies that the component should be disabled.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>