New Events and Utils modules moved from Surface

Author: msaraiva

lib/surface/components/events.ex

@@ -0,0 +1,44 @@
+defmodule Surface.Components.Events do
+  @moduledoc false
+
+  defmacro __using__(_) do
+    quote do
+      @doc "Triggered when the component receives click"
+      prop click, :event
+
+      @doc "Triggered when a click event happens outside of the element"
+      prop click_away, :event
+
+      # TODO: Remove this when LV min is >= v0.20.15
+      @doc "Triggered when the component captures click"
+      prop capture_click, :event
+
+      @doc "Triggered when the component loses focus"
+      prop blur, :event
+
+      @doc "Triggered when the component receives focus"
+      prop focus, :event
+
+      @doc "Triggered when the page loses focus"
+      prop window_blur, :event
+
+      @doc "Triggered when the page receives focus"
+      prop window_focus, :event
+
+      @doc "Triggered when a key on the keyboard is pressed"
+      prop keydown, :event
+
+      @doc "Triggered when a key on the keyboard is released"
+      prop keyup, :event
+
+      @doc "Triggered when a key on the keyboard is pressed (window-level)"
+      prop window_keydown, :event
+
+      @doc "Triggered when a key on the keyboard is released (window-level)"
+      prop window_keyup, :event
+
+      @doc "List values that will be sent as part of the payload triggered by an event"
+      prop values, :keyword, default: []
+    end
+  end
+end

lib/surface/components/utils.ex

@@ -0,0 +1,122 @@
+defmodule Surface.Components.Utils do
+  @moduledoc false
+  import Surface, only: [event_to_opts: 2]
+
+  @valid_uri_schemes [
+    "http:",
+    "https:",
+    "ftp:",
+    "ftps:",
+    "mailto:",
+    "news:",
+    "irc:",
+    "gopher:",
+    "nntp:",
+    "feed:",
+    "telnet:",
+    "mms:",
+    "rtsp:",
+    "svn:",
+    "tel:",
+    "fax:",
+    "xmpp:"
+  ]
+
+  def valid_destination!(%URI{} = uri, context) do
+    valid_destination!(URI.to_string(uri), context)
+  end
+
+  def valid_destination!({:safe, to}, context) do
+    {:safe, valid_string_destination!(IO.iodata_to_binary(to), context)}
+  end
+
+  def valid_destination!({other, to}, _context) when is_atom(other) do
+    [Atom.to_string(other), ?:, to]
+  end
+
+  def valid_destination!(to, context) do
+    valid_string_destination!(IO.iodata_to_binary(to), context)
+  end
+
+  for scheme <- @valid_uri_schemes do
+    def valid_string_destination!(unquote(scheme) <> _ = string, _context), do: string
+  end
+
+  def valid_string_destination!(to, context) do
+    if not match?("/" <> _, to) and String.contains?(to, ":") do
+      raise ArgumentError, """
+      unsupported scheme given to #{context}. In case you want to link to an
+      unknown or unsafe scheme, such as javascript, use a tuple: {:javascript, rest}
+      """
+    else
+      to
+    end
+  end
+
+  def csrf_data(to, opts) do
+    case Keyword.pop(opts, :csrf_token, true) do
+      {csrf, opts} when is_binary(csrf) ->
+        {[csrf: csrf], opts}
+
+      {true, opts} ->
+        {[csrf: csrf_token(to)], opts}
+
+      {false, opts} ->
+        {[], opts}
+    end
+  end
+
+  defp csrf_token(to) do
+    {mod, fun, args} = Application.fetch_env!(:surface, :csrf_token_reader)
+    apply(mod, fun, [to | args])
+  end
+
+  def skip_csrf(opts) do
+    Keyword.delete(opts, :csrf_token)
+  end
+
+  def opts_to_phx_opts(opts) do
+    for {key, value} <- opts do
+      case key do
+        :trigger_action -> {:"phx-trigger-action", value}
+        _ -> {key, value}
+      end
+    end
+  end
+
+  def events_to_opts(assigns) do
+    [
+      event_to_opts(assigns.capture_click, :"phx-capture-click"),
+      event_to_opts(assigns.click, :"phx-click"),
+      event_to_opts(assigns.click_away, :"phx-click-away"),
+      event_to_opts(assigns.window_focus, :"phx-window-focus"),
+      event_to_opts(assigns.window_blur, :"phx-window-blur"),
+      event_to_opts(assigns.focus, :"phx-focus"),
+      event_to_opts(assigns.blur, :"phx-blur"),
+      event_to_opts(assigns.window_keyup, :"phx-window-keyup"),
+      event_to_opts(assigns.window_keydown, :"phx-window-keydown"),
+      event_to_opts(assigns.keyup, :"phx-keyup"),
+      event_to_opts(assigns.keydown, :"phx-keydown"),
+      values_to_opts(assigns.values)
+    ]
+    |> List.flatten()
+  end
+
+  defp values_to_opts([]) do
+    []
+  end
+
+  defp values_to_opts(values) when is_list(values) do
+    values_to_attrs(values)
+  end
+
+  defp values_to_opts(_values) do
+    []
+  end
+
+  defp values_to_attrs(values) when is_list(values) do
+    for {key, value} <- values do
+      {:"phx-value-#{key}", value}
+    end
+  end
+end

