docs: Add view of LoadingButton

RustVis · Jul 22, 2023 · 8d15e36 · 8d15e36
1 parent dfce60f
commit 8d15e36
Show file tree

Hide file tree

Showing 4 changed files with 238 additions and 21 deletions.
diff --git a/crates/zu-docs/src/views/inputs/button_page.rs b/crates/zu-docs/src/views/inputs/button_page.rs
@@ -3,7 +3,7 @@
 // in the LICENSE file.
 
 use stylist::Style;
-use yew::{classes, function_component, html, Html, MouseEvent};
+use yew::{classes, function_component, html, Callback, Html, MouseEvent};
 use zu::button::Button;
 use zu::icon_button::IconButton;
 use zu::loading_button::{LoadingButton, Position};
@@ -233,6 +233,112 @@ fn create_icon_button_view() -> Html {
     }
 }
 
+fn create_loading_button_toggle_view() -> Html {
+    let margin_style = Style::new(
+        r#"
+        button {
+            margin: 8px;
+        }
+        "#,
+    )
+    .expect("Failed to create margin-style");
+
+    let handle_click = Callback::from(|event: MouseEvent| {
+        event.prevent_default();
+        log::info!("on click");
+    });
+
+    // TODO(Shaohua): Replace with state.
+    let loading = true;
+
+    html! {
+        <>
+        <p>{"Toggle the loading switch to see the transition between the different states."}</p>
+        <DemoBox>
+        <Box classes={classes!(margin_style.get_class_name().to_owned())}>
+            <LoadingButton
+                size={Size::Small}
+                on_click={handle_click.clone()}
+                loading={loading}
+                variant={Variant::Outlined}
+                disabled=true
+                >
+                <span>{"disabled"}</span>
+            </LoadingButton>
+            <LoadingButton
+                size={Size::Small}
+                on_click={handle_click.clone()}
+                loading={loading}
+                loading_indicator="Loading…"
+                variant={Variant::Outlined}
+                >
+                <span>{"Fetch data"}</span>
+            </LoadingButton>
+            <LoadingButton
+                size={Size::Small}
+                on_click={handle_click.clone()}
+                end_icon={html!{<Send />}}
+                loading={loading}
+                loading_position={Position::End}
+                variant={Variant::Contained}
+                >
+                <span>{"Send"}</span>
+            </LoadingButton>
+            <LoadingButton
+                size={Size::Small}
+                color={Color::Secondary}
+                on_click={handle_click.clone()}
+                loading={loading}
+                loading_position={Position::Start}
+                start_icon={html!{<Save />}}
+                variant={Variant::Contained}
+                >
+                <span>{"Save"}</span>
+            </LoadingButton>
+        </Box>
+
+        <Box classes={classes!(margin_style.get_class_name().to_owned())}>
+            <LoadingButton
+                on_click={handle_click.clone()}
+                loading={loading}
+                variant={Variant::Outlined}
+                disabled=true
+                >
+                <span>{"disabled"}</span>
+            </LoadingButton>
+            <LoadingButton
+                on_click={handle_click.clone()}
+                loading={loading}
+                loading_indicator="Loading…"
+                variant={Variant::Outlined}
+                >
+                <span>{"Fetch data"}</span>
+            </LoadingButton>
+            <LoadingButton
+                on_click={handle_click.clone()}
+                end_icon={html!{<Send />}}
+                loading={loading}
+                loading_position={Position::End}
+                variant={Variant::Contained}
+                >
+                <span>{"Send"}</span>
+            </LoadingButton>
+            <LoadingButton
+                color={Color::Secondary}
+                on_click={handle_click}
+                loading={loading}
+                loading_position={Position::Start}
+                start_icon={html!{<Save />}}
+                variant={Variant::Contained}
+                >
+                <span>{"Save"}</span>
+            </LoadingButton>
+        </Box>
+        </DemoBox>
+        </>
+    }
+}
+
 fn create_loading_button_view() -> Html {
     html! {
         <>
@@ -250,6 +356,9 @@ fn create_loading_button_view() -> Html {
                 {"Save"}
             </LoadingButton>
         </DemoBox>
+
+        {create_loading_button_toggle_view()}
+
         </>
     }
 }

diff --git a/crates/zu/src/button/mod.rs b/crates/zu/src/button/mod.rs
@@ -66,6 +66,24 @@ pub struct Props {
     #[prop_or_default]
     pub href: AttrValue,
 
+    /// The size of the component.
+    ///
+    /// `Small` is equivalent to the dense button styling.
+    ///
+    /// Default is `Medium`.
+    #[prop_or(Size::Medium)]
+    pub size: Size,
+
+    #[prop_or_default]
+    pub style: AttrValue,
+
+    #[prop_or_default]
+    pub tab_index: Option<i32>,
+
+    /// Default value is `Text`.
+    #[prop_or_default]
+    pub variant: ButtonVariant,
+
     #[prop_or_default]
     pub on_blur: Option<Callback<FocusEvent>>,
 
@@ -111,24 +129,6 @@ pub struct Props {
 
     #[prop_or_default]
     pub on_touch_start: Option<Callback<TouchEvent>>,
-
-    /// The size of the component.
-    ///
-    /// `Small` is equivalent to the dense button styling.
-    ///
-    /// Default is `Medium`.
-    #[prop_or(Size::Medium)]
-    pub size: Size,
-
-    #[prop_or_default]
-    pub style: AttrValue,
-
-    #[prop_or_default]
-    pub tab_index: Option<i32>,
-
-    /// Default value is `Text`.
-    #[prop_or_default]
-    pub variant: ButtonVariant,
 }
 
 fn create_start_icon(icon: &Option<Html>, button_size: Size) -> Html {

diff --git a/crates/zu/src/icon_button/mod.rs b/crates/zu/src/icon_button/mod.rs
@@ -6,7 +6,10 @@ mod color;
 mod edge;
 mod size;
 
-use yew::{classes, function_component, html, AttrValue, Children, Classes, Html, Properties};
+use yew::{
+    classes, function_component, html, AttrValue, Callback, Children, Classes, DragEvent,
+    FocusEvent, Html, KeyboardEvent, MouseEvent, Properties, TouchEvent,
+};
 
 use crate::button_base::ButtonBase;
 use crate::styles::color::Color;
@@ -49,6 +52,52 @@ pub struct Props {
 
     #[prop_or_default]
     pub style: AttrValue,
+
+    #[prop_or_default]
+    pub on_blur: Option<Callback<FocusEvent>>,
+
+    #[prop_or_default]
+    pub on_click: Option<Callback<MouseEvent>>,
+
+    #[prop_or_default]
+    pub on_context_menu: Option<Callback<MouseEvent>>,
+
+    #[prop_or_default]
+    pub on_drag_leave: Option<Callback<DragEvent>>,
+
+    #[prop_or_default]
+    pub on_focus: Option<Callback<FocusEvent>>,
+
+    /// Callback fired when the component is focused with a keyboard.
+    #[prop_or_default]
+    pub on_focus_visible: Option<Callback<FocusEvent>>,
+
+    #[prop_or_default]
+    pub on_key_down: Option<Callback<KeyboardEvent>>,
+
+    #[prop_or_default]
+    pub on_key_up: Option<Callback<KeyboardEvent>>,
+
+    #[prop_or_default]
+    pub on_mouse_down: Option<Callback<MouseEvent>>,
+
+    #[prop_or_default]
+    pub on_mouse_enter: Option<Callback<MouseEvent>>,
+
+    #[prop_or_default]
+    pub on_mouse_leave: Option<Callback<MouseEvent>>,
+
+    #[prop_or_default]
+    pub on_mouse_up: Option<Callback<MouseEvent>>,
+
+    #[prop_or_default]
+    pub on_touch_end: Option<Callback<TouchEvent>>,
+
+    #[prop_or_default]
+    pub on_touch_move: Option<Callback<TouchEvent>>,
+
+    #[prop_or_default]
+    pub on_touch_start: Option<Callback<TouchEvent>>,
 }
 
 #[function_component(IconButton)]

diff --git a/crates/zu/src/loading_button/mod.rs b/crates/zu/src/loading_button/mod.rs
@@ -4,9 +4,14 @@
 
 mod position;
 
-use yew::{function_component, html, AttrValue, Children, Classes, Html, Properties};
+use yew::{
+    function_component, html, AttrValue, Callback, Children, Classes, DragEvent, FocusEvent, Html,
+    KeyboardEvent, MouseEvent, Properties, TouchEvent,
+};
 
 use crate::styles::button_variant::ButtonVariant;
+use crate::styles::color::Color;
+use crate::styles::size::Size;
 pub use position::Position;
 
 #[derive(Debug, Clone, PartialEq, Properties)]
@@ -17,6 +22,10 @@ pub struct Props {
     #[prop_or_default]
     pub classes: Classes,
 
+    /// Default value is `Color::Default`.
+    #[prop_or(Color::Default)]
+    pub color: Color,
+
     #[prop_or(false)]
     pub disabled: bool,
 
@@ -35,11 +44,61 @@ pub struct Props {
     #[prop_or_default]
     pub end_icon: Option<Html>,
 
+    /// Default is `Size::Medium`.
+    #[prop_or(Size::Medium)]
+    pub size: Size,
+
     #[prop_or_default]
     pub style: AttrValue,
 
     #[prop_or_default]
     pub variant: ButtonVariant,
+
+    #[prop_or_default]
+    pub on_blur: Option<Callback<FocusEvent>>,
+
+    #[prop_or_default]
+    pub on_click: Option<Callback<MouseEvent>>,
+
+    #[prop_or_default]
+    pub on_context_menu: Option<Callback<MouseEvent>>,
+
+    #[prop_or_default]
+    pub on_drag_leave: Option<Callback<DragEvent>>,
+
+    #[prop_or_default]
+    pub on_focus: Option<Callback<FocusEvent>>,
+
+    /// Callback fired when the component is focused with a keyboard.
+    #[prop_or_default]
+    pub on_focus_visible: Option<Callback<FocusEvent>>,
+
+    #[prop_or_default]
+    pub on_key_down: Option<Callback<KeyboardEvent>>,
+
+    #[prop_or_default]
+    pub on_key_up: Option<Callback<KeyboardEvent>>,
+
+    #[prop_or_default]
+    pub on_mouse_down: Option<Callback<MouseEvent>>,
+
+    #[prop_or_default]
+    pub on_mouse_enter: Option<Callback<MouseEvent>>,
+
+    #[prop_or_default]
+    pub on_mouse_leave: Option<Callback<MouseEvent>>,
+
+    #[prop_or_default]
+    pub on_mouse_up: Option<Callback<MouseEvent>>,
+
+    #[prop_or_default]
+    pub on_touch_end: Option<Callback<TouchEvent>>,
+
+    #[prop_or_default]
+    pub on_touch_move: Option<Callback<TouchEvent>>,
+
+    #[prop_or_default]
+    pub on_touch_start: Option<Callback<TouchEvent>>,
 }
 
 #[function_component(LoadingButton)]