98 lines
3 KiB
Elixir
98 lines
3 KiB
Elixir
|
defmodule ComfycampWeb.Flash do
|
||
|
|
@moduledoc """
|
||
|
|
Default flash component.
|
||
|
|
"""
|
||
|
|
use Phoenix.Component
|
||
|
|
alias Phoenix.LiveView.JS
|
||
|
|
import ComfycampWeb.Gettext
|
||
|
|
import ComfycampWeb.CoreComponents
|
||
|
|
import ComfycampWeb.Icons
|
||
|
|
|
||
|
|
@doc """
|
||
|
|
Renders flash notices.
|
||
|
|
|
||
|
|
## Examples
|
||
|
|
|
||
|
|
<.flash kind={:info} flash={@flash} />
|
||
|
|
<.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
|
||
|
|
"""
|
||
|
|
attr :id, :string, doc: "the optional id of flash container"
|
||
|
|
attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
|
||
|
|
attr :title, :string, default: nil
|
||
|
|
attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
|
||
|
|
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)
|
||
|
|
|
||
|
|
~H"""
|
||
|
|
<div
|
||
|
|
: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={[
|
||
|
|
"flash",
|
||
|
|
@kind == :info && "flash-info",
|
||
|
|
@kind == :error && "flash-error"
|
||
|
|
]}
|
||
|
|
{@rest}
|
||
|
|
>
|
||
|
|
<p :if={@title} class="flash-title">
|
||
|
|
<.icon :if={@kind == :error} name="hero-exclamation-circle" />
|
||
|
|
<.icon :if={@kind == :info} name="hero-information-circle" />
|
||
|
|
<%= @title %>
|
||
|
|
</p>
|
||
|
|
<p class="flash-body"><%= msg %></p>
|
||
|
|
<button type="button" class="flash-close-button" aria-label={gettext("close")}>
|
||
|
|
<.icon name="hero-x-mark" class="flash-close-button-icon" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
"""
|
||
|
|
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"""
|
||
|
|
<div id={@id}>
|
||
|
|
<.flash kind={:info} title={gettext("Success!")} flash={@flash} />
|
||
|
|
<.flash kind={:error} title={gettext("Error!")} flash={@flash} />
|
||
|
|
<.flash
|
||
|
|
id="client-error"
|
||
|
|
kind={:error}
|
||
|
|
title={gettext("We can't find the internet")}
|
||
|
|
phx-disconnected={show(".phx-client-error #client-error")}
|
||
|
|
phx-connected={hide("#client-error")}
|
||
|
|
hidden
|
||
|
|
>
|
||
|
|
<%= gettext("Attempting to reconnect") %>
|
||
|
|
<.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
|
||
|
|
</.flash>
|
||
|
|
|
||
|
|
<.flash
|
||
|
|
id="server-error"
|
||
|
|
kind={:error}
|
||
|
|
title={gettext("Something went wrong!")}
|
||
|
|
phx-disconnected={show(".phx-server-error #server-error")}
|
||
|
|
phx-connected={hide("#server-error")}
|
||
|
|
hidden
|
||
|
|
>
|
||
|
|
<%= gettext("Hang in there while we get back on track") %>
|
||
|
|
<.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
|
||
|
|
</.flash>
|
||
|
|
</div>
|
||
|
|
"""
|
||
|
|
end
|
||
|
|
end
|