defmodule Liliform.Flash do use Liliform.Component alias Phoenix.LiveView.JS import FreediveWeb.Gettext import Liliform.Button import Liliform.Content import Liliform.Hero import Liliform.Media import Liliform.Title @doc """ Renders flash notices. ## Examples <.flash kind={:info} flash={@flash} /> <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back! """ attr :id, :string, doc: "the optional id of flash container" attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup" attr :title, :string, default: nil, doc: "optional title for flash message" attr :flash, :map, default: %{}, doc: "the map of flash messages to display" attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container" slot :inner_block, doc: "the optional inner block that renders the flash message" def flash(assigns) do assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end) # IO.inspect(assigns.rest) ~H""" <.hero :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)} id={@id} phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")} role="alert" class={ Enum.join( [ "is-small", @kind == :info && "is-info", @kind == :error && "is-warning" ], " " ) } {@rest} > <.media> <.media_left> <.media_content> <.content> <.title :if={@title} is-4> <%= @title %> <.subtitle is-6> <%= msg %> <.media_right is-hidden-touch> <.button aria-label={gettext("close")} phx-click={hide("##{@id}")}> """ end @doc """ Shows the flash group with standard titles and content. ## Examples <.flash_group flash={@flash} /> """ attr :flash, :map, required: true, doc: "the map of flash messages" attr :id, :string, default: "flash-group", doc: "the optional id of flash container" def flash_group(assigns) do ~H"""
<.flash kind={:info} title={gettext("Info")} flash={@flash} is-info /> <.flash kind={:error} title={gettext("Error")} flash={@flash} is-danger /> <.flash id="client-error" kind={:error} title={gettext("We can't find the internet")} phx-disconnected={show("#client-error")} phx-connected={hide("#client-error")} is-hidden is-warning > <%= gettext("Attempting to reconnect") %> <.flash id="server-error" kind={:error} title={gettext("Something went wrong!")} phx-disconnected={show("#server-error")} phx-connected={hide("#server-error")} is-hidden is-warning > <%= gettext("Hang in there while we get back on track") %>
""" end ## JS Commands def show(js \\ %JS{}, selector) do JS.remove_class(js, "is-hidden", to: selector, time: 100, transition: {"transition-all transform ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95", "opacity-100 translate-y-0 sm:scale-100"} ) end def hide(js \\ %JS{}, selector) do JS.add_class(js, "is-hidden", to: selector, time: 200, transition: {"transition-all transform ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"} ) end end