T06a forms text: text input core, fields, numbers, masks, pin, inline, groups, tags, pairs, path, regex, expression, hotkey, mention

examples/gallery/pages/forms/formats.rs

@@ -0,0 +1,125 @@
+use ely_gpui_component::{
+    forms::{EmailInput, InlineEdit, MaskedInput, PhoneInput, PinInput, UrlInput},
+    typography::Caption,
+};
+use gpui::{App, IntoElement, ParentElement, SharedString, Styled, Window, div, px};
+
+use super::text::field;
+use crate::{
+    probe::probe,
+    ui::{section, specimen, specimens},
+};
+
+pub fn email_url(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
+    let email = field("input-email", window, cx, |input| {
+        input.placeholder("name@example.com")
+    });
+    let url = field("input-url", window, cx, |input| {
+        input.placeholder("https://")
+    });
+    section(
+        "EmailInput / UrlInput",
+        "Checked once you leave the field; a quiet note says what fits.",
+        cx,
+    )
+    .child(
+        specimens()
+            .child(specimen(
+                "email",
+                probe("email", div().w(px(280.0)).child(EmailInput::new(&email))),
+                cx,
+            ))
+            .child(specimen(
+                "url",
+                div().w(px(280.0)).child(UrlInput::new(&url)),
+                cx,
+            )),
+    )
+}
+
+pub fn phone_masked(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
+    let phone = field("input-phone", window, cx, |input| input);
+    let card = field("input-card", window, cx, |input| input);
+    let country = window.use_keyed_state("phone-country", cx, |_, _| "US");
+    let current = *country.read(cx);
+    section(
+        "PhoneInput / MaskedInput",
+        "Typing fits the pattern; literals appear on their own.",
+        cx,
+    )
+    .child(
+        specimens()
+            .child(specimen(
+                "phone",
+                probe(
+                    "phone",
+                    div()
+                        .w(px(300.0))
+                        .child(PhoneInput::new("phone", &phone, current).on_country(
+                            move |code, _, cx| {
+                                country.update(cx, |country, cx| {
+                                    *country = code;
+                                    cx.notify();
+                                })
+                            },
+                        )),
+                ),
+                cx,
+            ))
+            .child(specimen(
+                "masked: aa-9999",
+                probe(
+                    "masked",
+                    div()
+                        .w(px(200.0))
+                        .child(MaskedInput::new("card", &card, "aa-9999")),
+                ),
+                cx,
+            )),
+    )
+}
+
+pub fn pin(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
+    let entered = window.use_keyed_state("pin-entered", cx, |_, _| SharedString::from("waiting"));
+    let note = entered.read(cx).clone();
+    section(
+        "PinInput / OTPInput",
+        "Six boxes, one field underneath: type, paste, or backspace through them.",
+        cx,
+    )
+    .child(probe(
+        "pin",
+        PinInput::new("otp", 6).on_complete(move |code, _, cx| {
+            let code = SharedString::from(format!("entered {code}"));
+            entered.update(cx, |entered, cx| {
+                *entered = code;
+                cx.notify();
+            })
+        }),
+    ))
+    .child(Caption::new(format!("Code: {note}")))
+}
+
+pub fn inline_edit(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
+    let title = window.use_keyed_state("inline-title", cx, |_, _| {
+        SharedString::from("Quarterly planning")
+    });
+    let now = title.read(cx).clone();
+    section(
+        "InlineEdit / EditableText",
+        "Click the text to edit. Enter or leaving keeps it; Escape puts it back.",
+        cx,
+    )
+    .child(probe(
+        "inline",
+        div()
+            .w(px(280.0))
+            .child(InlineEdit::new("title", now).on_commit(move |text, _, cx| {
+                let text = text.clone();
+                title.update(cx, |title, cx| {
+                    *title = text;
+                    cx.notify();
+                })
+            })),
+    ))
+}