refactor(components): use LoadingController in button, button-pure, c…

…heckbox-wrapper, pin-code, radio-button-wrappera and switch | bh | #3016
porsche-design-system · Feb 13, 2024 · a0051ed · a0051ed
1 parent 6393381
commit a0051ed
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 99 deletions.
diff --git a/packages/components/src/components/button-pure/button-pure.tsx b/packages/components/src/components/button-pure/button-pure.tsx
@@ -17,7 +17,7 @@ import {
   warnIfParentIsPTextAndIconIsNone,
 } from '../../utils';
 import type { BreakpointCustomizable, PropTypes, SelectedAriaAttributes, Theme } from '../../types';
-import { Component, Element, h, Host, type JSX, Listen, Prop, Watch } from '@stencil/core';
+import { Component, Element, h, Host, type JSX, Listen, Prop } from '@stencil/core';
 import type {
   ButtonPureAlignLabel,
   ButtonPureAlignLabelDeprecated,
@@ -30,6 +30,7 @@ import type {
 import { getButtonPureAriaAttributes, warnIfIsLoadingAndIconIsNone } from './button-pure-utils';
 import { getComponentCss } from './button-pure-styles';
 import { LoadingMessage, loadingId } from '../common/loading-message/loading-message';
+import { ControllerHost, LoadingController } from '../../controllers';
 
 const propTypes: PropTypes<typeof ButtonPure> = {
   type: AllowedTypes.oneOf<ButtonPureType>(BUTTON_TYPES),
@@ -104,7 +105,8 @@ export class ButtonPure {
   /** Add ARIA attributes. */
   @Prop() public aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
 
-  private initialLoading: boolean = false;
+  private controllerHost = new ControllerHost(this);
+  private loadingCtrl = new LoadingController(this.controllerHost);
 
   private get isDisabledOrLoading(): boolean {
     return isDisabledOrLoading(this.disabled, this.loading);
@@ -118,22 +120,6 @@ export class ButtonPure {
     }
   }
 
-  @Watch('loading')
-  public loadingChanged(newVal: boolean): void {
-    if (newVal) {
-      // don't reset initialLoading to false
-      this.initialLoading = newVal;
-    }
-  }
-
-  public connectedCallback(): void {
-    this.initialLoading = this.loading;
-  }
-
-  public componentWillLoad(): void {
-    this.initialLoading = this.loading;
-  }
-
   public componentShouldUpdate(newVal: unknown, oldVal: unknown): boolean {
     return hasPropValueChanged(newVal, oldVal);
   }
@@ -219,7 +205,7 @@ export class ButtonPure {
             <slot />
           </span>
         </button>
-        <LoadingMessage loading={this.loading} initialLoading={this.initialLoading} />
+        <LoadingMessage loading={this.loading} initialLoading={this.loadingCtrl.initialLoading} />
       </Host>
     );
   }

diff --git a/packages/components/src/components/button/button.tsx b/packages/components/src/components/button/button.tsx
@@ -21,11 +21,12 @@ import {
   THEMES,
   validateProps,
 } from '../../utils';
-import { Component, Element, h, Host, type JSX, Listen, Prop, Watch } from '@stencil/core';
+import { Component, Element, h, Host, type JSX, Listen, Prop } from '@stencil/core';
 import { getButtonAriaAttributes } from './button-utils';
 import type { ButtonIcon } from './button-utils';
 import { getComponentCss } from './button-styles';
 import { loadingId, LoadingMessage } from '../common/loading-message/loading-message';
+import { ControllerHost, LoadingController } from '../../controllers';
 
 const propTypes: PropTypes<typeof Button> = {
   type: AllowedTypes.oneOf<ButtonType>(BUTTON_TYPES),
@@ -81,7 +82,8 @@ export class Button {
   /** Add ARIA attributes. */
   @Prop() public aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
 
-  private initialLoading: boolean = false;
+  private controllerHost = new ControllerHost(this);
+  private loadingCtrl = new LoadingController(this.controllerHost);
 
   @Listen('click', { capture: true })
   public onClick(e: MouseEvent): void {
@@ -90,22 +92,6 @@ export class Button {
     }
   }
 
-  @Watch('loading')
-  public loadingChanged(newVal: boolean): void {
-    if (newVal) {
-      // don't reset initialLoading to false
-      this.initialLoading = newVal;
-    }
-  }
-
-  public connectedCallback(): void {
-    this.initialLoading = this.loading;
-  }
-
-  public componentWillLoad(): void {
-    this.initialLoading = this.loading;
-  }
-
   public componentShouldUpdate(newVal: unknown, oldVal: unknown): boolean {
     return hasPropValueChanged(newVal, oldVal);
   }
@@ -164,7 +150,7 @@ export class Button {
             <slot />
           </span>
         </button>
-        <LoadingMessage loading={this.loading} initialLoading={this.initialLoading} />
+        <LoadingMessage loading={this.loading} initialLoading={this.loadingCtrl.initialLoading} />
       </Host>
     );
   }

diff --git a/packages/components/src/components/checkbox-wrapper/checkbox-wrapper.tsx b/packages/components/src/components/checkbox-wrapper/checkbox-wrapper.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, forceUpdate, h, type JSX, Listen, Prop, Watch } from '@stencil/core';
+import { Component, Element, forceUpdate, h, type JSX, Listen, Prop } from '@stencil/core';
 import {
   AllowedTypes,
   attachComponentCss,
@@ -20,6 +20,7 @@ import { type CheckboxWrapperState } from './checkbox-wrapper-utils';
 import { StateMessage } from '../common/state-message/state-message';
 import { Label } from '../common/label/label';
 import { LoadingMessage } from '../common/loading-message/loading-message';
+import { ControllerHost, LoadingController } from '../../controllers';
 
 const propTypes: PropTypes<typeof CheckboxWrapper> = {
   label: AllowedTypes.string,
@@ -55,8 +56,9 @@ export class CheckboxWrapper {
   /** Adapts the color depending on the theme. */
   @Prop() public theme?: Theme = 'light';
 
+  private controllerHost = new ControllerHost(this);
+  private loadingCtrl = new LoadingController(this.controllerHost);
   private input: HTMLInputElement;
-  private initialLoading: boolean = false;
 
   @Listen('keydown')
   public onKeydown(e: KeyboardEvent): void {
@@ -66,24 +68,14 @@ export class CheckboxWrapper {
     }
   }
 
-  @Watch('loading')
-  public loadingChanged(newVal: boolean): void {
-    if (newVal) {
-      // don't reset initialLoading to false
-      this.initialLoading = newVal;
-    }
-  }
-
   public connectedCallback(): void {
     applyCheckboxRadioButtonSafariRenderingFix(this.host);
     this.observeAttributes(); // on every reconnect
-    this.initialLoading = this.loading;
   }
 
   public componentWillLoad(): void {
     this.input = getOnlyChildOfKindHTMLElementOrThrow(this.host, 'input[type=checkbox]');
     this.observeAttributes(); // once initially
-    this.initialLoading = this.loading;
   }
 
   public componentShouldUpdate(newVal: unknown, oldVal: unknown): boolean {
@@ -132,7 +124,7 @@ export class CheckboxWrapper {
           )}
         </div>
         <StateMessage state={this.state} message={this.message} theme={this.theme} host={this.host} />
-        <LoadingMessage loading={this.loading} initialLoading={this.initialLoading} />
+        <LoadingMessage loading={this.loading} initialLoading={this.loadingCtrl.initialLoading} />
       </div>
     );
   }

diff --git a/packages/components/src/components/pin-code/pin-code.tsx b/packages/components/src/components/pin-code/pin-code.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Event, type EventEmitter, h, type JSX, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, type EventEmitter, h, type JSX, Prop } from '@stencil/core';
 import type { BreakpointCustomizable, PropTypes, Theme } from '../../types';
 import type { PinCodeLength, PinCodeState, PinCodeType, PinCodeUpdateEventDetail } from './pin-code-utils';
 import {
@@ -29,6 +29,7 @@ import { getComponentCss } from './pin-code-styles';
 import { messageId, StateMessage } from '../common/state-message/state-message';
 import { descriptionId, labelId, Label } from '../common/label/label';
 import { LoadingMessage } from '../common/loading-message/loading-message';
+import { ControllerHost, LoadingController } from '../../controllers';
 
 const propTypes: PropTypes<typeof PinCode> = {
   label: AllowedTypes.string,
@@ -95,23 +96,12 @@ export class PinCode {
   /** Emitted when selected element changes. */
   @Event({ bubbles: false }) public update: EventEmitter<PinCodeUpdateEventDetail>;
 
+  private controllerHost = new ControllerHost(this);
+  private loadingCtrl = new LoadingController(this.controllerHost);
   private form: HTMLFormElement;
   private isWithinForm: boolean;
   private hiddenInput: HTMLInputElement;
   private inputElements: HTMLInputElement[] = [];
-  private initialLoading: boolean = false;
-
-  @Watch('loading')
-  public loadingChanged(newVal: boolean): void {
-    if (newVal) {
-      // don't reset initialLoading to false
-      this.initialLoading = newVal;
-    }
-  }
-
-  public connectedCallback(): void {
-    this.initialLoading = this.loading;
-  }
 
   public componentWillLoad(): void {
     this.form = getClosestHTMLElement(this.host, 'form');
@@ -120,7 +110,6 @@ export class PinCode {
       this.hiddenInput = initHiddenInput(this.host, this.name, this.value, this.disabled, this.required);
     }
     this.value = getSanitisedValue(this.host, this.value, this.length);
-    this.initialLoading = this.loading;
   }
 
   public componentWillUpdate(): void {
@@ -190,7 +179,7 @@ export class PinCode {
         </div>
         <StateMessage state={this.state} message={this.message} theme={this.theme} host={this.host} />
         {this.isWithinForm && <slot name="internal-input" />}
-        <LoadingMessage loading={this.loading} initialLoading={this.initialLoading} />
+        <LoadingMessage loading={this.loading} initialLoading={this.loadingCtrl.initialLoading} />
       </div>
     );
   }

diff --git a/packages/components/src/components/radio-button-wrapper/radio-button-wrapper.tsx b/packages/components/src/components/radio-button-wrapper/radio-button-wrapper.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, forceUpdate, h, type JSX, Prop, Watch } from '@stencil/core';
+import { Component, Element, forceUpdate, h, type JSX, Prop } from '@stencil/core';
 import {
   AllowedTypes,
   attachComponentCss,
@@ -19,6 +19,7 @@ import { type RadioButtonWrapperState } from './radio-button-wrapper-utils';
 import { StateMessage } from '../common/state-message/state-message';
 import { Label } from '../common/label/label';
 import { LoadingMessage } from '../common/loading-message/loading-message';
+import { ControllerHost, LoadingController } from '../../controllers';
 
 const propTypes: PropTypes<typeof RadioButtonWrapper> = {
   label: AllowedTypes.string,
@@ -54,27 +55,18 @@ export class RadioButtonWrapper {
   /** Adapts the color depending on the theme. */
   @Prop() public theme?: Theme = 'light';
 
+  private controllerHost = new ControllerHost(this);
+  private loadingCtrl = new LoadingController(this.controllerHost);
   private input: HTMLInputElement;
-  private initialLoading: boolean = false;
-
-  @Watch('loading')
-  public loadingChanged(newVal: boolean): void {
-    if (newVal) {
-      // don't reset initialLoading to false
-      this.initialLoading = newVal;
-    }
-  }
 
   public connectedCallback(): void {
     applyCheckboxRadioButtonSafariRenderingFix(this.host);
     this.observeAttributes(); // on every reconnect
-    this.initialLoading = this.loading;
   }
 
   public componentWillLoad(): void {
     this.input = getOnlyChildOfKindHTMLElementOrThrow(this.host, 'input[type=radio]');
     this.observeAttributes(); // once initially
-    this.initialLoading = this.loading;
   }
 
   public componentShouldUpdate(newVal: unknown, oldVal: unknown): boolean {
@@ -124,7 +116,7 @@ export class RadioButtonWrapper {
           )}
         </div>
         <StateMessage state={this.state} message={this.message} theme={this.theme} host={this.host} />
-        <LoadingMessage loading={isLoading} initialLoading={this.initialLoading} />
+        <LoadingMessage loading={isLoading} initialLoading={this.loadingCtrl.initialLoading} />
       </div>
     );
   }

diff --git a/packages/components/src/components/switch/switch.tsx b/packages/components/src/components/switch/switch.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Event, type EventEmitter, h, Host, type JSX, Listen, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, type EventEmitter, h, Host, type JSX, Listen, Prop } from '@stencil/core';
 import type { BreakpointCustomizable, PropTypes, Theme } from '../../types';
 import {
   ALIGN_LABELS,
@@ -15,6 +15,7 @@ import { getComponentCss } from './switch-styles';
 import type { SwitchAlignLabel, SwitchAlignLabelDeprecated, SwitchUpdateEventDetail } from './switch-utils';
 import { getSwitchButtonAriaAttributes } from './switch-utils';
 import { LoadingMessage, loadingId } from '../common/loading-message/loading-message';
+import { ControllerHost, LoadingController } from '../../controllers';
 
 const propTypes: PropTypes<typeof Switch> = {
   alignLabel: AllowedTypes.breakpoint<SwitchAlignLabel>(ALIGN_LABELS),
@@ -62,7 +63,8 @@ export class Switch {
   /** Emitted when checked status is changed. */
   @Event({ bubbles: false }) public update: EventEmitter<SwitchUpdateEventDetail>;
 
-  private initialLoading: boolean = false;
+  private controllerHost = new ControllerHost(this);
+  private loadingCtrl = new LoadingController(this.controllerHost);
 
   @Listen('click', { capture: true })
   public onClick(e: MouseEvent): void {
@@ -71,22 +73,6 @@ export class Switch {
     }
   }
 
-  @Watch('loading')
-  public loadingChanged(newVal: boolean): void {
-    if (newVal) {
-      // don't reset initialLoading to false
-      this.initialLoading = newVal;
-    }
-  }
-
-  public connectedCallback(): void {
-    this.initialLoading = this.loading;
-  }
-
-  public componentWillLoad(): void {
-    this.initialLoading = this.loading;
-  }
-
   public componentShouldUpdate(newVal: unknown, oldVal: unknown): boolean {
     return hasPropValueChanged(newVal, oldVal);
   }
@@ -142,7 +128,7 @@ export class Switch {
         <label id="label" htmlFor="switch">
           <slot />
         </label>
-        <LoadingMessage loading={this.loading} initialLoading={this.initialLoading} />
+        <LoadingMessage loading={this.loading} initialLoading={this.loadingCtrl.initialLoading} />
       </Host>
     );
   }