Text Input

Module textinput

An editable single-line value with a placeholder.

import ui.textinput
Module textinput
Source textinput/textinput.zirr
Imports ui.flowWidget, NoCmd, Step, View

A text input keeps the value typed so far next to a placeholder. It accepts two messages: one for a key press, which edits the value, and one that replaces the value outright. Neither produces an effect, so every step carries NoCmd.

Contents


Unions

Msg

`textinput/textinput.zirr:5`
union Msg {
	data KeyPressMsg { key: String }
	data SetValueMsg { value: String }
}

Everything a text input reacts to. The cases are declared inline, so they exist only as members of this union.

Cases

Case Fields Effect
KeyPressMsg key: String Appends the key, or deletes the last character when the key is "backspace".
SetValueMsg value: String Replaces the value, keeping the placeholder.

Data

Model

`textinput/textinput.zirr:15`
@Widget(update, view)
data Model {
	value: String
	placeholder: String
}

The input state. It adopts Widget through update and view.

Fields

Field Type Description
value String The text entered so far.
placeholder String The text shown while value is empty.

Functions

new

`textinput/textinput.zirr:10`
fn new(value: String) -> Model

Creates an input starting at value, with an empty placeholder.

Parameters

Parameter Type Description
value String The initial text.

Returns

ModelModel(value, "").


update

`textinput/textinput.zirr:20`
fn update(m: Model, msg: Msg) -> Step

Applies a message to the input. Unknown messages leave the model untouched.

Parameters

Parameter Type Description
m Model The current input.
msg Msg The incoming message.

Returns

Step — the next model paired with NoCmd.

Behavior

Message Result
SetValueMsg Model(msg.value, m.placeholder)
KeyPressMsg with key "backspace" The value without its last character.
KeyPressMsg with any other key The value with the key appended.
anything else m unchanged.

view

`textinput/textinput.zirr:40`
fn view(m: Model, dispatch: fn(msg: Msg) -> Void) -> View

Renders the value as a Text node. While the input is empty the node is wrapped in a grey Foreground.

Parameters

Parameter Type Description
m Model The input to render.
dispatch fn(msg: Msg) -> Void Message sink for key presses.

Returns

View

Empty state renders the value, not the placeholder

The empty branch wraps node.Text(m.value), which is the empty string at that point, so placeholder is never drawn. The grey is also passed as the literal "grey" and with a second argument, while Foreground takes a single ColorLike. A source comment marks the color as pending a theme.


See also

  • Flow — the loop this widget plugs into.
  • Nodes — the nodes a view renders into.