Orange.Component.Input (orange v0.3.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. SeeOrange.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. SeeOrange.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
}
line do
"Search value: #{state.search_value}"
end
end
end
end