Orange.Component.Input (orange v0.5.0)

An uncontrolled input component.

Attributes

  • :on_submit - A callback triggered when input is submitted. This attribute is required.

  • :submit_key - The keyboard key that will trigger submission. This attribute is optional and defaults to :enter. See Orange.Terminal.KeyEvent for supported values.

  • :on_exit - A callback triggered when input is exited. This attribute is optional.

  • :exit_key - The keyboard key that will unfocus the input. This attribute is optional and defaults to :esc. See Orange.Terminal.KeyEvent for supported values.

    Info

    The :submit_key and :exit_key can not be :backspace as it is reserved for deleting characters.

  • :auto_focus - Whether to focus automatically after mount. This attribute is optional. If true, the :id attribute is required and the input will unfocus after submission.

  • :prefix - The input prefix string. This attribute is optional.

  • :style - The component style. This attribute is optional.

Examples

defmodule Example do
  @behaviour Orange.Component

  import Orange.Macro

  @impl true
  def init(_attrs), do: %{state: %{search_value: ""}}

  @impl true
  def render(state, _attrs, update) do
    rect style: [width: 50, height: 20] do
      {
        Orange.Component.Input,
        id: :input,
        on_submit: fn value -> update.(%{state | search_value: value}) end,
        submit_key: {:char, "x"},
        prefix: "Enter search value:",
        auto_focus: true
      }

      rect do
        "Search value: #{state.search_value}"
      end
    end
  end
end

rendered result