Extract actions_menu

lib/music_library_web/components/add_record_component.ex

@@ -1,8 +1,7 @@
 defmodule MusicLibraryWeb.AddRecordComponent do
   use MusicLibraryWeb, :live_component
 
-  import MusicLibraryWeb.RecordComponents,
-    only: [toggle_actions_menu: 1, close_actions_menu: 1, format_label: 1, type_label: 1]
+  import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
 
   alias MusicBrainz.ReleaseGroupSearchResult
   alias MusicLibrary.Records
@@ -88,37 +87,9 @@ defmodule MusicLibraryWeb.AddRecordComponent do
             )}
           </p>
         </div>
-        <div class="relative flex-none">
-          <button
-            type="button"
-            class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
-            aria-expanded="false"
-            aria-haspopup="true"
-            phx-click={toggle_actions_menu(@release_group.id)}
-            phx-click-away={close_actions_menu(@release_group.id)}
-          >
-            <span class="sr-only">{gettext("Choose which format to import")}</span>
-            <.icon name={@icon_name} class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
-          </button>
-          <!--
-          Dropdown menu, show/hide based on menu state.
 
-          Entering: "transition ease-out duration-100"
-            From: "transform opacity-0 scale-95"
-            To: "transform opacity-100 scale-100"
-          Leaving: "transition ease-in duration-75"
-            From: "transform opacity-100 scale-100"
-            To: "transform opacity-0 scale-95"
-        -->
-          <.focus_wrap
-            id={"actions-#{@release_group.id}"}
-            class={[
-              "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
-            ]}
-            role="menu"
-            aria-orientation="vertical"
-            aria-labelledby="options-menu-0-button"
-          >
+        <.actions_menu id={@release_group.id} background_container_target="#records > li">
+          <:links>
             <.link
               :for={format <- Records.Record.formats()}
               class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
@@ -131,8 +102,8 @@ defmodule MusicLibraryWeb.AddRecordComponent do
             >
               {format_label(format)}
             </.link>
-          </.focus_wrap>
-        </div>
+          </:links>
+        </.actions_menu>
       </div>
     </li>
     """

lib/music_library_web/components/core_components.ex

@@ -194,6 +194,57 @@ defmodule MusicLibraryWeb.CoreComponents do
     """
   end
 
+  attr :id, :string, required: true
+  attr :class, :string, default: nil
+  attr :background_container_target, :string, required: true
+  slot :links, required: true
+  slot :button, required: false
+
+  def actions_menu(assigns) do
+    ~H"""
+    <div class={["relative flex-none", @class]}>
+      <button
+        type="button"
+        class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
+        aria-expanded="false"
+        aria-haspopup="true"
+        phx-click={toggle_actions_menu(@id, @background_container_target)}
+      >
+        {render_slot(@button) || default_actions_menu_button(%{})}
+      </button>
+      <.focus_wrap
+        id={"actions-#{@id}"}
+        class={[
+          "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
+        ]}
+        role="menu"
+        aria-orientation="vertical"
+        aria-labelledby="options-menu-0-button"
+        phx-click-away={close_actions_menu(@id, @background_container_target)}
+      >
+        {render_slot(@links)}
+      </.focus_wrap>
+    </div>
+    """
+  end
+
+  defp default_actions_menu_button(assigns) do
+    ~H"""
+    <span class="sr-only">{gettext("Open options")}</span>
+    <.icon name="hero-ellipsis-vertical" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
+    """
+  end
+
+  defp toggle_actions_menu(id, background_container_target) do
+    JS.toggle(to: "#actions-#{id}")
+    |> JS.toggle_class("pointer-events-none", to: background_container_target)
+  end
+
+  defp close_actions_menu(id, background_container_target) do
+    JS.hide(to: "#actions-#{id}")
+    |> JS.remove_class("pointer-events-none", to: background_container_target)
+  end
+
   ## JS Commands
 
   def show(js \\ %JS{}, selector) do

lib/music_library_web/components/record_components.ex

