Skip to main content

dxc_components/button/
button.rs

1use super::props::ButtonProps;
2use crate::DxcIcon;
3use dioxus::prelude::*;
4use dxc_hooks::UseNamespace;
5use dxc_icons::spawn_icon;
6use dxc_macros::classes;
7use dxc_types::namespace::Block;
8
9#[component]
10pub fn DxcButton(props: ButtonProps) -> Element {
11    let size = use_signal(|| props.size());
12
13    let loading = use_signal(|| props.loading());
14
15    let should_add_space = use_signal(|| false);
16
17    let ns = UseNamespace::new(Block::Button, None);
18    let classes = classes!(
19        ns.b(),
20        ns.m_(props.type_().to_string()),
21        ns.m_(size().to_string()),
22        ns.is_(String::from("disabled"), Some(props.disabled())),
23        ns.is_(String::from("loading"), Some(props.loading())),
24        ns.is_(String::from("plain"), Some(props.plain())),
25        ns.is_(String::from("round"), Some(props.round())),
26        ns.is_(String::from("circle"), Some(props.circle())),
27        ns.is_(String::from("text"), Some(props.text())),
28        ns.is_(String::from("link"), Some(props.link())),
29        ns.is_(String::from("has-bg"), Some(props.bg())),
30        props.class(),
31    );
32
33    let slot_classes = classes! {
34        if should_add_space(){
35            &ns.em_(String::from("text"), String::from("expand"))
36        }
37    };
38
39    rsx! {
40        button {
41            class: classes,
42            style: props.style,
43            onclick: move |evt| {
44                if let Some(onclick) = props.onclick.as_ref() {
45                    onclick.call(evt);
46                }
47            },
48            if loading() {
49                DxcIcon {
50                    class: ns.is_(String::from("loading"), None),
51                    match props.loading_icon {
52                        Some(s) => spawn_icon(&s),
53                        None => spawn_icon("Loading")
54                    }
55                }
56            } else {
57                if props.icon.is_some() {
58                    DxcIcon {
59                        icon: props.icon().clone(),
60                    }
61                }
62                span {
63                    class: slot_classes,
64                    {props.children},
65                }
66            }
67        }
68    }
69}