Conditionally autohide modal dialog

This commit is contained in:
Gürkan Güran 2022-09-18 21:30:57 +02:00
parent 7ce2ec12b5
commit a2cc77d952
4 changed files with 9 additions and 3 deletions

View file

@ -168,6 +168,7 @@ export namespace Components {
}
interface ElsaModalDialog {
"actions": Array<ActionDefinition>;
"autoHide": boolean;
"content": () => any;
"hide": (animate?: boolean) => Promise<void>;
"show": (animate?: boolean) => Promise<void>;
@ -829,6 +830,7 @@ declare namespace LocalJSX {
}
interface ElsaModalDialog {
"actions"?: Array<ActionDefinition>;
"autoHide"?: boolean;
"content"?: () => any;
"onActionInvoked"?: (event: CustomEvent<ActionInvokedArgs>) => void;
"onHidden"?: (event: CustomEvent<any>) => void;

View file

@ -14,6 +14,7 @@ export class ModalDialog {
@Prop() actions: Array<ActionDefinition> = [];
@Prop() size: string = 'sm:max-w-6xl';
@Prop() type: ModalType = ModalType.Default;
@Prop() autoHide: boolean = true;
@Prop() content: () => any = () => <div/>;
@Event() shown: EventEmitter;
@Event() hidden: EventEmitter;
@ -128,7 +129,8 @@ export class ModalDialog {
return <button type={buttonType}
onClick={e => {
clickHandler(e, action);
this.hideInternal(true);
if(this.autoHide)
this.hideInternal(true);
}}
class={`${cssClass} mt-3 w-full inline-flex justify-center rounded-md border shadow-sm px-4 py-2 text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm`}>
{action.text}

View file

@ -4,6 +4,7 @@ export interface ModalDialogInstance {
content: () => any;
actions: Array<ActionDefinition>;
modalType: ModalType;
autoHide: boolean;
}
export type ActionClickArgs = (e: Event, action: ActionDefinition) => void;

View file

@ -7,11 +7,12 @@ import {ModalType} from "../../../components/shared/modal-dialog";
@Service()
export class ModalDialogService {
show(content: () => any, actions?: Array<ActionDefinition>, modalType?: ModalType): ModalDialogInstance {
show(content: () => any, actions?: Array<ActionDefinition>, modalType?: ModalType, autoHide?: boolean): ModalDialogInstance {
const newInstance: ModalDialogInstance = {
content: content,
actions: actions ?? [],
modalType: modalType ?? ModalType.Default
modalType: modalType ?? ModalType.Default,
autoHide: autoHide ?? true
};
let instances: Array<ModalDialogInstance> = state.instances;