@@ -95,42 +95,8 @@ defmodule MusicLibraryWeb.RecordComponents do
             </p>
           </div>
           <%!-- TODO: replace with OSS version --%>
-          <div class="relative flex-none">
-            <button
-              type="button"
-              class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
-              aria-expanded="false"
-              aria-haspopup="true"
-              phx-click={toggle_actions_menu(record.id)}
-              phx-click-away={close_actions_menu(record.id)}
-            >
-              <span class="sr-only">{gettext("Open options")}</span>
-              <.icon
-                name="hero-ellipsis-vertical"
-                class="-mt-1 h-5 w-5"
-                aria-hidden="true"
-                data-slot="icon"
-              />
-            </button>
-            <!--
-              Dropdown menu, show/hide based on menu state.
-
-              Entering: "transition ease-out duration-100"
-                From: "transform opacity-0 scale-95"
-                To: "transform opacity-100 scale-100"
-              Leaving: "transition ease-in duration-75"
-                From: "transform opacity-100 scale-100"
-                To: "transform opacity-0 scale-95"
-            -->
-            <.focus_wrap
-              id={"actions-#{record.id}"}
-              class={[
-                "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
-              ]}
-              role="menu"
-              aria-orientation="vertical"
-              aria-labelledby="options-menu-0-button"
-            >
+          <.actions_menu id={record.id} background_container_target="#records > li">
+            <:links>
               <.link
                 class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
                 role="menuitem"
@@ -185,8 +151,8 @@ defmodule MusicLibraryWeb.RecordComponents do
               >
                 {gettext("Delete")}
               </.link>
-            </.focus_wrap>
-          </div>
+            </:links>
+          </.actions_menu>
         </div>
       </li>
     </ul>
@@ -270,42 +236,8 @@ defmodule MusicLibraryWeb.RecordComponents do
             <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
               {record.title}
             </p>
-            <div class="relative flex-none mt-2">
-              <button
-                type="button"
-                class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
-                aria-expanded="false"
-                aria-haspopup="true"
-                phx-click={toggle_actions_menu(record.id)}
-                phx-click-away={close_actions_menu(record.id)}
-              >
-                <span class="sr-only">{gettext("Open options")}</span>
-                <.icon
-                  name="hero-ellipsis-vertical"
-                  class="-mt-1 h-5 w-5"
-                  aria-hidden="true"
-                  data-slot="icon"
-                />
-              </button>
-              <!--
-              Dropdown menu, show/hide based on menu state.
-
-              Entering: "transition ease-out duration-100"
-                From: "transform opacity-0 scale-95"
-                To: "transform opacity-100 scale-100"
-              Leaving: "transition ease-in duration-75"
-                From: "transform opacity-100 scale-100"
-                To: "transform opacity-0 scale-95"
-            -->
-              <.focus_wrap
-                id={"actions-#{record.id}"}
-                class={[
-                  "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
-                ]}
-                role="menu"
-                aria-orientation="vertical"
-                aria-labelledby="options-menu-0-button"
-              >
+            <.actions_menu id={record.id} background_container_target="#records > li" class="mt-2">
+              <:links>
                 <.link
                   class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
                   role="menuitem"
@@ -360,8 +292,8 @@ defmodule MusicLibraryWeb.RecordComponents do
                 >
                   {gettext("Delete")}
                 </.link>
-              </.focus_wrap>
-            </div>
+              </:links>
+            </.actions_menu>
           </div>
           <p class="pointer-events-none block text-sm font-medium text-zinc-500">
             {format_label(record.format)} · {type_label(record.type)}
@@ -450,14 +382,4 @@ defmodule MusicLibraryWeb.RecordComponents do
       country_code
     end
   end
-
-  def toggle_actions_menu(record_id) do
-    JS.toggle(to: "#actions-#{record_id}")
-    |> JS.toggle_class("pointer-events-none", to: "#records > li")
-  end
-
-  def close_actions_menu(record_id) do
-    JS.hide(to: "#actions-#{record_id}")
-    |> JS.remove_class("pointer-events-none", to: "#records > li")
-  end
 end