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            pressed: Color::TRANSPARENT,
95            dragged: Color::TRANSPARENT,
96            disabled: state_colors.disabled,
97        }
98    });
99    if let Some(se) = state_elevation {
100        m = m.state_elevation(se);
101    }
102    if let Some((w, c, r)) = border {
103        m = m.border(w, c, r);
104    }
105    let source: Rc<MutableInteractionSource> = interaction_source
106        .map(Rc::new)
107        .unwrap_or_else(|| remember(MutableInteractionSource::new));
108    m = m.interaction_source(&*source);
109    m = m.indication(crate::ripple::ripple(crate::ripple::RippleConfig {
110        color: Some(content_color),
111        bounded: true,
112        ..Default::default()
113    }));
114    if enabled {
115        m = m.clickable().on_click(move || on_click());
116    }
117    m = m.then(outer_modifier);
118    let effective = if enabled {
119        content_color
120    } else {
121        content_color.with_alpha_f32(0.38)
122    };
123    with_content_color(effective, || Box(m).child(content()))
124}
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
264
265pub fn SplitButtonTonalLeadingButton(
266    modifier: Modifier,
267    on_click: impl Fn() + 'static,
268    config: super::ButtonConfig,
269    content: impl FnOnce() -> View,
270) -> View {
271    let def = super::ButtonColors {
272        container_color: super::ButtonDefaults::tonal_container_color(),
273        content_color: super::ButtonDefaults::tonal_content_color(),
274        disabled_container_color: theme()
275            .on_surface
276            .with_alpha_f32(0.12)
277            .composite_over(theme().surface_container_low),
278        disabled_content_color: theme().on_surface.with_alpha_f32(0.38),
279    };
280    let (cc, bg, sc, se) = resolve_button_colors(&config, def);
281    let pad = config
282        .content_padding
283        .unwrap_or(SplitButtonDefaults::small_leading_content_padding());
284    split_button_impl(
285        modifier.clip_rounded_radii(split_leading_shape_radii()),
286        on_click,
287        content,
288        cc,
289        bg,
290        sc,
291        se.or(Some(super::ButtonDefaults::elevated_state_elevation())),
292        config.border,
293        pad.left,
294        pad.right,
295        config.height,
296        config.enabled,
297        config.interaction_source.clone(),
298    )
299}
300
301pub fn SplitButtonTonalTrailingToggleButton(
302    checked: bool,
303    on_checked_change: impl Fn(bool) + 'static,
304    modifier: Modifier,
305    config: super::ToggleButtonConfig,
306    content: impl FnOnce(bool) -> View,
307) -> View {
308    let _th = theme();
309    let cc = config
310        .content_color
311        .unwrap_or_else(super::ToggleButtonDefaults::tonal_content_color);
312    let checked_cc = config
313        .checked_content_color
314        .unwrap_or_else(super::ToggleButtonDefaults::tonal_checked_content_color);
315    let checked_bg = config
316        .checked_container_color
317        .unwrap_or_else(super::ToggleButtonDefaults::tonal_checked_container_color);
318    let bg = if checked {
319        checked_bg
320    } else {
321        config.container_color.unwrap_or(Color::TRANSPARENT)
322    };
323    let fg = if checked { checked_cc } else { cc };
324    let se = config
325        .state_elevation
326        .unwrap_or_else(super::ToggleButtonDefaults::state_elevation_default);
327    let pad_l = config
328        .content_padding
329        .map(|p| p.left)
330        .unwrap_or(super::ToggleButtonDefaults::HORIZONTAL_PADDING);
331    let pad_r = config
332        .content_padding
333        .map(|p| p.right)
334        .unwrap_or(super::ToggleButtonDefaults::HORIZONTAL_PADDING);
335    let mut m = Modifier::new()
336        .height(config.height)
337        .min_width(48.0)
338        .padding_values(PaddingValues {
339            left: pad_l,
340            right: pad_r,
341            top: 0.0,
342            bottom: 0.0,
343        })
344        .background(bg)
345        .align_items(AlignItems::CENTER)
346        .justify_content(JustifyContent::CENTER)
347        .state_colors(config.state_colors)
348        .state_elevation(se);
349    let tg_source: Rc<MutableInteractionSource> = config
350        .interaction_source
351        .clone()
352        .map(Rc::new)
353        .unwrap_or_else(|| remember(MutableInteractionSource::new));
354    m = m.interaction_source(&*tg_source);
355    if let Some((w, c, r)) = config.border {
356        m = m.border(w, c, r);
357    }
358    if config.enabled {
359        let cb = on_checked_change;
360        m = m.clickable().on_click(move || cb(!checked));
361    } else {
362        m = m.alpha(0.38);
363    }
364    m = m.then(modifier.clip_rounded_radii(split_trailing_shape_radii()));
365    with_content_color(fg, || Box(m).child(content(checked)))
366}
367
368/// State for the overflow menu in [`ButtonGroup`].
369pub struct ButtonGroupMenuState {
370    pub is_showing: bool,
371}
372
373impl ButtonGroupMenuState {
374    pub fn dismiss(&mut self) {
375        self.is_showing = false;
376    }
377    pub fn show(&mut self) {
378        self.is_showing = true;
379    }
380}
381
382/// Scope passed to [`ButtonGroup`]'s content closure.
383pub struct ButtonGroupScope {
384    items: Vec<ButtonGroupItem>,
385    connected: bool,
386}
387
388/// Internal item held by `ButtonGroupScope`.
389struct ButtonGroupItem {
390    button_group_content: Box<dyn FnOnce() -> View>,
391    menu_content: Option<Box<dyn FnOnce(&mut ButtonGroupMenuState) -> View>>,
392}
393
394impl ButtonGroupScope {
395    fn new() -> Self {
396        Self {
397            items: Vec::new(),
398            connected: false,
399        }
400    }
401
402    /// Add a clickable item (rendered as a [`Button`] internally).
403    pub fn clickable_item(
404        &mut self,
405        on_click: impl Fn() + 'static,
406        label: String,
407        icon: Option<View>,
408    ) {
409        let cb = Rc::new(on_click);
410        let cb2 = cb.clone();
411        self.items.push(ButtonGroupItem {
412            button_group_content: Box::new(move || {
413                let cb = cb2.clone();
414                let config = super::ButtonConfig {
415                    shape_radius: 0.0,
416                    ..Default::default()
417                };
418                super::Button(
419                    Modifier::new().flex_grow(1.0),
420                    move || (cb)(),
421                    config,
422                    move || {
423                        let label = label.clone();
424                        let t = Text(label).single_line();
425                        match icon.clone() {
426                            Some(ic) => Box(Modifier::new()).child((ic, t)),
427                            None => t,
428                        }
429                    },
430                )
431            }),
432            menu_content: None,
433        });
434    }
435
436    /// Add a toggleable item (rendered as a [`ToggleButton`] internally).
437    pub fn toggleable_item(
438        &mut self,
439        checked: bool,
440        on_checked_change: impl Fn(bool) + 'static,
441        label: String,
442        icon: Option<View>,
443    ) {
444        let cb = Rc::new(on_checked_change);
445        let cb2 = cb.clone();
446        self.items.push(ButtonGroupItem {
447            button_group_content: Box::new(move || {
448                let cb = cb2.clone();
449                let config = super::ToggleButtonConfig {
450                    shape_radius: 0.0,
451                    ..Default::default()
452                };
453                super::ToggleButton(
454                    checked,
455                    move |b| (cb)(b),
456                    config,
457                    move |_| {
458                        let label = label.clone();
459                        let t = Text(label).single_line();
460                        match icon.clone() {
461                            Some(ic) => Box(Modifier::new()).child((ic, t)),
462                            None => t,
463                        }
464                    },
465                )
466            }),
467            menu_content: None,
468        });
469    }
470
471    /// Add a custom item with a button group composable and an optional overflow menu content.
472    pub fn custom_item(
473        &mut self,
474        button_group_content: impl FnOnce() -> View + 'static,
475        menu_content: Option<impl FnOnce(&mut ButtonGroupMenuState) -> View + 'static>,
476    ) {
477        self.items.push(ButtonGroupItem {
478            button_group_content: Box::new(button_group_content),
479            menu_content: menu_content.map(|f| {
480                let b: Box<dyn FnOnce(&mut ButtonGroupMenuState) -> View> = Box::new(f);
481                b
482            }),
483        });
484    }
485}
486
487/// M3 ButtonGroup -> a horizontal sequence of related action items.
488///
489/// Items are added via [`ButtonGroupScope::clickable_item`] and
490/// [`ButtonGroupScope::toggleable_item`].
491pub fn ButtonGroup(
492    modifier: Modifier,
493    gap: f32,
494    content: impl FnOnce(&mut ButtonGroupScope),
495) -> View {
496    let mut scope = ButtonGroupScope::new();
497    content(&mut scope);
498    Row(modifier.gap(gap).align_items(AlignItems::CENTER)).with_children(
499        scope
500            .items
501            .into_iter()
502            .map(|item| (item.button_group_content)())
503            .collect::<Vec<View>>(),
504    )
505}
506
507fn resolve_button_colors(
508    config: &super::ButtonConfig,
509    def: super::ButtonColors,
510) -> (Color, Option<Color>, StateColors, Option<StateElevation>) {
511    if let Some(colors) = &config.colors {
512        let bg = if config.enabled {
513            colors.container_color
514        } else {
515            colors.disabled_container_color
516        };
517        let cc = if config.enabled {
518            colors.content_color
519        } else {
520            colors.disabled_content_color
521        };
522        let sc = StateColors {
523            default: Color::TRANSPARENT,
524            hovered: colors.content_color.with_alpha_f32(0.08),
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            pressed: e.pressed,
533            dragged: e.pressed,
534            disabled: e.disabled,
535        });
536        (cc, Some(bg), sc, se)
537    } else {
538        let cc = config.content_color.unwrap_or(def.content_color);
539        let bg = Some(config.container_color.unwrap_or(def.container_color));
540        let sc = if config.enabled {
541            config.state_colors
542        } else {
543            StateColors {
544                default: Color::TRANSPARENT,
545                hovered: Color::TRANSPARENT,
546                pressed: Color::TRANSPARENT,
547                dragged: Color::TRANSPARENT,
548                disabled: config.state_colors.disabled,
549            }
550        };
551        let se = config.state_elevation;
552        (cc, bg, sc, se)
553    }
554}
repose_material/material3/advbuttons.rs

repose_material/material3/
advbuttons.rs
