Hakumi :: Rails ViewComponents

Basic Messages

Trigger the default message types with programmatic rendering.

Code

<%= render(Hakumi::Space::Component.new) do %>
  <%= render(Hakumi::Button::Component.new(id: "message-basic-info", type: :primary)) { "Info" } %>
  <%= render(Hakumi::Button::Component.new(id: "message-basic-success", type: :primary, style: "background-color: #52c41a; border-color: #52c41a;")) { "Success" } %>
  <%= render(Hakumi::Button::Component.new(id: "message-basic-warning", type: :primary, style: "background-color: #faad14; border-color: #faad14;")) { "Warning" } %>
  <%= render(Hakumi::Button::Component.new(id: "message-basic-error", type: :primary, danger: true)) { "Error" } %>
<% end %>

<script>
  (() => {
    const buttons = [
      { id: "message-basic-info", type: "info", message: "Here is an informational message" },
      { id: "message-basic-success", type: "success", message: "This is a success message" },
      { id: "message-basic-warning", type: "warning", message: "Warning: please check your input" },
      { id: "message-basic-error", type: "error", message: "Something went wrong" }
    ]

    const wire = () => {
      if (!window.HakumiComponents?.renderComponent) return false

      const trigger = (type, message) => {
        window.HakumiComponents.renderComponent("message", {
          params: {
            id: "message-basic",
            type,
            message,
            duration: 3,
            max_count: 4
          }
        })
      }

      buttons.forEach(({ id, type, message }) => {
        document.getElementById(id)?.addEventListener("click", () => trigger(type, message))
      })

      return true
    }

    if (wire()) return

    const onReady = () => {
      if (wire()) {
        document.removeEventListener("turbo:load", onReady)
        window.removeEventListener("load", onReady)
      }
    }

    document.addEventListener("turbo:load", onReady)
    window.addEventListener("load", onReady)
  })()
</script>

Loading & Queue

Display a loading message and update it, or queue multiple messages.

Code

<%= render(Hakumi::Space::Component.new) do %>
  <%= render(Hakumi::Button::Component.new(id: "message-loading", type: :primary)) { "Start Loading" } %>
  <%= render(Hakumi::Button::Component.new(id: "message-queue", type: :default)) { "Queue Messages" } %>
<% end %>

<script>
  (() => {
    const loadingButton = document.getElementById("message-loading")
    const queueButton = document.getElementById("message-queue")
    if (!loadingButton || !queueButton) return

    const wire = () => {
      if (!window.HakumiComponents?.renderComponent) return false

      loadingButton.addEventListener("click", () => {
        const key = "message-loading-key"
        window.HakumiComponents.renderComponent("message", {
          params: {
            id: "message-demo",
            key,
            type: "loading",
            message: "Loading request...",
            duration: 0
          }
        })

        setTimeout(() => {
          window.HakumiComponents.renderComponent("message", {
            params: {
              id: "message-demo",
              key,
              type: "success",
              message: "Request finished",
              duration: 2
            }
          })
        }, 1500)
      })

      queueButton.addEventListener("click", () => {
        [
          { type: "info", message: "Queued message 1" },
          { type: "success", message: "Queued message 2" },
          { type: "warning", message: "Queued message 3" }
        ].forEach((payload, index) => {
          setTimeout(() => {
            window.HakumiComponents.renderComponent("message", {
              params: {
                id: "message-demo",
                ...payload,
                duration: 2,
                max_count: 5
              }
            })
          }, index * 250)
        })
      })

      return true
    }

    if (wire()) return

    const onReady = () => {
      if (wire()) {
        document.removeEventListener("turbo:load", onReady)
        window.removeEventListener("load", onReady)
      }
    }

    document.addEventListener("turbo:load", onReady)
    window.addEventListener("load", onReady)
  })()
</script>

Message API

Prop	Type	Default	Description
`message`	`String`	`-`	Message text content.
`type`	`Symbol`	`:info`	Message type (:success, :info, :warning, :error, :loading).
`duration`	`Number`	`3`	Seconds before auto close. Use 0 to persist.
`key`	`String`	`-`	Unique key for updating an existing message.
`icon`	`String`	`-`	Override the icon (success/info/warning/error/loading).
`closable`	`Boolean`	`false`	Show a close button.
`max_count`	`Number`	`-`	Maximum queued messages before removing the oldest.
`top`	`Number`	`16`	Top offset in pixels for the message stack.
`**html_options`	`Keyword args`	`-`	Extra HTML attributes for the container.

JavaScript API

Methods available on the DOM element via <code>element.hakumiMessage</code>.

Prop	Type	Default	Description
`open(options)`	`Function`	`-`	Open or update a message with the provided options.
`success(content, options)`	`Function`	`-`	Shortcut for a success message.
`info(content, options)`	`Function`	`-`	Shortcut for an info message.
`warning(content, options)`	`Function`	`-`	Shortcut for a warning message.
`error(content, options)`	`Function`	`-`	Shortcut for an error message.
`loading(content, options)`	`Function`	`-`	Shortcut for a loading message.
`close(key)`	`Function`	`-`	Close a message by key.
`destroy()`	`Function`	`-`	Remove all messages and dispatch <code>hakumi-component:hidden</code>.
`getState()`	`Function`	`-`	Return current count and configuration.