mix.lock

@@ -31,7 +31,7 @@
   "plug_crypto": {:hex, :plug_crypto, "2.1.0", "f44309c2b06d249c27c8d3f65cfe08158ade08418cf540fd4f72d4d6863abb7b", [:mix], [], "hexpm", "131216a4b030b8f8ce0f26038bc4421ae60e4bb95c5cf5395e1421437824c4fa"},
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
   "sourceror": {:hex, :sourceror, "1.0.3", "111711c147f4f1414c07a67b45ad0064a7a41569037355407eda635649507f1d", [:mix], [], "hexpm", "56c21ef146c00b51bc3bb78d1f047cb732d193256a7c4ba91eaf828d3ae826af"},
-  "surface": {:git, "https://github.com/surface-ui/surface.git", "518a471189447ccea095fb34aa348d39c1fed690", []},
+  "surface": {:git, "https://github.com/surface-ui/surface.git", "1f105ed5e00cfa58ff4f84bfa7f32256e5b728c4", []},
   "surface_catalogue": {:git, "https://github.com/surface-ui/surface_catalogue.git", "c3b79034a0d4a5b7378f1e9d510debd29e555f45", []},
   "telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"},
   "websock": {:hex, :websock, "0.5.3", "2f69a6ebe810328555b6fe5c831a851f485e303a7c8ce6c5f675abeb20ebdadc", [:mix], [], "hexpm", "6105453d7fac22c712ad66fab1d45abdf049868f253cf719b625151460b8b453"},

test/surface/components/events_test.exs

