WIP

thiagomajesk · Mar 21, 2023 · 6fa62aa · 6fa62aa
1 parent 17d6979
commit 6fa62aa
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/lib/swish/dialog.ex b/lib/swish/dialog.ex
@@ -1,3 +1,8 @@
+defmodule Swish.Dialog.Transitions do 
+  @moduledoc false
+  defstruct [:show_content, :hide_content, :show_backdrop, :hide_backdrop]
+end
+
 defmodule Swish.Dialog do
   @moduledoc """
   A dialog is a window overlaid on either the primary window or another dialog window.
@@ -30,12 +35,14 @@ defmodule Swish.Dialog do
 
   @type t :: %Swish.Dialog{}
 
-  @enforce_keys [:id, :portal_id, :open, :static]
-  defstruct [:id, :portal_id, :js_show, :js_hide, :open, :static]
+  @enforce_keys [:id, :portal_id, :open, :static, :close_delay, :open_delay, :transitions]
+  defstruct [:id, :portal_id, :js_show, :js_hide, :open, :static,
+    :close_delay, :open_delay, :transitions]
 
   use Phoenix.Component
 
   alias __MODULE__
+  alias Swish.Dialog
   alias Phoenix.LiveView.JS
 
   @doc false
@@ -50,21 +57,34 @@ defmodule Swish.Dialog do
       js_show: Function.capture(js_module, :show_dialog, 2),
       js_hide: Function.capture(js_module, :hide_dialog, 2),
       open: false,
-      static: false
+      static: false,
+      open_delay: 200,
+      close_delay: 200,
+      transitions: %Dialog.Transitions{}
     }
   end
 
   attr(:id, :string, required: false)
   attr(:open, :boolean, default: false)
   attr(:static, :boolean, default: false)
+  attr(:open_delay, :integer, default: 200)
+  attr(:close_delay, :integer, default: 200)
+  attr(:transitions, Dialog.Transitions, default: %Dialog.Transitions{})
+
   attr(:dialog, Dialog, required: false)
 
   attr(:rest, :global)
   slot(:inner_block, required: true)
 
   def root(assigns) do
     assigns = assign_new(assigns, :dialog, fn ->
-      %{ Dialog.new() | open: assigns.open, static: assigns.static }
+      %{ Dialog.new() | 
+        open: assigns.open,
+        static: assigns.static,
+        open_delay: assigns.open_delay,
+        close_delay: assigns.close_delay,
+        transitions: assigns.transitions
+      }
     end)
 
     ~H"""
@@ -187,8 +207,6 @@ defmodule Swish.Dialog do
   attr(:dialog, Dialog, required: true)
   attr(:target, :string, default: "body")
   attr(:update, :string, values: ~w(prepend append origin), default: "origin")
-  attr(:open_delay, :integer, default: 150)
-  attr(:close_delay, :integer, default: 300)
 
   slot(:inner_block, required: true)
 
@@ -198,8 +216,7 @@ defmodule Swish.Dialog do
       id={@dialog.portal_id}
       target={@target}
       update={@update}
-      open_delay={@open_delay}
-      close_delay={@close_delay}
+      close_delay={@dialog.close_delay}
       aria-hidden="true"
       phx-mounted={@dialog.open && show(@dialog)}
     >

diff --git a/lib/swish/js.ex b/lib/swish/js.ex
@@ -20,25 +20,23 @@ defmodule Swish.JS do
     quote do
       @behaviour Swish.JS
 
-      @impl true
       def show_dialog(js \\ %JS{}, %Swish.Dialog{} = dialog) do
         js
         |> JS.dispatch("portal:open", to: "##{dialog.portal_id}")
         |> JS.set_attribute({"data-state", "open"}, to: "##{dialog.id}-trigger")
         |> JS.set_attribute({"data-state", "open"}, to: "##{dialog.id}-backdrop")
         |> JS.set_attribute({"data-state", "open"}, to: "##{dialog.id}-content")
         |> JS.set_attribute({"aria-expanded", "true"}, to: "##{dialog.id}-trigger")
-        |> JS.show(to: "##{dialog.id}-backdrop")
-        |> JS.show(to: "##{dialog.id}-content")
+        |> JS.show(to: "##{dialog.id}-backdrop", transition: dialog.transitions.show_backdrop, time: dialog.open_delay)
+        |> JS.show(to: "##{dialog.id}-content", transition: dialog.transitions.show_content, time: dialog.open_delay)
         |> JS.focus_first(to: "##{dialog.id}-content")
       end
 
-      @impl true
       def hide_dialog(js \\ %JS{}, %Swish.Dialog{} = dialog) do
         js
         |> JS.pop_focus()
-        |> JS.hide(to: "##{dialog.id}-backdrop")
-        |> JS.hide(to: "##{dialog.id}-content")
+        |> JS.hide(to: "##{dialog.id}-backdrop", transition: dialog.transitions.hide_backdrop, time: dialog.close_delay)
+        |> JS.hide(to: "##{dialog.id}-content", transition: dialog.transitions.hide_content, time: dialog.close_delay)
         |> JS.set_attribute({"data-state", "closed"}, to: "##{dialog.id}-trigger")
         |> JS.set_attribute({"data-state", "closed"}, to: "##{dialog.id}-backdrop")
         |> JS.set_attribute({"data-state", "closed"}, to: "##{dialog.id}-content")

diff --git a/lib/swish/tag.ex b/lib/swish/tag.ex
@@ -79,7 +79,6 @@ defmodule Swish.Tag do
   attr :id, :string, required: true
   attr :target, :string, default: "body"
   attr :update, :string, values: ~w(prepend append origin), default: "origin"
-  attr :open_delay, :integer, default: 0
   attr :close_delay, :integer, default: 0
   attr :rest, :global
   slot :inner_block, required: true
@@ -91,7 +90,6 @@ defmodule Swish.Tag do
       phx-hook="Swish.Portal"
       data-target={@target}
       data-update={@update}
-      data-open-delay={@open_delay}
       data-close-delay={@close_delay}
       {@rest}
     >