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

examples/gallery/pages/forms/numbers.rs

@@ -0,0 +1,133 @@
+use ely_gpui_component::forms::{NumberInput, ScrubInput, UnitInput};
+use gpui::{App, Entity, IntoElement, ParentElement, SharedString, Styled, Window, div, px};
+
+use crate::{
+    probe::probe,
+    ui::{code, section, specimen, specimens},
+};
+
+fn number(key: &'static str, initial: f64, window: &mut Window, cx: &mut App) -> Entity<f64> {
+    window.use_keyed_state(key, cx, move |_, _| initial)
+}
+
+fn store(state: Entity<f64>) -> impl Fn(f64, &mut Window, &mut App) + 'static {
+    move |value, _, cx| {
+        state.update(cx, |state, cx| {
+            *state = value;
+            cx.notify();
+        })
+    }
+}
+
+pub fn number_input(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
+    let seats = number("number-seats", 4.0, window, cx);
+    let now = *seats.read(cx);
+    section(
+        "NumberInput",
+        "Arrow keys or the stepper move it; drag the grip sideways to scrub.",
+        cx,
+    )
+    .child(probe(
+        "number",
+        div().w(px(220.0)).child(
+            NumberInput::new("seats", now)
+                .range(1.0, 99.0)
+                .on_change(store(seats)),
+        ),
+    ))
+}
+
+pub fn scrub(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
+    let x = number("scrub-x", 120.0, window, cx);
+    let opacity = number("scrub-opacity", 0.8, window, cx);
+    let (x_now, opacity_now) = (*x.read(cx), *opacity.read(cx));
+    section(
+        "ScrubInput",
+        "Drag the label sideways, as in a design tool. The field still types.",
+        cx,
+    )
+    .child(probe(
+        "scrub",
+        div()
+            .flex()
+            .flex_col()
+            .gap_2()
+            .w(px(260.0))
+            .child(
+                ScrubInput::new("scrub-x", "X", x_now)
+                    .range(-2000.0, 2000.0)
+                    .on_change(store(x)),
+            )
+            .child(
+                ScrubInput::new("scrub-opacity", "Opacity", opacity_now)
+                    .range(0.0, 1.0)
+                    .step(0.01)
+                    .precision(2)
+                    .on_change(store(opacity)),
+            ),
+    ))
+}
+
+pub fn money(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
+    let price = number("number-price", 1249.5, window, cx);
+    let tax = number("number-tax", 8.0, window, cx);
+    let gap = number("number-gap", 16.0, window, cx);
+    let unit = window.use_keyed_state("number-unit", cx, |_, _| SharedString::from("px"));
+    let (price_now, tax_now, gap_now, unit_now) = (
+        *price.read(cx),
+        *tax.read(cx),
+        *gap.read(cx),
+        unit.read(cx).clone(),
+    );
+    section(
+        "CurrencyInput / PercentInput / UnitInput",
+        "The same number field with a symbol, a percent, or a unit you click through.",
+        cx,
+    )
+    .child(
+        specimens()
+            .child(specimen(
+                "currency",
+                div().w(px(200.0)).child(
+                    NumberInput::new("price", price_now)
+                        .currency("USD")
+                        .range(0.0, 1_000_000.0)
+                        .on_change(store(price)),
+                ),
+                cx,
+            ))
+            .child(specimen(
+                "percent",
+                div().w(px(160.0)).child(
+                    NumberInput::new("tax", tax_now)
+                        .percent()
+                        .range(0.0, 100.0)
+                        .on_change(store(tax)),
+                ),
+                cx,
+            ))
+            .child(specimen(
+                "unit",
+                probe(
+                    "unit",
+                    div().w(px(180.0)).child(
+                        UnitInput::new("gap", gap_now, ["px", "%", "em"], unit_now)
+                            .range(0.0, 400.0)
+                            .on_change(store(gap))
+                            .on_unit(move |next, _, cx| {
+                                let next = next.clone();
+                                unit.update(cx, |unit, cx| {
+                                    *unit = next;
+                                    cx.notify();
+                                })
+                            }),
+                    ),
+                ),
+                cx,
+            )),
+    )
+    .child(code(
+        "NumberInput::new(id, value).currency(\"USD\") and .percent()",
+        cx,
+    ))
+}