Call onClose callback when Modal gets closed

public-ui · Oct 9, 2023 · faf0dbd · faf0dbd
1 parent 7016730
commit faf0dbd
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/packages/components/src/components/modal/component.tsx b/packages/components/src/components/modal/component.tsx
@@ -119,6 +119,14 @@ export class KolModal implements API {
 	public validateActiveElement(value?: HTMLElement | null): void {
 		watchValidator(this, '_activeElement', (value): boolean => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {
 			defaultValue: null,
+			hooks: {
+				afterPatch: () => {
+					/* Call onClose event in the _activeElement watcher because activeElement can be set internally and from the outside and closes the modal when set to null. */
+					if (this._activeElement === null && this.state._on?.onClose) {
+						this.state._on.onClose();
+					}
+				},
+			},
 		});
 	}
 

diff --git a/packages/components/src/types/modal.ts b/packages/components/src/types/modal.ts
@@ -1,5 +1,3 @@
-import { EventCallback } from './callbacks';
-
 export type KoliBriModalEventCallbacks = {
-	onClose?: EventCallback<Event>;
+	onClose?: () => void;
 };
diff --git a/packages/samples/react/src/components/modal/basic.tsx b/packages/samples/react/src/components/modal/basic.tsx
@@ -6,7 +6,7 @@ export const ModalBasic: FC = () => {
 
 	return (
 		<div>
-			<KolModal _ariaLabel="" _width="80%" ref={modalElement}>
+			<KolModal _ariaLabel="" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
 				<KolCard _heading="Ich bin ein Modal" style={{ width: '100%' }}>
 					<div slot="content">
 						<KolButton