mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
fix(web): consistent modal escape behavior (#7677)
* fix(web): consistent modal escape behavior * make onClose optional
This commit is contained in:
parent
3da2b05428
commit
5dd11ca17a
39 changed files with 111 additions and 123 deletions
|
|
@ -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'));
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue