Merge pull request #12471 from volvachev/fix-p-button-loading

fix(primeng/p-button): incorrect work with dynamic classes, fixed duplication classes
primefaces · Jan 12, 2023 · e35946c · e35946c
2 parents 6cbc9b7 + dfa8e46
commit e35946c
Showing 1 changed file with 35 additions and 18 deletions.
diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
@@ -7,6 +7,15 @@ import { ObjectUtils } from 'primeng/utils';
 
 type ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom';
 
+const INTERNAL_BUTTON_CLASSES = {
+    button: 'p-button',
+    component: 'p-component',
+    iconOnly: 'p-button-icon-only',
+    disabled: 'p-disabled',
+    loading: 'p-button-loading',
+    labelOnly: 'p-button-loading-label-only'
+} as const;
+
 @Directive({
     selector: '[pButton]',
     host: {
@@ -66,38 +75,45 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
 
     public initialized: boolean;
 
-    public _initialStyleClass: string;
+    private get htmlElement(): HTMLElement {
+        return this.el.nativeElement as HTMLElement;
+    }
+
+    private _internalClasses: string[] = Object.values(INTERNAL_BUTTON_CLASSES);
 
     constructor(public el: ElementRef) {}
 
     ngAfterViewInit() {
-        this._initialStyleClass = this.el.nativeElement.className;
-        DomHandler.addMultipleClasses(this.el.nativeElement, this.getStyleClass());
+        DomHandler.addMultipleClasses(this.htmlElement, this.getStyleClass().join(' '));
 
         this.createIcon();
         this.createLabel();
 
         this.initialized = true;
     }
 
-    getStyleClass(): string {
-        let styleClass = 'p-button p-component';
-        if (this.icon && !this.label && ObjectUtils.isEmpty(this.el.nativeElement.textContent)) {
-            styleClass = styleClass + ' p-button-icon-only';
+    getStyleClass(): string[] {
+        const styleClass: string[] = [INTERNAL_BUTTON_CLASSES.button, INTERNAL_BUTTON_CLASSES.component];
+
+        if (this.icon && !this.label && ObjectUtils.isEmpty(this.htmlElement.textContent)) {
+            styleClass.push(INTERNAL_BUTTON_CLASSES.iconOnly);
         }
 
         if (this.loading) {
-            styleClass = styleClass + ' p-disabled p-button-loading';
-            if (!this.icon && this.label) styleClass = styleClass + ' p-button-loading-label-only';
+            styleClass.push(INTERNAL_BUTTON_CLASSES.disabled, INTERNAL_BUTTON_CLASSES.loading);
+
+            if (!this.icon && this.label) {
+                styleClass.push(INTERNAL_BUTTON_CLASSES.labelOnly);
+            }
         }
 
         return styleClass;
     }
 
     setStyleClass() {
-        let styleClass = this.getStyleClass();
-        this._initialStyleClass = this.el.nativeElement.className;
-        this.el.nativeElement.className = styleClass + ' ' + this._initialStyleClass;
+        const styleClass = this.getStyleClass();
+        this.htmlElement.classList.remove(...this._internalClasses);
+        this.htmlElement.classList.add(...styleClass);
     }
 
     createLabel() {
@@ -106,10 +122,11 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
             if (this.icon && !this.label) {
                 labelElement.setAttribute('aria-hidden', 'true');
             }
+
             labelElement.className = 'p-button-label';
             labelElement.appendChild(document.createTextNode(this.label));
 
-            this.el.nativeElement.appendChild(labelElement);
+            this.htmlElement.appendChild(labelElement);
         }
     }
 
@@ -130,26 +147,26 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
                 DomHandler.addMultipleClasses(iconElement, iconClass);
             }
 
-            this.el.nativeElement.insertBefore(iconElement, this.el.nativeElement.firstChild);
+            this.htmlElement.insertBefore(iconElement, this.htmlElement.firstChild);
         }
     }
 
     updateLabel() {
-        let labelElement = DomHandler.findSingle(this.el.nativeElement, '.p-button-label');
+        let labelElement = DomHandler.findSingle(this.htmlElement, '.p-button-label');
 
         if (!this.label) {
-            labelElement && this.el.nativeElement.removeChild(labelElement);
+            labelElement && this.htmlElement.removeChild(labelElement);
             return;
         }
 
         labelElement ? (labelElement.textContent = this.label) : this.createLabel();
     }
 
     updateIcon() {
-        let iconElement = DomHandler.findSingle(this.el.nativeElement, '.p-button-icon');
+        let iconElement = DomHandler.findSingle(this.htmlElement, '.p-button-icon');
 
         if (!this.icon && !this.loading) {
-            iconElement && this.el.nativeElement.removeChild(iconElement);
+            iconElement && this.htmlElement.removeChild(iconElement);
             return;
         }