Skip to content

Commit

Permalink
fix(core/modal): add branch for missing 'beforeDismiss' callback'
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielleroux
danielleroux committed Sep 12, 2022
1 parent 8b5cbed commit 4904c9d
Show file tree
Hide file tree
Showing 5 changed files with 15 additions and 92 deletions.
8 changes: 4 additions & 4 deletions packages/core/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/modal/modal-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
27 changes: 7 additions & 20 deletions packages/core/src/components/modal/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
h,
Host,
Method,
Prop
Prop,
} from '@stencil/core';
import anime from 'animejs';
import Animation from '../utils/animation';
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -200,32 +200,19 @@ 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
*/
@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));
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/modal/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
68 changes: 2 additions & 66 deletions packages/core/src/components/my-component/my-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,79 +5,15 @@
* 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',
styleUrl: 'my-component.scss',
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>;
}
}

0 comments on commit 4904c9d

Please sign in to comment.