refactor(web): remove events from clickOutside action (#9943)

2024-12-29 15:11:58 +00:00 · 2024-06-02 14:20:11 +02:00 · 2024-06-02 14:20:11 +02:00 · d1135db8cf
commit d1135db8cf
parent 5af67d159f
14 changed files with 18 additions and 61 deletions
--- a/web/src/lib/actions/click-outside.ts
+++ b/web/src/lib/actions/click-outside.ts
@ -1,19 +1,12 @@
 import { matchesShortcut } from '$lib/actions/shortcut';
 import type { ActionReturn } from 'svelte/action';

-interface Attributes {
-  /** @deprecated */
-  'on:outclick'?: (e: CustomEvent) => void;
-  /** @deprecated **/
-  'on:escape'?: (e: CustomEvent) => void;
-}
-
 interface Options {
  onOutclick?: () => void;
  onEscape?: () => void;
 }

-export function clickOutside(node: HTMLElement, options: Options = {}): ActionReturn<void, Attributes> {
+export function clickOutside(node: HTMLElement, options: Options = {}): ActionReturn {
  const { onOutclick, onEscape } = options;

  const handleClick = (event: MouseEvent) => {
@ -22,11 +15,7 @@ export function clickOutside(node: HTMLElement, options: Options = {}): ActionRe
      return;
    }

-    if (onOutclick) {
-      onOutclick();
-    } else {
-      node.dispatchEvent(new CustomEvent('outclick'));
-    }
+    onOutclick?.();
  };

  const handleKey = (event: KeyboardEvent) => {
@ -37,8 +26,6 @@ export function clickOutside(node: HTMLElement, options: Options = {}): ActionRe
    if (onEscape) {
      event.stopPropagation();
      onEscape();
-    } else {
-      node.dispatchEvent(new CustomEvent('escape'));
    }
  };

--- a/web/src/lib/components/album-page/share-info-modal.svelte
+++ b/web/src/lib/components/album-page/share-info-modal.svelte
@ -126,7 +126,7 @@
                />

                {#if selectedMenuUser === user}
-                  <ContextMenu {...position} on:outclick={() => (selectedMenuUser = null)}>
+                  <ContextMenu {...position} onClose={() => (selectedMenuUser = null)}>
                    {#if role === AlbumUserRole.Viewer}
                      <MenuOption on:click={() => handleSetReadonly(user, AlbumUserRole.Editor)} text="Allow edits" />
                    {:else}
--- a/web/src/lib/components/asset-viewer/activity-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/activity-viewer.svelte
@ -201,8 +201,7 @@
                  <button
                    type="button"
                    class="absolute right-6 rounded-xl items-center bg-gray-300 dark:bg-slate-100 py-3 px-6 text-left text-sm font-medium text-immich-fg hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg dark:hover:bg-red-100 transition-colors"
-                    use:clickOutside
-                    on:outclick={() => (showDeleteReaction[index] = false)}
+                    use:clickOutside={{ onOutclick: () => (showDeleteReaction[index] = false) }}
                    on:click={() => handleDeleteReaction(reaction, index)}
                  >
                    Remove
@ -254,8 +253,7 @@
                    <button
                      type="button"
                      class="absolute right-6 rounded-xl items-center bg-gray-300 dark:bg-slate-100 py-3 px-6 text-left text-sm font-medium text-immich-fg hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg dark:hover:bg-red-100 transition-colors"
-                      use:clickOutside
-                      on:outclick={() => (showDeleteReaction[index] = false)}
+                      use:clickOutside={{ onOutclick: () => (showDeleteReaction[index] = false) }}
                      on:click={() => handleDeleteReaction(reaction, index)}
                    >
                      Remove
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@ -795,7 +795,6 @@
      <DeleteAssetDialog
        size={1}
        on:cancel={() => (isShowDeleteConfirmation = false)}
-        on:escape={() => (isShowDeleteConfirmation = false)}
        on:confirm={() => deleteAsset()}
      />
    {/if}
--- a/web/src/lib/components/elements/dropdown.svelte
+++ b/web/src/lib/components/elements/dropdown.svelte
@ -72,7 +72,7 @@
  $: renderedSelectedOption = renderOption(selectedOption);
 </script>

-<div use:clickOutside on:outclick={handleClickOutside} on:escape={handleClickOutside}>
+<div use:clickOutside={{ onOutclick: handleClickOutside, onEscape: handleClickOutside }}>
  <!-- BUTTON TITLE -->
  <LinkButton on:click={() => (showMenu = true)} fullwidth {title}>
    <div class="flex place-items-center gap-2 text-sm">
--- a/web/src/lib/components/faces-page/people-card.svelte
+++ b/web/src/lib/components/faces-page/people-card.svelte
@ -87,7 +87,7 @@

 {#if showContextMenu}
  <Portal target="body">
-    <ContextMenu {...contextMenuPosition} on:outclick={() => onMenuExit()}>
+    <ContextMenu {...contextMenuPosition} onClose={() => onMenuExit()}>
      <MenuOption on:click={() => onMenuClick('hide-person')} icon={mdiEyeOffOutline} text="Hide person" />
      <MenuOption on:click={() => onMenuClick('change-name')} icon={mdiAccountEditOutline} text="Change name" />
      <MenuOption
--- a/web/src/lib/components/photos-page/actions/delete-assets.svelte
+++ b/web/src/lib/components/photos-page/actions/delete-assets.svelte
@ -2,7 +2,6 @@
  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { createEventDispatcher } from 'svelte';
  import { featureFlags } from '$lib/stores/server-config.store';
  import { mdiTimerSand, mdiDeleteOutline } from '@mdi/js';
  import { type OnDelete, deleteAssets } from '$lib/utils/actions';
@ -14,10 +13,6 @@

  const { clearSelect, getOwnedAssets } = getAssetControlContext();

-  const dispatch = createEventDispatcher<{
-    escape: void;
-  }>();
-
  let isShowConfirmation = false;
  let loading = false;

@ -40,11 +35,6 @@
    isShowConfirmation = false;
    loading = false;
  };
-
-  const escape = () => {
-    dispatch('escape');
-    isShowConfirmation = false;
-  };
 </script>

 {#if menuItem}
@ -60,6 +50,5 @@
    size={getOwnedAssets().size}
    on:confirm={handleDelete}
    on:cancel={() => (isShowConfirmation = false)}
-    on:escape={escape}
  />
 {/if}
--- a/web/src/lib/components/photos-page/asset-select-context-menu.svelte
+++ b/web/src/lib/components/photos-page/asset-select-context-menu.svelte
@ -25,7 +25,7 @@
  setContext(() => (showContextMenu = false));
 </script>

-<div use:clickOutside on:outclick={() => (showContextMenu = false)}>
+<div use:clickOutside={{ onOutclick: () => (showContextMenu = false) }}>
  <CircleIconButton {title} {icon} on:click={handleShowMenu} />
  {#if showContextMenu}
    <ContextMenu {...contextMenuPosition}>
--- a/web/src/lib/components/shared-components/context-menu/context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/context-menu.svelte
@ -8,6 +8,7 @@
  export let y = 0;

  export let menuElement: HTMLDivElement | undefined = undefined;
+  export let onClose: (() => void) | undefined = undefined;

  let left: number;
  let top: number;
@ -36,9 +37,7 @@
  style:top="{top}px"
  style:left="{left}px"
  role="menu"
-  use:clickOutside
-  on:outclick
-  on:escape
+  use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}
 >
  <div class="flex flex-col rounded-lg">
    <slot />
--- a/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
@ -49,14 +49,7 @@
      on:contextmenu|preventDefault={reopenContextMenu}
      role="presentation"
    >
-      <ContextMenu
-        {x}
-        {y}
-        {direction}
-        on:outclick={closeContextMenu}
-        on:escape={closeContextMenu}
-        bind:menuElement={contextMenuElement}
-      >
+      <ContextMenu {x} {y} {direction} onClose={closeContextMenu} bind:menuElement={contextMenuElement}>
        <slot />
      </ContextMenu>
    </section>
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@ -114,9 +114,10 @@
        {/if}

        <div
-          use:clickOutside
-          on:outclick={() => (shouldShowAccountInfoPanel = false)}
-          on:escape={() => (shouldShowAccountInfoPanel = false)}
+          use:clickOutside={{
+            onOutclick: () => (shouldShowAccountInfoPanel = false),
+            onEscape: () => (shouldShowAccountInfoPanel = false),
+          }}
        >
          <button
            type="button"
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -467,7 +467,7 @@
              <CircleIconButton title="Download" on:click={handleDownloadAlbum} icon={mdiFolderDownloadOutline} />

              {#if isOwned}
-                <div use:clickOutside on:outclick={() => (viewMode = ViewMode.VIEW)}>
+                <div use:clickOutside={{ onOutclick: () => (viewMode = ViewMode.VIEW) }}>
                  <CircleIconButton title="Album options" on:click={handleOpenAlbumOptions} icon={mdiDotsVertical} />
                  {#if viewMode === ViewMode.ALBUM_OPTIONS}
                    <ContextMenu {...contextMenuPosition}>
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@ -25,7 +25,6 @@
  import { preferences, user } from '$lib/stores/user.store';

  let { isViewing: showAssetViewer } = assetViewingStore;
-  let handleEscapeKey = false;
  const assetStore = new AssetStore({ isArchived: false, withStacked: true, withPartners: true });
  const assetInteractionStore = createAssetInteractionStore();
  const { isMultiSelectState, selectedAssets } = assetInteractionStore;
@ -43,10 +42,6 @@
    if ($showAssetViewer) {
      return;
    }
-    if (handleEscapeKey) {
-      handleEscapeKey = false;
-      return;
-    }
    if ($isMultiSelectState) {
      assetInteractionStore.clearMultiselect();
      return;
@ -79,11 +74,7 @@
      <ChangeDate menuItem />
      <ChangeLocation menuItem />
      <ArchiveAction menuItem onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
-      <DeleteAssets
-        menuItem
-        on:escape={() => (handleEscapeKey = true)}
-        onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)}
-      />
+      <DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
      <hr />
      <AssetJobActions />
    </AssetSelectContextMenu>
--- a/web/src/routes/admin/library-management/+page.svelte
+++ b/web/src/routes/admin/library-management/+page.svelte
@ -397,7 +397,7 @@

                  {#if showContextMenu}
                    <Portal target="body">
-                      <ContextMenu {...contextMenuPosition} on:outclick={() => onMenuExit()}>
+                      <ContextMenu {...contextMenuPosition} onClose={() => onMenuExit()}>
                        <MenuOption on:click={() => onRenameClicked()} text={`Rename`} />

                        {#if selectedLibrary}