@@ -0,0 +1,205 @@
+defmodule Surface.Components.EventsTest do
+  @moduledoc """
+  Tests available events in components.
+  """
+
+  use Surface.ConnCase, async: true
+
+  defmodule ComponentWithEvents do
+    use Surface.Component
+    use Surface.Components.Events
+
+    import Surface.Components.Utils, only: [events_to_opts: 1]
+
+    def render(assigns) do
+      ~F"""
+      <div {...events_to_opts(assigns)} />
+      """
+    end
+
+    def mount(_params, session, socket) do
+      {:ok, assign(socket, changeset: session["changeset"])}
+    end
+  end
+
+  defmodule Parent do
+    use Surface.LiveComponent
+
+    def render(assigns) do
+      ~F"""
+      <div>
+        <ComponentWithEvents click="my_click" />
+      </div>
+      """
+    end
+
+    def handle_event(_, _, socket) do
+      {:noreply, socket}
+    end
+  end
+
+  # Click Events
+
+  test "click event with parent live view as target" do
+    html =
+      render_surface do
+        ~F"""
+        <ComponentWithEvents click="my_click" />
+        """
+      end
+
+    assert html =~ """
+           <div phx-click="my_click"></div>
+           """
+  end
+
+  test "click away event with parent live view as target" do
+    html =
+      render_surface do
+        ~F"""
+        <ComponentWithEvents click_away="my_click_away" />
+        """
+      end
+
+    assert html =~ """
+           <div phx-click-away="my_click_away"></div>
+           """
+  end
+
+  # Focus Events
+
+  test "blur event with parent live view as target" do
+    html =
+      render_surface do
+        ~F"""
+        <ComponentWithEvents blur="my_blur" />
+        """
+      end
+
+    assert html =~ """
+           <div phx-blur="my_blur"></div>
+           """
+  end
+
+  test "focus event with parent live view as target" do
+    html =
+      render_surface do
+        ~F"""
+        <ComponentWithEvents focus="my_focus" />
+        """
+      end
+
+    assert html =~ """
+           <div phx-focus="my_focus"></div>
+           """
+  end
+
+  test "window blur event with parent live view as target" do
+    html =
+      render_surface do
+        ~F"""
+        <ComponentWithEvents window_blur="my_blur" />
+        """
+      end
+
+    assert html =~ """
+           <div phx-window-blur="my_blur"></div>
+           """
+  end
+
+  test "window focus event with parent live view as target" do
+    html =
+      render_surface do
+        ~F"""
+        <ComponentWithEvents window_focus="my_focus" />
+        """
+      end
+
+    assert html =~ """
+           <div phx-window-focus="my_focus"></div>
+           """
+  end
+
+  # Key Events
+
+  test "keydown event with parent live view as target" do
+    html =
+      render_surface do
+        ~F"""
+        <ComponentWithEvents keydown="my_keydown" />
+        """
+      end
+
+    assert html =~ """
+           <div phx-keydown="my_keydown"></div>
+           """
+  end
+
+  test "keyup event with parent live view as target" do
+    html =
+      render_surface do
+        ~F"""
+        <ComponentWithEvents keyup="my_keyup" />
+        """
+      end
+
+    assert html =~ """
+           <div phx-keyup="my_keyup"></div>
+           """
+  end
+
+  test "window keydown event with parent live view as target" do
+    html =
+      render_surface do
+        ~F"""
+        <ComponentWithEvents window_keydown="my_keydown" />
+        """
+      end
+
+    assert html =~ """
+           <div phx-window-keydown="my_keydown"></div>
+           """
+  end
+
+  test "window keyup event with parent live view as target" do
+    html =
+      render_surface do
+        ~F"""
+        <ComponentWithEvents window_keyup="my_keyup" />
+        """
+      end
+
+    assert html =~ """
+           <div phx-window-keyup="my_keyup"></div>
+           """
+  end
+
+  test "click event with @myself as target" do
+    html =
+      render_surface do
+        ~F"""
+        <Parent id="comp" />
+        """
+      end
+
+    doc = parse_document!(html)
+
+    assert js_attribute(doc, "div > div", "phx-click") == [["push", %{"event" => "my_click", "target" => 1}]]
+  end
+
+  test "event with values" do
+    html =
+      render_surface do
+        ~F"""
+        <ComponentWithEvents click="my_click" values={hello: :world, foo: "bar", one: 2} />
+        """
+      end
+
+    # Assert: <div phx-click="my_click" phx-value-foo="bar" phx-value-hello="world" phx-value-one="2"></div>
+    doc = parse_document!(html)
+    assert attribute(doc, "phx-click") == ["my_click"]
+    assert attribute(doc, "phx-value-foo") == ["bar"]
+    assert attribute(doc, "phx-value-hello") == ["world"]
+    assert attribute(doc, "phx-value-one") == ["2"]
+  end
+end