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

src/forms/masked.rs

@@ -0,0 +1,360 @@
+use std::{ops::Range, rc::Rc};
+
+use gpui::{
+    AnyElement, App, Bounds, ElementId, Entity, InteractiveElement, IntoElement, MouseButton,
+    ParentElement, Pixels, RenderOnce, SharedString, StatefulInteractiveElement, Styled, Window,
+    canvas, div, prelude::*,
+};
+
+use super::{
+    Input, TextInput,
+    suggest::{Suggestion, suggestion_list},
+};
+use crate::{
+    primitives::{Icon, IconName},
+    theme::{ActiveTheme, ControlSize, IconSize, Radius},
+};
+
+fn is_slot(slot: char) -> bool {
+    matches!(slot, '9' | 'a' | '*')
+}
+
+/// Fits typed characters into `mask`: `9` a digit, `a` a letter, `*` either; the rest is literal.
+pub(crate) fn apply_mask(mask: &str, raw: &str) -> String {
+    let mut raw = raw.chars().filter(char::is_ascii_alphanumeric).peekable();
+    let mut out = String::new();
+    for slot in mask.chars() {
+        let fits = |ch: &char| match slot {
+            '9' => ch.is_ascii_digit(),
+            'a' => ch.is_ascii_alphabetic(),
+            _ => ch.is_ascii_alphanumeric(),
+        };
+        if raw.peek().is_none() {
+            break;
+        }
+        if !is_slot(slot) {
+            out.push(slot);
+            continue;
+        }
+        while raw.peek().is_some_and(|ch| !fits(ch)) {
+            raw.next();
+        }
+        match raw.next() {
+            Some(ch) => out.push(ch),
+            None => break,
+        }
+    }
+    out
+}
+
+/// What `fitted` holds in the slots of `mask`, from char `from` to char `to`.
+fn slot_chars(mask: &str, fitted: &str, from: usize, to: usize) -> String {
+    mask.chars()
+        .zip(fitted.chars())
+        .enumerate()
+        .filter(|(ix, (slot, _))| (from..to).contains(ix) && is_slot(*slot))
+        .map(|(_, (_, ch))| ch)
+        .collect()
+}
+
+/// Fits an edit into `mask`: `range` of `text` becomes `typed`. Gives the text and caret.
+pub(crate) fn refit(mask: &str, text: &str, range: Range<usize>, typed: &str) -> (String, usize) {
+    let at = |byte: usize| text[..byte].chars().count();
+    let head = slot_chars(mask, text, 0, at(range.start)) + typed;
+    let fitted = apply_mask(
+        mask,
+        &(head.clone() + &slot_chars(mask, text, at(range.end), usize::MAX)),
+    );
+    let caret = if typed.is_empty() {
+        range.start
+    } else {
+        apply_mask(mask, &head).len()
+    };
+    let caret = caret.min(fitted.len());
+    (fitted, caret)
+}
+
+/// The mask shown while empty: slots become underscores.
+pub(crate) fn mask_hint(mask: &str) -> String {
+    mask.chars()
+        .map(|slot| {
+            if matches!(slot, '9' | 'a' | '*') {
+                '_'
+            } else {
+                slot
+            }
+        })
+        .collect()
+}
+
+fn masking(
+    id: &ElementId,
+    state: &Entity<TextInput>,
+    mask: &SharedString,
+    window: &mut Window,
+    cx: &mut App,
+) {
+    let applied = window.use_keyed_state(id.clone(), cx, |_, _| None::<SharedString>);
+    let old = applied.read(cx).clone();
+    if old.as_ref() != Some(mask) {
+        applied.update(cx, |applied, _| *applied = Some(mask.clone()));
+        let fit_mask = mask.clone();
+        state.update(cx, |input, cx| {
+            let raw = match &old {
+                Some(old) => slot_chars(old, input.text(), 0, usize::MAX),
+                None => input.text().to_string(),
+            };
+            input.set_fit(Rc::new(move |text, range, typed| {
+                refit(&fit_mask, text, range, typed)
+            }));
+            input.set_text(raw, cx);
+        });
+        log::info!("masked input: mask {mask}");
+    }
+    let hint = mask_hint(mask);
+    if state.read(cx).placeholder_text().as_ref() != hint {
+        state.update(cx, |input, cx| input.set_placeholder(hint, cx));
+    }
+}
+
+/// A field that fits typing into a pattern such as `(999) 999-9999`.
+#[derive(IntoElement)]
+pub struct MaskedInput {
+    id: ElementId,
+    state: Entity<TextInput>,
+    mask: SharedString,
+    size: ControlSize,
+    prefix: Option<AnyElement>,
+}
+
+impl MaskedInput {
+    pub fn new(
+        id: impl Into<ElementId>,
+        state: &Entity<TextInput>,
+        mask: impl Into<SharedString>,
+    ) -> Self {
+        Self {
+            id: id.into(),
+            state: state.clone(),
+            mask: mask.into(),
+            size: ControlSize::default(),
+            prefix: None,
+        }
+    }
+
+    pub fn size(mut self, size: ControlSize) -> Self {
+        self.size = size;
+        self
+    }
+
+    pub fn prefix(mut self, prefix: impl IntoElement) -> Self {
+        self.prefix = Some(prefix.into_any_element());
+        self
+    }
+}
+
+impl RenderOnce for MaskedInput {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        masking(&self.id, &self.state, &self.mask, window, cx);
+        let field = Input::new(&self.state).size(self.size);
+        match self.prefix {
+            Some(prefix) => field.prefix(prefix),
+            None => field,
+        }
+    }
+}
+
+/// Dialing code, flag and number pattern of each country offered.
+pub const COUNTRIES: [(&str, &str, &str, &str); 6] = [
+    ("US", "+1", "🇺🇸", "(999) 999-9999"),
+    ("GB", "+44", "🇬🇧", "9999 999999"),
+    ("DE", "+49", "🇩🇪", "9999 9999999"),
+    ("FR", "+33", "🇫🇷", "9 99 99 99 99"),
+    ("JP", "+81", "🇯🇵", "99-9999-9999"),
+    ("CN", "+86", "🇨🇳", "999 9999 9999"),
+];
+
+type OnCountry = Rc<dyn Fn(&'static str, &mut Window, &mut App)>;
+
+/// A phone number: a country picker for the code, then its number pattern.
+#[derive(IntoElement)]
+pub struct PhoneInput {
+    id: ElementId,
+    state: Entity<TextInput>,
+    country: &'static str,
+    on_country: Option<OnCountry>,
+}
+
+impl PhoneInput {
+    /// `country` is a code from `COUNTRIES`.
+    pub fn new(id: impl Into<ElementId>, state: &Entity<TextInput>, country: &'static str) -> Self {
+        assert!(
+            COUNTRIES.iter().any(|(code, ..)| *code == country),
+            "phone input has no country {country}"
+        );
+        Self {
+            id: id.into(),
+            state: state.clone(),
+            country,
+            on_country: None,
+        }
+    }
+
+    pub fn on_country(
+        mut self,
+        handler: impl Fn(&'static str, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_country = Some(Rc::new(handler));
+        self
+    }
+}
+
+struct Picker {
+    open: bool,
+    anchor: Bounds<Pixels>,
+}
+
+impl RenderOnce for PhoneInput {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let picker = window.use_keyed_state((self.id.clone(), "picker"), cx, |_, _| Picker {
+            open: false,
+            anchor: Bounds::default(),
+        });
+        let (open, anchor) = (picker.read(cx).open, picker.read(cx).anchor);
+        let &(_, dial, flag, mask) = COUNTRIES
+            .iter()
+            .find(|(code, ..)| *code == self.country)
+            .expect("checked at construction");
+        let theme = cx.theme();
+        let (hover, muted) = (theme.colors.hover, theme.colors.fg_muted);
+        let rows: Vec<Suggestion> = COUNTRIES
+            .iter()
+            .map(|(code, dial, flag, _)| Suggestion {
+                label: SharedString::from(format!("{flag}  {code}")),
+                note: Some(SharedString::from(*dial)),
+            })
+            .collect();
+        let (toggle, close, measure) = (picker.clone(), picker.clone(), picker.clone());
+        let on_country = self.on_country;
+        let pick = Rc::new(move |ix: usize, window: &mut Window, cx: &mut App| {
+            let code = COUNTRIES[ix].0;
+            log::info!("phone input: country {code}");
+            close.update(cx, |picker, cx| {
+                picker.open = false;
+                cx.notify();
+            });
+            if let Some(on_country) = &on_country {
+                on_country(code, window, cx);
+            }
+        });
+        let dismiss = picker.clone();
+        let code = div()
+            .id((self.id.clone(), "code"))
+            .flex()
+            .items_center()
+            .gap_1()
+            .px_1()
+            .rounded(theme.radius(Radius::Sm))
+            .text_color(muted)
+            .cursor_pointer()
+            .hover(|style| style.bg(hover))
+            .on_mouse_down(MouseButton::Left, |_, window, _| window.prevent_default())
+            .on_click(move |_, _, cx| {
+                toggle.update(cx, |picker, cx| {
+                    picker.open = !picker.open;
+                    cx.notify();
+                })
+            })
+            .child(format!("{flag} {dial}"))
+            .child(
+                Icon::new(IconName::ChevronDown)
+                    .size(IconSize::Xs)
+                    .color(muted),
+            );
+        div()
+            .relative()
+            .w_full()
+            .child(MaskedInput::new(self.id.clone(), &self.state, mask).prefix(code))
+            .child(
+                canvas(
+                    move |bounds, _, cx| {
+                        if measure.read(cx).anchor != bounds {
+                            measure.update(cx, |picker, _| picker.anchor = bounds);
+                        }
+                    },
+                    |_, _, _, _| {},
+                )
+                .absolute()
+                .top_0()
+                .left_0()
+                .size_full(),
+            )
+            .when(open, |field| {
+                let current = COUNTRIES
+                    .iter()
+                    .position(|(code, ..)| *code == self.country);
+                field.child(suggestion_list(
+                    (self.id.clone(), "countries"),
+                    anchor,
+                    &rows,
+                    current.unwrap_or(usize::MAX),
+                    pick,
+                    Some(Rc::new(move |_, cx| {
+                        dismiss.update(cx, |picker, cx| {
+                            picker.open = false;
+                            cx.notify();
+                        })
+                    })),
+                    cx,
+                ))
+            })
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::{apply_mask, mask_hint, refit};
+
+    fn typed(mask: &str, keys: &str) -> String {
+        keys.chars().fold(String::new(), |text, key| {
+            let end = text.len();
+            refit(mask, &text, end..end, &key.to_string()).0
+        })
+    }
+
+    #[test]
+    fn mask_fits_slots_skips_misfits_and_stops_with_the_input() {
+        assert_eq!(apply_mask("(999) 999-9999", "5551234567"), "(555) 123-4567");
+        assert_eq!(apply_mask("(999) 999-9999", "555"), "(555");
+        assert_eq!(apply_mask("(999) 999-9999", "(55x5) 1"), "(555) 1");
+        assert_eq!(apply_mask("aa-9999", "ab1234"), "ab-1234");
+        assert_eq!(apply_mask("aa-9999", "12ab"), "ab");
+        assert_eq!(mask_hint("(999) 999-9999"), "(___) ___-____");
+    }
+
+    #[test]
+    fn typing_fills_slots_and_literals_never_eat_input() {
+        assert_eq!(typed("+1 999", "234"), "+1 234");
+        assert_eq!(typed("1-999", "123"), "1-123");
+        assert_eq!(typed("(999) 999-9999", "5551234567"), "(555) 123-4567");
+    }
+
+    #[test]
+    fn an_edit_replaces_its_range_and_places_the_caret() {
+        let fit = |mask, text, range, typed| refit(mask, text, range, typed);
+        assert_eq!(fit("1-999", "1-123", 0..5, "1"), ("1-1".into(), 3));
+        assert_eq!(fit("+1 999", "+1 23", 2..3, ""), ("+1 23".into(), 2));
+        assert_eq!(
+            fit("(999) 999-9999", "(555) 123-4567", 8..8, "9"),
+            ("(555) 129-3456".into(), 9)
+        );
+        assert_eq!(
+            fit("(999) 999-9999", "(555) 1", 6..7, ""),
+            ("(555".into(), 4)
+        );
+        assert_eq!(
+            fit("(999) 999-9999", "", 0..0, "(555) 123-4567"),
+            ("(555) 123-4567".into(), 14)
+        );
+    }
+}