From 4904c9d0f9146759a72117aa796d4dfa47e26200 Mon Sep 17 00:00:00 2001
From: Daniel Leroux <daniel.leroux@siemens.com>
Date: Mon, 12 Sep 2022 10:06:41 +0200
Subject: [PATCH] fix(core/modal): add branch for missing 'beforeDismiss'
 callback'

---
 packages/core/src/components.d.ts             |  8 +--
 .../core/src/components/modal/modal-utils.ts  |  2 +-
 packages/core/src/components/modal/modal.tsx  | 27 ++------
 packages/core/src/components/modal/readme.md  |  2 +-
 .../components/my-component/my-component.tsx  | 68 +------------------
 5 files changed, 15 insertions(+), 92 deletions(-)

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index b1883207cfd..4eecb62d302 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -852,9 +852,9 @@ export namespace Components {
          */
         "backdropClass": string;
         /**
-          * BeforeDismiss callbacl
+          * BeforeDismiss callback
          */
-        "beforeDismiss": () => boolean | Promise<boolean>;
+        "beforeDismiss": (reason?: any) => boolean | Promise<boolean>;
         /**
           * Centered modal
          */
@@ -2741,9 +2741,9 @@ declare namespace LocalJSX {
          */
         "backdropClass"?: string;
         /**
-          * BeforeDismiss callbacl
+          * BeforeDismiss callback
          */
-        "beforeDismiss"?: () => boolean | Promise<boolean>;
+        "beforeDismiss"?: (reason?: any) => boolean | Promise<boolean>;
         /**
           * Centered modal
          */
diff --git a/packages/core/src/components/modal/modal-utils.ts b/packages/core/src/components/modal/modal-utils.ts
index 8a755fd8f73..537faf5d97c 100644
--- a/packages/core/src/components/modal/modal-utils.ts
+++ b/packages/core/src/components/modal/modal-utils.ts
@@ -14,7 +14,7 @@ export interface ModalConfig {
   ariaLabelledBy?: string;
   backdrop?: boolean | 'static';
   backdropClass?: string;
-  beforeDismiss?: () => boolean | Promise<boolean>;
+  beforeDismiss?: (reason?: any) => boolean | Promise<boolean>;
   centered?: boolean;
   container?: string | HTMLElement;
   content: string | HTMLElement;
diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx
index a5cbfb33a05..bbf9605d91a 100644
--- a/packages/core/src/components/modal/modal.tsx
+++ b/packages/core/src/components/modal/modal.tsx
@@ -14,7 +14,7 @@ import {
   h,
   Host,
   Method,
-  Prop
+  Prop,
 } from '@stencil/core';
 import anime from 'animejs';
 import Animation from '../utils/animation';
@@ -55,9 +55,9 @@ export class Modal {
   @Prop() backdropClass: string;
 
   /**
-   * BeforeDismiss callbacl
+   * BeforeDismiss callback
    */
-  @Prop() beforeDismiss: () => boolean | Promise<boolean>;
+  @Prop() beforeDismiss: (reason?: any) => boolean | Promise<boolean>;
 
   /**
    * Centered modal
@@ -200,10 +200,6 @@ export class Modal {
     window.removeEventListener('keydown', this.onKeydown);
   }
 
-  private isPromise<T>(v: any): v is Promise<T> {
-    return v && v.then;
-  }
-
   /**
    * Dismiss modal instance
    * @param reason
@@ -211,21 +207,12 @@ export class Modal {
   @Method()
   async dismiss(reason?: any) {
     if (this.beforeDismiss) {
-      const dismiss = this.beforeDismiss();
-      if (this.isPromise(dismiss)) {
-        dismiss.then(
-          (result) => {
-            if (result !== false) {
-              this.slideUp(this.modalContent, () =>
-                this.dismissed.emit(reason)
-              );
-            }
-          },
-          () => {}
-        );
-      } else if (dismiss !== false) {
+      const result = await this.beforeDismiss(reason);
+      if (result !== false) {
         this.slideUp(this.modalContent, () => this.dismissed.emit(reason));
       }
+    } else {
+      this.slideUp(this.modalContent, () => this.dismissed.emit(reason));
     }
   }
 
diff --git a/packages/core/src/components/modal/readme.md b/packages/core/src/components/modal/readme.md
index 9c8d6d11528..940a64f8561 100644
--- a/packages/core/src/components/modal/readme.md
+++ b/packages/core/src/components/modal/readme.md
@@ -12,7 +12,7 @@
 | `ariaLabelledBy`   | `aria-labelled-by`   |                                                                                                                                                                              | `string`                                                                                  | `'modal-title'`    |
 | `backdrop`         | `backdrop`           | Adds a dimming layer to the modal. This should only be used when it it necessary to focus the user's attention to the dialog content (e.g. errors, warnings, complex tasks). | `"static" \| boolean`                                                                     | `true`             |
 | `backdropClass`    | `backdrop-class`     | Backdrop class                                                                                                                                                               | `string`                                                                                  | `undefined`        |
-| `beforeDismiss`    | --                   | BeforeDismiss callbacl                                                                                                                                                       | `() => boolean \| Promise<boolean>`                                                       | `undefined`        |
+| `beforeDismiss`    | --                   | BeforeDismiss callback                                                                                                                                                       | `(reason?: any) => boolean \| Promise<boolean>`                                           | `undefined`        |
 | `centered`         | `centered`           | Centered modal                                                                                                                                                               | `boolean`                                                                                 | `false`            |
 | `content`          | `content`            | Content of modal                                                                                                                                                             | `HTMLElement \| string`                                                                   | `undefined`        |
 | `headerTitle`      | `header-title`       | Header title                                                                                                                                                                 | `string`                                                                                  | `undefined`        |
diff --git a/packages/core/src/components/my-component/my-component.tsx b/packages/core/src/components/my-component/my-component.tsx
index 5fc96db179a..c55c1d64f72 100644
--- a/packages/core/src/components/my-component/my-component.tsx
+++ b/packages/core/src/components/my-component/my-component.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Component, h, Host, State } from '@stencil/core';
+import { Component, h, Host } from '@stencil/core';
 
 @Component({
   tag: 'my-component',
@@ -13,71 +13,7 @@ import { Component, h, Host, State } from '@stencil/core';
   scoped: true,
 })
 export class MyComponent {
-  @State() wasValidated = false;
-
-  private inputElement: HTMLElement;
-
-  componentDidLoad() {}
-
   render() {
-    return (
-      <Host>
-        <form
-          class={`row g-3`}
-          novalidate
-          onSubmit={(evt) => {
-            evt.preventDefault();
-
-            this.wasValidated = true;
-            this.inputElement.classList.add('is-invalid');
-          }}
-        >
-          <div class="col-md-4">
-            <label htmlFor="validationCustom01" class="form-label">
-              First name
-            </label>
-            <input
-              type="text"
-              class="form-control"
-              id="validationCustom01"
-              value=""
-            />
-            <div class="valid-feedback">Looks good!</div>
-          </div>
-          <div class="col-md-4">
-            <label htmlFor="validationCustom02" class="form-label">
-              Last name
-            </label>
-            <ix-validation-tooltip message="Error hint text">
-              <input
-                ref={(r) => (this.inputElement = r as HTMLElement)}
-                type="text"
-                class="form-control"
-                id="validationCustom02"
-                value=""
-              />
-            </ix-validation-tooltip>
-            <div class="valid-feedback">Looks good!</div>
-          </div>
-          <div class="col-md-4">
-            <label htmlFor="validationCustomUsername" class="form-label">
-              Username
-            </label>
-            <input
-              type="text"
-              class="form-control"
-              id="validationCustomUsername"
-              aria-describedby="inputGroupPrepend"
-            />
-            <div class="invalid-feedback">Please choose a username.</div>
-          </div>
-          <div class="col-12">
-            <button class="btn btn-primary" type="submit">
-              Submit form
-            </button>
-          </div>
-        </form>
-      </Host>
-    );
+    return <Host></Host>;
   }
 }