migrate view helper components into core components
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
shibao 2023-03-18 00:29:51 -04:00
parent a0b93d0f46
commit 56956f37fb
5 changed files with 50 additions and 72 deletions

View File

@ -136,6 +136,39 @@ defmodule MemexWeb.CoreComponents do
""" """
end end
attr :datetime, :any, required: true, doc: "A `DateTime` struct or nil"
@doc """
Phoenix.Component for a <time> element that renders the naivedatetime in the
user's local timezone with Alpine.js
"""
def datetime(assigns)
@spec cast_datetime(NaiveDateTime.t() | nil) :: String.t()
defp cast_datetime(%NaiveDateTime{} = datetime) do
datetime |> DateTime.from_naive!("Etc/UTC") |> DateTime.to_iso8601(:extended)
end
defp cast_datetime(_datetime), do: ""
attr :date, :any, required: true, doc: "A `Date` struct or nil"
@doc """
Phoenix.Component for a <date> element that renders the Date in the user's
local timezone with Alpine.js
"""
def date(assigns)
attr :content, :string, required: true
attr :filename, :string, default: "qrcode", doc: "filename without .png extension"
attr :image_class, :string, default: "w-64 h-max"
attr :width, :integer, default: 384, doc: "width of png to generate"
@doc """
Creates a downloadable QR Code element
"""
def qr_code(assigns)
attr :note, Note, required: true attr :note, Note, required: true
def note_content(assigns) do def note_content(assigns) do

View File

@ -0,0 +1,7 @@
<time :if={@date} datetime={@date |> Date.to_iso8601(:extended)} x-data={~s<{
date:
Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'})
.format(new Date("#{Date.to_iso8601(@date, :extended)}"))
}>} x-text="date">
<%= @date |> Date.to_iso8601(:extended) %>
</time>

View File

@ -0,0 +1,7 @@
<time :if={@datetime} datetime={cast_datetime(@datetime)} x-data={~s/{
datetime:
Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
.format(new Date("#{cast_datetime(@datetime)}"))
}/} x-text="datetime">
<%= cast_datetime(@datetime) %>
</time>

View File

@ -0,0 +1,3 @@
<a href={qr_code_image(@content)} download={@filename <> ".png"}>
<img class={@image_class} alt={@filename} src={qr_code_image(@content)} />
</a>

View File

@ -7,61 +7,6 @@ defmodule MemexWeb.ViewHelpers do
use Phoenix.Component use Phoenix.Component
@doc """
Phoenix.Component for a <time> element that renders the naivedatetime in the
user's local timezone with Alpine.js
"""
attr :datetime, :any, required: true, doc: "A `DateTime` struct or nil"
def datetime(assigns) do
~H"""
<time
:if={@datetime}
datetime={cast_datetime(@datetime)}
x-data={"{
datetime:
Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
.format(new Date(\"#{cast_datetime(@datetime)}\"))
}"}
x-text="datetime"
>
<%= cast_datetime(@datetime) %>
</time>
"""
end
@spec cast_datetime(NaiveDateTime.t() | nil) :: String.t()
defp cast_datetime(%NaiveDateTime{} = datetime) do
datetime |> DateTime.from_naive!("Etc/UTC") |> DateTime.to_iso8601(:extended)
end
defp cast_datetime(_datetime), do: ""
@doc """
Phoenix.Component for a <date> element that renders the Date in the user's
local timezone with Alpine.js
"""
attr :date, :any, required: true, doc: "A `Date` struct or nil"
def date(assigns) do
~H"""
<time
:if={@date}
datetime={@date |> Date.to_iso8601(:extended)}
x-data={"{
date:
Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'})
.format(new Date(\"#{@date |> Date.to_iso8601(:extended)}\"))
}"}
x-text="date"
>
<%= @date |> Date.to_iso8601(:extended) %>
</time>
"""
end
@doc """ @doc """
Displays content in a QR code as a base64 encoded PNG Displays content in a QR code as a base64 encoded PNG
""" """
@ -76,21 +21,4 @@ defmodule MemexWeb.ViewHelpers do
"data:image/png;base64," <> img_data "data:image/png;base64," <> img_data
end end
@doc """
Creates a downloadable QR Code element
"""
attr :content, :string, required: true
attr :filename, :string, default: "qrcode", doc: "filename without .png extension"
attr :image_class, :string, default: "w-64 h-max"
attr :width, :integer, default: 384, doc: "width of png to generate"
def qr_code(assigns) do
~H"""
<a href={qr_code_image(@content)} download={@filename <> ".png"}>
<img class={@image_class} alt={@filename} src={qr_code_image(@content)} />
</a>
"""
end
end end