ribir_widgets 0.3.0

A non-intrusive declarative GUI framework, to build modern native/wasm cross-platform applications.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

use ribir_core::prelude::*;

use super::{ButtonImpl, ButtonTemplate, ButtonType, IconPosition};

#[derive(Clone)]
pub struct OutlinedButtonStyle {
  pub height: f32,
  pub icon_size: Size,
  pub label_gap: f32,
  pub icon_pos: IconPosition,
  pub label_style: CowArc<TextStyle>,
  pub radius: f32,
  pub padding_style: EdgeInsets,
  pub border_width: f32,
}

impl CustomStyle for OutlinedButtonStyle {
  fn default_style(ctx: &BuildCtx) -> Self {
    OutlinedButtonStyle {
      height: 40.,
      icon_size: Size::splat(18.),
      label_gap: 8.,
      icon_pos: IconPosition::Before,
      label_style: TypographyTheme::of(ctx).label_large.text.clone(),
      radius: 20.,
      padding_style: EdgeInsets::horizontal(16.),
      border_width: 1.,
    }
  }
}

#[derive(Clone, Declare)]
pub struct OutlinedButtonDecorator {
  #[allow(unused)]
  pub button_type: ButtonType,
  pub color: Color,
}

impl ComposeDecorator for OutlinedButtonDecorator {
  fn compose_decorator(_: State<Self>, host: Widget) -> impl WidgetBuilder { fn_widget!(host) }
}

/// OutlinedButton usage
///
/// # example
/// ```
/// # use ribir_core::prelude::*;
/// # use ribir_widgets::prelude::{OutlinedButton, Label};
///
/// // only icon
/// let outlined_icon_button = fn_widget! {
///   @OutlinedButton { @{ svgs::ADD } }
/// };
///
/// // only label
/// let outlined_label_button = fn_widget! {
///   @OutlinedButton { @{ Label::new("outlined button") } }
/// };
///
/// // both icon and label
/// let outlined_button = fn_widget! {
///    @OutlinedButton {
///     @ { svgs::ADD }
///     @ { Label::new("outlined button")}
///   }
/// };
///
/// // use custom color
/// let custom_color_button = fn_widget! {
///   @OutlinedButton {
///     color: Color::RED,
///     @ { svgs::ADD }
///     @ { Label::new("outlined button") }
///   }
/// };
/// ```
#[derive(Default, Declare)]
pub struct OutlinedButton {
  #[declare(default=Palette::of(ctx!()).primary())]
  color: Color,
}

impl ComposeChild for OutlinedButton {
  type Child = ButtonTemplate;

  fn compose_child(this: impl StateWriter<Value = Self>, child: Self::Child) -> impl WidgetBuilder {
    let ButtonTemplate { icon, label } = &child;
    let button_type = match (&icon, &label) {
      (Some(_), Some(_)) => ButtonType::BOTH,
      (Some(_), None) => ButtonType::ICON,
      (None, Some(_)) => ButtonType::LABEL,
      (None, None) => panic!("Button content cannot be empty!"),
    };

    fn_widget! {
      @ {
        let OutlinedButtonStyle {
          height,
          icon_size,
          label_gap,
          icon_pos,
          label_style,
          radius,
          padding_style,
          border_width,
        } = OutlinedButtonStyle::of(ctx!());

        @OutlinedButtonDecorator {
          button_type,
          color: pipe!($this.color),
          @ButtonImpl {
            height,
            icon_size,
            label_gap,
            icon_pos,
            label_style,
            background_color: None,
            foreground_color: pipe!(Palette::of(ctx!()).base_of(&$this.color)),
            radius,
            border_style: pipe!(Border::all(BorderSide {
              width: border_width,
              color: Palette::of(ctx!()).base_of(&$this.color).into()
            })),
            padding_style,

            @ { child }
          }
        }
      }
    }
  }
}