Surface.LiveComponent (surface v0.2.1) View Source

A live (stateless or stateful) component. A wrapper around Phoenix.LiveComponent.

Example

defmodule Dialog do
  use Surface.LiveComponent

  prop title, :string, required: true

  def mount(socket) do
    {:ok, assign(socket, show: false)}
  end

  def render(assigns) do
    ~H"""
    <div class={{ "modal", "is-active": @show }}>
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">{{ @title }}</p>
        </header>
        <section class="modal-card-body">
          <slot/>
        </section>
        <footer class="modal-card-foot" style="justify-content: flex-end">
          <Button click="hide">Ok</Button>
        </footer>
      </div>
    </div>
    """
  end

  # Public API

  def show(dialog_id) do
    send_update(__MODULE__, id: dialog_id, show: true)
  end

  # Event handlers

  def handle_event("show", _, socket) do
    {:noreply, assign(socket, show: true)}
  end

  def handle_event("hide", _, socket) do
    {:noreply, assign(socket, show: false)}
  end
end