fix: d-header back button and d-setting-menu props handling" (#150)

* fix: d-header back button lost of context * fix: settings menu * fix: in d-header use event instead of callback
ForkbombEu · Sep 6, 2024 · e9fb028 · e9fb028
1 parent 1c9bc19
commit e9fb028
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 52 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -94,7 +94,6 @@ export namespace Components {
     }
     interface DHeader {
         "backButton": boolean;
-        "backFunction": () => void;
         "settings": boolean;
         "settingsTitle": string;
     }
@@ -156,12 +155,9 @@ export namespace Components {
     interface DSettingsMenu {
         "accountSettings": string;
         "developedBy": string;
-        "gotoLanguageSettings": () => void;
         "languages": string;
         "logOut": string;
-        "logoutCB": () => void;
         "notificationsSettings": string;
-        "openAppSettings": () => void;
         "privacyPolicy": string;
         "securityAndAuthentication": string;
         "support": string;
@@ -211,10 +207,18 @@ export interface DFeedbackCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDFeedbackElement;
 }
+export interface DHeaderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDHeaderElement;
+}
 export interface DInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDInputElement;
 }
+export interface DSettingsMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDSettingsMenuElement;
+}
 declare global {
     interface HTMLDActivityCardElement extends Components.DActivityCard, HTMLStencilElement {
     }
@@ -351,7 +355,18 @@ declare global {
         prototype: HTMLDFeedbackElement;
         new (): HTMLDFeedbackElement;
     };
+    interface HTMLDHeaderElementEventMap {
+        "backButtonClick": void;
+    }
     interface HTMLDHeaderElement extends Components.DHeader, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDHeaderElementEventMap>(type: K, listener: (this: HTMLDHeaderElement, ev: DHeaderCustomEvent<HTMLDHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDHeaderElementEventMap>(type: K, listener: (this: HTMLDHeaderElement, ev: DHeaderCustomEvent<HTMLDHeaderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLDHeaderElement: {
         prototype: HTMLDHeaderElement;
@@ -441,7 +456,21 @@ declare global {
         prototype: HTMLDSessionCardElement;
         new (): HTMLDSessionCardElement;
     };
+    interface HTMLDSettingsMenuElementEventMap {
+        "accountSettingsClick": void;
+        "languageSettingsClick": void;
+        "appSettingsClick": void;
+        "logoutClick": void;
+    }
     interface HTMLDSettingsMenuElement extends Components.DSettingsMenu, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDSettingsMenuElementEventMap>(type: K, listener: (this: HTMLDSettingsMenuElement, ev: DSettingsMenuCustomEvent<HTMLDSettingsMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDSettingsMenuElementEventMap>(type: K, listener: (this: HTMLDSettingsMenuElement, ev: DSettingsMenuCustomEvent<HTMLDSettingsMenuElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLDSettingsMenuElement: {
         prototype: HTMLDSettingsMenuElement;
@@ -611,7 +640,7 @@ declare namespace LocalJSX {
     }
     interface DHeader {
         "backButton"?: boolean;
-        "backFunction"?: () => void;
+        "onBackButtonClick"?: (event: DHeaderCustomEvent<void>) => void;
         "settings"?: boolean;
         "settingsTitle"?: string;
     }
@@ -675,12 +704,13 @@ declare namespace LocalJSX {
     interface DSettingsMenu {
         "accountSettings"?: string;
         "developedBy"?: string;
-        "gotoLanguageSettings"?: () => void;
         "languages"?: string;
         "logOut"?: string;
-        "logoutCB"?: () => void;
         "notificationsSettings"?: string;
-        "openAppSettings"?: () => void;
+        "onAccountSettingsClick"?: (event: DSettingsMenuCustomEvent<void>) => void;
+        "onAppSettingsClick"?: (event: DSettingsMenuCustomEvent<void>) => void;
+        "onLanguageSettingsClick"?: (event: DSettingsMenuCustomEvent<void>) => void;
+        "onLogoutClick"?: (event: DSettingsMenuCustomEvent<void>) => void;
         "privacyPolicy"?: string;
         "securityAndAuthentication"?: string;
         "support"?: string;

diff --git a/src/components/header/d-header.tsx b/src/components/header/d-header.tsx
@@ -1,4 +1,4 @@
-import { Component, Host, Prop, State, h } from '@stencil/core';
+import { Component, Host, Prop, State, h, Event, EventEmitter } from '@stencil/core';
 
 @Component({
   tag: 'd-header',
@@ -9,8 +9,9 @@ export class DHeader {
   @Prop() backButton: boolean = false;
   @Prop() settings: boolean = false;
   @Prop() settingsTitle: string = 'Settings';
-  @Prop() backFunction: () => void = window.history.back;
   @State() isSettingsOpen: boolean = false;
+  @Event() backButtonClick: EventEmitter<void>;
+
 
   render() {
     return (
@@ -20,7 +21,7 @@ export class DHeader {
             <ion-toolbar>
               {this.backButton && (
                 <ion-buttons slot="start">
-                  <ion-button onClick={this.backFunction} aria-hidden>
+                  <ion-button onClick={() => this.backButtonClick.emit()}>
                     <div class="w-6 h-6 text-on" slot="icon-only">
                       <d-icon icon="arrow-back" outline />
                     </div>

diff --git a/src/components/header/readme.md b/src/components/header/readme.md
@@ -7,12 +7,18 @@
 
 ## Properties
 
-| Property        | Attribute        | Description | Type         | Default               |
-| --------------- | ---------------- | ----------- | ------------ | --------------------- |
-| `backButton`    | `back-button`    |             | `boolean`    | `false`               |
-| `backFunction`  | --               |             | `() => void` | `window.history.back` |
-| `settings`      | `settings`       |             | `boolean`    | `false`               |
-| `settingsTitle` | `settings-title` |             | `string`     | `'Settings'`          |
+| Property        | Attribute        | Description | Type      | Default      |
+| --------------- | ---------------- | ----------- | --------- | ------------ |
+| `backButton`    | `back-button`    |             | `boolean` | `false`      |
+| `settings`      | `settings`       |             | `boolean` | `false`      |
+| `settingsTitle` | `settings-title` |             | `string`  | `'Settings'` |
+
+
+## Events
+
+| Event             | Description | Type                |
+| ----------------- | ----------- | ------------------- |
+| `backButtonClick` |             | `CustomEvent<void>` |
 
 
 ## Dependencies

diff --git a/src/components/settings-menu/d-settings-menu.tsx b/src/components/settings-menu/d-settings-menu.tsx
@@ -1,44 +1,44 @@
-import { Component, Host, Prop, h } from '@stencil/core';
+import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';
 
 @Component({
   tag: 'd-settings-menu',
   styleUrl: 'd-settings-menu.css',
   shadow: true,
 })
 export class DSettingsMenu {
-  @Prop() accountSettings: string;
-  @Prop() securityAndAuthentication: string;
-  @Prop() notificationsSettings: string;
+  @Prop({ attribute: 'account-settings' }) accountSettings: string;
+  @Prop({ attribute: 'security-and-authentication' }) securityAndAuthentication: string;
+  @Prop({ attribute: 'notifications-settings' }) notificationsSettings: string;
   @Prop() languages: string;
   @Prop() support: string;
-  @Prop() privacyPolicy: string;
-  @Prop() logOut: string;
+  @Prop({ attribute: 'privacy-policy' }) privacyPolicy: string;
+  @Prop({ attribute: 'log-out' }) logOut: string;
   @Prop() version: string;
-  @Prop() developedBy: string;
-  @Prop() logoutCB: () => void;
-  @Prop() gotoAccountSettings: () => void;
-  @Prop() gotoLanguageSettings: () => void;
-  @Prop() openAppSettings: () => void;
+  @Prop({ attribute: 'developed-by' }) developedBy: string;
+  @Event() accountSettingsClick: EventEmitter<void>;
+  @Event() languageSettingsClick: EventEmitter<void>;
+  @Event() appSettingsClick: EventEmitter<void>;
+  @Event() logoutClick: EventEmitter<void>;
 
   render() {
     return (
       <Host>
         <div class="flex flex-col justify-between">
           <div class="flex flex-col gap-4">
             <d-buttons-group>
-              <d-button aria-hidden size="large" onClick={this.gotoAccountSettings}>
+              <d-button aria-hidden size="large" onClick={()=>this.accountSettingsClick.emit()}>
                 {this.accountSettings}
                 <d-icon icon="profile" slot="start" outline />
               </d-button>
               <d-button href="/" size="large" disabled>
                 {this.securityAndAuthentication}
                 <d-icon icon="lock" slot="start" outline />
               </d-button>
-              <d-button onClick={this.openAppSettings} aria-hidden size="large">
+              <d-button onClick={()=>this.appSettingsClick.emit()} aria-hidden size="large">
                 {this.notificationsSettings}
                 <d-icon icon="notification" slot="start" outline />
               </d-button>
-              <d-button onClick={this.gotoLanguageSettings} aria-hidden size="large">
+              <d-button onClick={()=>this.languageSettingsClick.emit()} aria-hidden size="large">
                 {this.languages}
                 <d-icon icon="language" slot="start" outline />
               </d-button>
@@ -54,7 +54,7 @@ export class DSettingsMenu {
               </d-button>
             </d-buttons-group>
             <d-buttons-group>
-              <d-button onClick={this.logoutCB} aria-hidden size="large">
+              <d-button onClick={()=>this.logoutClick.emit()} aria-hidden size="large">
                 {this.logOut}
                 <d-icon icon="logout" outline slot="start" />
               </d-button>

diff --git a/src/components/settings-menu/readme.md b/src/components/settings-menu/readme.md
@@ -7,20 +7,27 @@
 
 ## Properties
 
-| Property                    | Attribute                     | Description | Type         | Default     |
-| --------------------------- | ----------------------------- | ----------- | ------------ | ----------- |
-| `accountSettings`           | `account-settings`            |             | `string`     | `undefined` |
-| `developedBy`               | `developed-by`                |             | `string`     | `undefined` |
-| `gotoLanguageSettings`      | --                            |             | `() => void` | `undefined` |
-| `languages`                 | `languages`                   |             | `string`     | `undefined` |
-| `logOut`                    | `log-out`                     |             | `string`     | `undefined` |
-| `logoutCB`                  | --                            |             | `() => void` | `undefined` |
-| `notificationsSettings`     | `notifications-settings`      |             | `string`     | `undefined` |
-| `openAppSettings`           | --                            |             | `() => void` | `undefined` |
-| `privacyPolicy`             | `privacy-policy`              |             | `string`     | `undefined` |
-| `securityAndAuthentication` | `security-and-authentication` |             | `string`     | `undefined` |
-| `support`                   | `support`                     |             | `string`     | `undefined` |
-| `version`                   | `version`                     |             | `string`     | `undefined` |
+| Property                    | Attribute                     | Description | Type     | Default     |
+| --------------------------- | ----------------------------- | ----------- | -------- | ----------- |
+| `accountSettings`           | `account-settings`            |             | `string` | `undefined` |
+| `developedBy`               | `developed-by`                |             | `string` | `undefined` |
+| `languages`                 | `languages`                   |             | `string` | `undefined` |
+| `logOut`                    | `log-out`                     |             | `string` | `undefined` |
+| `notificationsSettings`     | `notifications-settings`      |             | `string` | `undefined` |
+| `privacyPolicy`             | `privacy-policy`              |             | `string` | `undefined` |
+| `securityAndAuthentication` | `security-and-authentication` |             | `string` | `undefined` |
+| `support`                   | `support`                     |             | `string` | `undefined` |
+| `version`                   | `version`                     |             | `string` | `undefined` |
+
+
+## Events
+
+| Event                   | Description | Type                |
+| ----------------------- | ----------- | ------------------- |
+| `accountSettingsClick`  |             | `CustomEvent<void>` |
+| `appSettingsClick`      |             | `CustomEvent<void>` |
+| `languageSettingsClick` |             | `CustomEvent<void>` |
+| `logoutClick`           |             | `CustomEvent<void>` |
 
 
 ## Dependencies

diff --git a/src/components/settings-menu/settings-menu.stories.ts b/src/components/settings-menu/settings-menu.stories.ts
@@ -13,9 +13,6 @@ const meta = {
     log-out="${args.logOut}"
     version="${args.version}"
     developed-by="${args.developedBy}"
-    logoutCB="${args.logoutCB}"
-    gotoLanguageSettings="${args.gotoLanguageSettings}"
-    openAppSettings="${args.openAppSettings}"
   ></d-settings-menu>`,
 } satisfies Meta<Components.DSettingsMenu>;
 
@@ -33,8 +30,5 @@ export const Default: Story = {
     logOut: 'Log out',
     version: 'Version',
     developedBy: 'Developed by',
-    logoutCB: () => {},
-    gotoLanguageSettings: () => {},
-    openAppSettings: () => {},
   },
 };