repose_material/material3/
advbuttons.rs

1#![allow(non_snake_case)]
2
3use std::rc::Rc;
4
5use super::SplitButtonDefaults;
6use repose_core::{locals::with_content_color, *};
7use repose_ui::{Box, Row, Text, TextStyle, ViewExt};
8
9/// Configuration for [`SplitButtonLayout`].
10#[derive(Clone)]
11pub struct SplitButtonConfig {
12    pub modifier: Modifier,
13    pub spacing: f32,
14}
15
16impl Default for SplitButtonConfig {
17    fn default() -> Self {
18        Self {
19            modifier: Modifier::new(),
20            spacing: SplitButtonDefaults::SPACING,
21        }
22    }
23}
24
25/// M3 SplitButtonLayout -> places leading and trailing buttons side by side.
26///
27/// Pass styled buttons (via [`Button`], [`FilledTonalButton`], etc.) or use
28/// the factory helpers below for properly-shaped split button parts.
29pub fn SplitButtonLayout(
30    leading_button: View,
31    trailing_button: View,
32    config: SplitButtonConfig,
33) -> View {
34    Row(config
35        .modifier
36        .gap(config.spacing)
37        .align_items(AlignItems::CENTER))
38    .child((leading_button, trailing_button))
39}
40
41fn split_leading_shape_radii() -> [f32; 4] {
42    [
43        SplitButtonDefaults::OUTER_CORNER_SIZE,
44        SplitButtonDefaults::SMALL_INNER_CORNER_SIZE,
45        SplitButtonDefaults::SMALL_INNER_CORNER_SIZE,
46        SplitButtonDefaults::OUTER_CORNER_SIZE,
47    ]
48}
49
50fn split_trailing_shape_radii() -> [f32; 4] {
51    [
52        SplitButtonDefaults::SMALL_INNER_CORNER_SIZE,
53        SplitButtonDefaults::OUTER_CORNER_SIZE,
54        SplitButtonDefaults::OUTER_CORNER_SIZE,
55        SplitButtonDefaults::SMALL_INNER_CORNER_SIZE,
56    ]
57}
58
59fn split_button_impl(
60    outer_modifier: Modifier,
61    on_click: impl Fn() + 'static,
62    content: impl FnOnce() -> View,
63    content_color: Color,
64    container_color: Option<Color>,
65    state_colors: StateColors,
66    state_elevation: Option<StateElevation>,
67    border: Option<(f32, Color, f32)>,
68    pad_left: f32,
69    pad_right: f32,
70    height: f32,
71    enabled: bool,
72    interaction_source: Option<MutableInteractionSource>,
73) -> View {
74    let mut m = Modifier::new()
75        .height(height)
76        .min_width(48.0)
77        .padding_values(PaddingValues {
78            left: pad_left,
79            right: pad_right,
80            top: 0.0,
81            bottom: 0.0,
82        })
83        .align_items(AlignItems::CENTER)
84        .justify_content(JustifyContent::CENTER);
85    if let Some(bg) = container_color {
86        m = m.background(bg);
87    }
88    m = m.state_colors(if enabled {
89        state_colors
90    } else {
91        StateColors {
92            default: Color::TRANSPARENT,
93            hovered: Color::TRANSPARENT,
94            focused: Color::TRANSPARENT,
95            pressed: Color::TRANSPARENT,
96            dragged: Color::TRANSPARENT,
97            disabled: state_colors.disabled,
98        }
99    });
100    if let Some(se) = state_elevation {
101        m = m.state_elevation(se);
102    }
103    if let Some((w, c, r)) = border {
104        m = m.border(w, c, r);
105    }
106    let source: Rc<MutableInteractionSource> = interaction_source
107        .map(Rc::new)
108        .unwrap_or_else(|| remember(MutableInteractionSource::new));
109    m = m.interaction_source(&source);
110    m = m.indication(crate::ripple::ripple(crate::ripple::RippleConfig {
111        color: Some(content_color),
112        bounded: true,
113        ..Default::default()
114    }));
115    if enabled {
116        m = m.clickable().on_click(on_click);
117    }
118    m = m.then(outer_modifier);
119    let effective = if enabled {
120        content_color
121    } else {
122        content_color.with_alpha_f32(0.38)
123    };
124    with_content_color(effective, || Box(m).child(content()))
125}
126
127pub fn SplitButtonLeadingButton(
128    modifier: Modifier,
129    on_click: impl Fn() + 'static,
130    config: super::ButtonConfig,
131    content: impl FnOnce() -> View,
132) -> View {
133    let def = super::ButtonColors {
134        container_color: super::ButtonDefaults::container_color(),
135        content_color: super::ButtonDefaults::content_color(),
136        disabled_container_color: super::ButtonDefaults::container_color()
137            .with_alpha_f32(0.12)
138            .composite_over(theme().surface_container_low),
139        disabled_content_color: super::ButtonDefaults::content_color().with_alpha_f32(0.38),
140    };
141    let (cc, bg, sc, se) = resolve_button_colors(&config, def);
142    let pad = config
143        .content_padding
144        .unwrap_or(SplitButtonDefaults::small_leading_content_padding());
145    split_button_impl(
146        modifier.clip_rounded_radii(split_leading_shape_radii()),
147        on_click,
148        content,
149        cc,
150        bg,
151        sc,
152        se.or(Some(super::ButtonDefaults::state_elevation_default())),
153        config.border,
154        pad.left,
155        pad.right,
156        config.height,
157        config.enabled,
158        config.interaction_source.clone(),
159    )
160}
161
162pub fn SplitButtonTrailingButton(
163    modifier: Modifier,
164    on_click: impl Fn() + 'static,
165    config: super::ButtonConfig,
166    content: impl FnOnce() -> View,
167) -> View {
168    let def = super::ButtonColors {
169        container_color: super::ButtonDefaults::container_color(),
170        content_color: super::ButtonDefaults::content_color(),
171        disabled_container_color: super::ButtonDefaults::container_color()
172            .with_alpha_f32(0.12)
173            .composite_over(theme().surface_container_low),
174        disabled_content_color: super::ButtonDefaults::content_color().with_alpha_f32(0.38),
175    };
176    let (cc, bg, sc, se) = resolve_button_colors(&config, def);
177    let pad = config
178        .content_padding
179        .unwrap_or(SplitButtonDefaults::small_trailing_content_padding());
180    split_button_impl(
181        modifier.clip_rounded_radii(split_trailing_shape_radii()),
182        on_click,
183        content,
184        cc,
185        bg,
186        sc,
187        se.or(Some(super::ButtonDefaults::state_elevation_default())),
188        config.border,
189        pad.left,
190        pad.right,
191        config.height,
192        config.enabled,
193        config.interaction_source.clone(),
194    )
195}
196
197pub fn SplitButtonTrailingToggleButton(
198    checked: bool,
199    on_checked_change: impl Fn(bool) + 'static,
200    modifier: Modifier,
201    config: super::ToggleButtonConfig,
202    content: impl FnOnce(bool) -> View,
203) -> View {
204    let _th = theme();
205    let cc = config
206        .content_color
207        .unwrap_or_else(super::ToggleButtonDefaults::content_color);
208    let checked_cc = config
209        .checked_content_color
210        .unwrap_or_else(super::ToggleButtonDefaults::checked_content_color);
211    let checked_bg = config
212        .checked_container_color
213        .unwrap_or_else(super::ToggleButtonDefaults::checked_container_color);
214    let bg = if checked {
215        checked_bg
216    } else {
217        config.container_color.unwrap_or(Color::TRANSPARENT)
218    };
219    let fg = if checked { checked_cc } else { cc };
220    let se = config
221        .state_elevation
222        .unwrap_or_else(super::ToggleButtonDefaults::state_elevation_default);
223    let pad_l = config
224        .content_padding
225        .map(|p| p.left)
226        .unwrap_or(super::ToggleButtonDefaults::HORIZONTAL_PADDING);
227    let pad_r = config
228        .content_padding
229        .map(|p| p.right)
230        .unwrap_or(super::ToggleButtonDefaults::HORIZONTAL_PADDING);
231    let mut m = Modifier::new()
232        .height(config.height)
233        .min_width(48.0)
234        .padding_values(PaddingValues {
235            left: pad_l,
236            right: pad_r,
237            top: 0.0,
238            bottom: 0.0,
239        })
240        .background(bg)
241        .align_items(AlignItems::CENTER)
242        .justify_content(JustifyContent::CENTER)
243        .state_colors(config.state_colors)
244        .state_elevation(se);
245    let tg_source: Rc<MutableInteractionSource> = config
246        .interaction_source
247        .clone()
248        .map(Rc::new)
249        .unwrap_or_else(|| remember(MutableInteractionSource::new));
250    m = m.interaction_source(&tg_source);
251    if let Some((w, c, r)) = config.border {
252        m = m.border(w, c, r);
253    }
254    if config.enabled {
255        let cb = on_checked_change;
256        m = m.clickable().on_click(move || cb(!checked));
257    } else {
258        m = m.alpha(0.38);
259    }
260    m = m.then(modifier.clip_rounded_radii(split_trailing_shape_radii()));
261    with_content_color(fg, || Box(m).child(content(checked)))
262}
263
264pub fn SplitButtonTonalLeadingButton(
265    modifier: Modifier,
266    on_click: impl Fn() + 'static,
267    config: super::ButtonConfig,
268    content: impl FnOnce() -> View,
269) -> View {
270    let def = super::ButtonColors {
271        container_color: super::ButtonDefaults::tonal_container_color(),
272        content_color: super::ButtonDefaults::tonal_content_color(),
273        disabled_container_color: theme()
274            .on_surface
275            .with_alpha_f32(0.12)
276            .composite_over(theme().surface_container_low),
277        disabled_content_color: theme().on_surface.with_alpha_f32(0.38),
278    };
279    let (cc, bg, sc, se) = resolve_button_colors(&config, def);
280    let pad = config
281        .content_padding
282        .unwrap_or(SplitButtonDefaults::small_leading_content_padding());
283    split_button_impl(
284        modifier.clip_rounded_radii(split_leading_shape_radii()),
285        on_click,
286        content,
287        cc,
288        bg,
289        sc,
290        se.or(Some(super::ButtonDefaults::elevated_state_elevation())),
291        config.border,
292        pad.left,
293        pad.right,
294        config.height,
295        config.enabled,
296        config.interaction_source.clone(),
297    )
298}
299
300pub fn SplitButtonTonalTrailingToggleButton(
301    checked: bool,
302    on_checked_change: impl Fn(bool) + 'static,
303    modifier: Modifier,
304    config: super::ToggleButtonConfig,
305    content: impl FnOnce(bool) -> View,
306) -> View {
307    let _th = theme();
308    let cc = config
309        .content_color
310        .unwrap_or_else(super::ToggleButtonDefaults::tonal_content_color);
311    let checked_cc = config
312        .checked_content_color
313        .unwrap_or_else(super::ToggleButtonDefaults::tonal_checked_content_color);
314    let checked_bg = config
315        .checked_container_color
316        .unwrap_or_else(super::ToggleButtonDefaults::tonal_checked_container_color);
317    let bg = if checked {
318        checked_bg
319    } else {
320        config.container_color.unwrap_or(Color::TRANSPARENT)
321    };
322    let fg = if checked { checked_cc } else { cc };
323    let se = config
324        .state_elevation
325        .unwrap_or_else(super::ToggleButtonDefaults::state_elevation_default);
326    let pad_l = config
327        .content_padding
328        .map(|p| p.left)
329        .unwrap_or(super::ToggleButtonDefaults::HORIZONTAL_PADDING);
330    let pad_r = config
331        .content_padding
332        .map(|p| p.right)
333        .unwrap_or(super::ToggleButtonDefaults::HORIZONTAL_PADDING);
334    let mut m = Modifier::new()
335        .height(config.height)
336        .min_width(48.0)
337        .padding_values(PaddingValues {
338            left: pad_l,
339            right: pad_r,
340            top: 0.0,
341            bottom: 0.0,
342        })
343        .background(bg)
344        .align_items(AlignItems::CENTER)
345        .justify_content(JustifyContent::CENTER)
346        .state_colors(config.state_colors)
347        .state_elevation(se);
348    let tg_source: Rc<MutableInteractionSource> = config
349        .interaction_source
350        .clone()
351        .map(Rc::new)
352        .unwrap_or_else(|| remember(MutableInteractionSource::new));
353    m = m.interaction_source(&tg_source);
354    if let Some((w, c, r)) = config.border {
355        m = m.border(w, c, r);
356    }
357    if config.enabled {
358        let cb = on_checked_change;
359        m = m.clickable().on_click(move || cb(!checked));
360    } else {
361        m = m.alpha(0.38);
362    }
363    m = m.then(modifier.clip_rounded_radii(split_trailing_shape_radii()));
364    with_content_color(fg, || Box(m).child(content(checked)))
365}
366
367/// State for the overflow menu in [`ButtonGroup`].
368pub struct ButtonGroupMenuState {
369    pub is_showing: bool,
370}
371
372impl ButtonGroupMenuState {
373    pub fn dismiss(&mut self) {
374        self.is_showing = false;
375    }
376    pub fn show(&mut self) {
377        self.is_showing = true;
378    }
379}
380
381/// Scope passed to [`ButtonGroup`]'s content closure.
382pub struct ButtonGroupScope {
383    items: Vec<ButtonGroupItem>,
384    connected: bool,
385}
386
387/// Internal item held by `ButtonGroupScope`.
388struct ButtonGroupItem {
389    button_group_content: Box<dyn FnOnce() -> View>,
390    menu_content: Option<Box<dyn FnOnce(&mut ButtonGroupMenuState) -> View>>,
391}
392
393impl ButtonGroupScope {
394    fn new() -> Self {
395        Self {
396            items: Vec::new(),
397            connected: false,
398        }
399    }
400
401    /// Add a clickable item (rendered as a [`Button`] internally).
402    pub fn clickable_item(
403        &mut self,
404        on_click: impl Fn() + 'static,
405        label: String,
406        icon: Option<View>,
407    ) {
408        let cb = Rc::new(on_click);
409        let cb2 = cb.clone();
410        self.items.push(ButtonGroupItem {
411            button_group_content: Box::new(move || {
412                let cb = cb2.clone();
413                let config = super::ButtonConfig {
414                    shape_radius: 0.0,
415                    ..Default::default()
416                };
417                super::Button(
418                    Modifier::new().flex_grow(1.0),
419                    move || (cb)(),
420                    config,
421                    move || {
422                        let label = label.clone();
423                        let t = Text(label).single_line();
424                        match icon.clone() {
425                            Some(ic) => Box(Modifier::new()).child((ic, t)),
426                            None => t,
427                        }
428                    },
429                )
430            }),
431            menu_content: None,
432        });
433    }
434
435    /// Add a toggleable item (rendered as a [`ToggleButton`] internally).
436    pub fn toggleable_item(
437        &mut self,
438        checked: bool,
439        on_checked_change: impl Fn(bool) + 'static,
440        label: String,
441        icon: Option<View>,
442    ) {
443        let cb = Rc::new(on_checked_change);
444        let cb2 = cb.clone();
445        self.items.push(ButtonGroupItem {
446            button_group_content: Box::new(move || {
447                let cb = cb2.clone();
448                let config = super::ToggleButtonConfig {
449                    shape_radius: 0.0,
450                    ..Default::default()
451                };
452                super::ToggleButton(
453                    checked,
454                    move |b| (cb)(b),
455                    config,
456                    move |_| {
457                        let label = label.clone();
458                        let t = Text(label).single_line();
459                        match icon.clone() {
460                            Some(ic) => Box(Modifier::new()).child((ic, t)),
461                            None => t,
462                        }
463                    },
464                )
465            }),
466            menu_content: None,
467        });
468    }
469
470    /// Add a custom item with a button group composable and an optional overflow menu content.
471    pub fn custom_item(
472        &mut self,
473        button_group_content: impl FnOnce() -> View + 'static,
474        menu_content: Option<impl FnOnce(&mut ButtonGroupMenuState) -> View + 'static>,
475    ) {
476        self.items.push(ButtonGroupItem {
477            button_group_content: Box::new(button_group_content),
478            menu_content: menu_content.map(|f| {
479                let b: Box<dyn FnOnce(&mut ButtonGroupMenuState) -> View> = Box::new(f);
480                b
481            }),
482        });
483    }
484}
485
486/// M3 ButtonGroup -> a horizontal sequence of related action items.
487///
488/// Items are added via [`ButtonGroupScope::clickable_item`] and
489/// [`ButtonGroupScope::toggleable_item`].
490pub fn ButtonGroup(
491    modifier: Modifier,
492    gap: f32,
493    content: impl FnOnce(&mut ButtonGroupScope),
494) -> View {
495    let mut scope = ButtonGroupScope::new();
496    content(&mut scope);
497    Row(modifier.gap(gap).align_items(AlignItems::CENTER)).with_children(
498        scope
499            .items
500            .into_iter()
501            .map(|item| (item.button_group_content)())
502            .collect::<Vec<View>>(),
503    )
504}
505
506fn resolve_button_colors(
507    config: &super::ButtonConfig,
508    def: super::ButtonColors,
509) -> (Color, Option<Color>, StateColors, Option<StateElevation>) {
510    if let Some(colors) = &config.colors {
511        let bg = if config.enabled {
512            colors.container_color
513        } else {
514            colors.disabled_container_color
515        };
516        let cc = if config.enabled {
517            colors.content_color
518        } else {
519            colors.disabled_content_color
520        };
521        let sc = StateColors {
522            default: Color::TRANSPARENT,
523            hovered: colors.content_color.with_alpha_f32(0.08),
524            focused: colors.content_color.with_alpha_f32(0.12),
525            pressed: colors.content_color.with_alpha_f32(0.12),
526            dragged: colors.content_color.with_alpha_f32(0.12),
527            disabled: Color::TRANSPARENT,
528        };
529        let se = config.elevation.map(|e| StateElevation {
530            default: e.default,
531            hovered: e.hovered,
532            focused: e.focused,
533            pressed: e.pressed,
534            dragged: e.pressed,
535            disabled: e.disabled,
536        });
537        (cc, Some(bg), sc, se)
538    } else {
539        let cc = config.content_color.unwrap_or(def.content_color);
540        let bg = Some(config.container_color.unwrap_or(def.container_color));
541        let sc = if config.enabled {
542            config.state_colors
543        } else {
544            StateColors {
545                default: Color::TRANSPARENT,
546                hovered: Color::TRANSPARENT,
547                focused: Color::TRANSPARENT,
548                pressed: Color::TRANSPARENT,
549                dragged: Color::TRANSPARENT,
550                disabled: config.state_colors.disabled,
551            }
552        };
553        let se = config.state_elevation;
554        (cc, bg, sc, se)
555    }
556}
repose_material/material3/advbuttons.rs

repose_material/material3/
advbuttons.rs
