fix(web): consistent modal escape behavior (#7677)

* fix(web): consistent modal escape behavior

* make onClose optional
This commit is contained in:
Michel Heusschen 2024-03-07 04:18:53 +01:00 committed by GitHub
parent 3da2b05428
commit 5dd11ca17a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
39 changed files with 111 additions and 123 deletions

View file

@ -1,20 +1,42 @@
import type { ActionReturn } from 'svelte/action';
interface Attributes {
/** @deprecated */
'on:outclick'?: (e: CustomEvent) => void;
/** @deprecated **/
'on:escape'?: (e: CustomEvent) => void;
}
export function clickOutside(node: HTMLElement): ActionReturn<void, Attributes> {
interface Options {
onOutclick?: () => void;
onEscape?: () => void;
}
export function clickOutside(node: HTMLElement, options: Options = {}): ActionReturn<void, Attributes> {
const { onOutclick, onEscape } = options;
const handleClick = (event: MouseEvent) => {
const targetNode = event.target as Node | null;
if (!node.contains(targetNode)) {
if (node.contains(targetNode)) {
return;
}
if (onOutclick) {
onOutclick();
} else {
node.dispatchEvent(new CustomEvent('outclick'));
}
};
const handleKey = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
if (event.key !== 'Escape') {
return;
}
if (onEscape) {
event.stopPropagation();
onEscape();
} else {
node.dispatchEvent(new CustomEvent('escape'));
}
};