cranpose_liquid/widgets/
search_field.rs

1//! A pill search field on glass.
2
3use crate::material::Glass;
4use crate::material::LiquidModifierExt;
5use crate::theme::{liquid_colors, liquid_typography};
6use cranpose_foundation::text::TextFieldState;
7use cranpose_macros::composable;
8use cranpose_ui::text::{SpanStyle, TextStyle};
9use cranpose_ui::widgets::{BasicTextField, Box, BoxSpec, Row, RowSpec, Text};
10use cranpose_ui::Modifier;
11use cranpose_ui_layout::{Alignment, VerticalAlignment};
12
13/// Configuration for [`LiquidSearchField`].
14#[derive(Clone, Debug, PartialEq)]
15pub struct LiquidSearchFieldSpec {
16    pub placeholder: String,
17    /// Render on glass (floating) instead of the flat fill (inline in lists).
18    pub on_glass: bool,
19}
20
21impl Default for LiquidSearchFieldSpec {
22    fn default() -> Self {
23        Self {
24            placeholder: "Search".to_string(),
25            on_glass: true,
26        }
27    }
28}
29
30/// A capsule search field: magnifier icon and editable text.
31#[composable]
32#[allow(non_snake_case)]
33pub fn LiquidSearchField(modifier: Modifier, state: TextFieldState, spec: LiquidSearchFieldSpec) {
34    let colors = liquid_colors();
35    let typography = liquid_typography();
36
37    let base = if spec.on_glass {
38        Modifier::empty().glass_effect(Glass::regular())
39    } else {
40        let fill = colors.fill;
41        Modifier::empty()
42            .rounded_corners(999.0)
43            .draw_behind(move |scope| {
44                scope.draw_round_rect(
45                    cranpose_ui_graphics::Brush::solid(fill),
46                    cranpose_ui_graphics::CornerRadii::uniform(999.0),
47                );
48            })
49    };
50
51    let placeholder = spec.placeholder.clone();
52    Box(
53        base.then(modifier).padding_symmetric(14.0, 9.0),
54        BoxSpec::default().content_alignment(Alignment::new(
55            cranpose_ui_layout::HorizontalAlignment::Start,
56            cranpose_ui_layout::VerticalAlignment::CenterVertically,
57        )),
58        move || {
59            let placeholder = placeholder.clone();
60            let typography = typography.clone();
61            let state = state.clone();
62            Row(
63                Modifier::empty(),
64                RowSpec::default().vertical_alignment(VerticalAlignment::CenterVertically),
65                move || {
66                    crate::icons::Icon(crate::icons::SEARCH, 18.0, colors.secondary_label);
67                    Box(Modifier::empty().width(8.0), BoxSpec::default(), || {});
68
69                    let is_empty = state.text().is_empty();
70                    let field_style = TextStyle {
71                        span_style: SpanStyle {
72                            color: Some(colors.label),
73                            ..typography.body.span_style.clone()
74                        },
75                        ..typography.body.clone()
76                    };
77                    let placeholder = placeholder.clone();
78                    let placeholder_typography = typography.clone();
79                    let state = state.clone();
80                    Box(Modifier::empty(), BoxSpec::default(), move || {
81                        if is_empty {
82                            let placeholder_style = TextStyle {
83                                span_style: SpanStyle {
84                                    color: Some(colors.tertiary_label),
85                                    ..placeholder_typography.body.span_style.clone()
86                                },
87                                ..placeholder_typography.body.clone()
88                            };
89                            Text(placeholder.clone(), Modifier::empty(), placeholder_style);
90                        }
91                        BasicTextField(state.clone(), Modifier::empty(), field_style.clone());
92                    });
93                },
94            );
95        },
96    );
97}
cranpose_liquid/widgets/search_field.rs

cranpose_liquid/widgets/
search_field.rs
