feat(bootstrap): add input addon support to Dioxus (#430)

Author: DanielleHuisman

packages/styles/shield-bootstrap/src/dioxus.rs

@@ -1,5 +1,6 @@
 mod form;
 mod input;
+mod input_addon;
 mod method_form;
 
 use dioxus::prelude::*;

packages/styles/shield-bootstrap/src/dioxus/input.rs

@@ -1,7 +1,9 @@
 use dioxus::prelude::*;
-use shield::{Input, InputValue};
+use shield::{Input, InputType, InputValue};
 use shield_dioxus::Query;
 
+use crate::dioxus::input_addon::FormInputAddon;
+
 #[derive(Clone, PartialEq, Props)]
 pub struct FormInputProps {
     input: Input,
@@ -19,6 +21,83 @@ pub fn FormInput(props: FormInputProps) -> Element {
         origin.set(web_sys::window().and_then(|window| window.location().origin().ok()))
     });
 
+    let value = props.input.value.and_then(|value| match value {
+        InputValue::Origin => origin(),
+        InputValue::Query { key } => query.get(&key).cloned(),
+        InputValue::String { value } => Some(value.clone()),
+    });
+
+    let mut element = match props.input.r#type {
+        InputType::Button(_) | InputType::Reset(_) | InputType::Submit(_) => {
+            return rsx! {
+                button {
+                    class: "btn btn-outline-primary d-flex align-items-center justify-content-center gap-1",
+                    name: props.input.name,
+                    type: match props.input.r#type {
+                        InputType::Reset(_) => "reset",
+                        InputType::Submit(_) => "submit",
+                        _ => "button"
+                    },
+
+                    if let Some(addon) = props.input.addon_start {
+                        FormInputAddon {
+                            addon,
+                            group: false,
+                        }
+                    }
+
+                    {value}
+
+                    if let Some(addon) = props.input.addon_end {
+                        FormInputAddon {
+                            addon,
+                            group: false,
+                        }
+                    }
+                }
+            };
+        }
+        _ => {
+            rsx! {
+                input {
+                    class: "form-control",
+                    name: props.input.name,
+                    type: props.input.r#type.as_str(),
+                    value,
+                    placeholder: props.input.label.clone(),
+                }
+            }
+        }
+    };
+
+    if matches!(props.input.r#type, InputType::Hidden(_)) {
+        return element;
+    }
+
+    if props.input.addon_start.is_some() || props.input.addon_end.is_some() {
+        element = rsx! {
+            div {
+                class: "input-group",
+
+                if let Some(addon) = props.input.addon_start {
+                    FormInputAddon {
+                        addon,
+                        group: true,
+                    }
+                }
+
+                { element }
+
+                if let Some(addon) = props.input.addon_end {
+                    FormInputAddon {
+                        addon,
+                        group: true,
+                    }
+                }
+            }
+        }
+    }
+
     rsx! {
         div {
             class: "mb-3",
@@ -33,19 +112,7 @@ pub fn FormInput(props: FormInputProps) -> Element {
                 }
             }
 
-            input {
-                class: "form-control",
-                name: props.input.name,
-                type: props.input.r#type.as_str(),
-                value: props.input.value.map(|value| match value {
-                    InputValue::Origin => origin(),
-                    InputValue::Query { key } => {
-                        query.get(&key).cloned()
-                    },
-                    InputValue::String { value } => Some(value.clone()),
-                }),
-                placeholder: props.input.label,
-            }
+            {element}
         }
     }
 }

packages/styles/shield-bootstrap/src/dioxus/input_addon.rs

@@ -0,0 +1,38 @@
+use dioxus::prelude::*;
+use shield::InputAddon;
+
+#[derive(Clone, PartialEq, Props)]
+pub struct FormInputAddonProps {
+    addon: InputAddon,
+    group: bool,
+}
+
+#[component]
+pub fn FormInputAddon(props: FormInputAddonProps) -> Element {
+    match props.addon {
+        InputAddon::Image { alt, src } => rsx! {
+            img {
+                src,
+                alt,
+                width: 16,
+                height: 16,
+            }
+        },
+        InputAddon::Text { text } => {
+            if props.group {
+                rsx! {
+                    span {
+                        class: "input-group-text",
+                        "{text}"
+                    }
+                }
+            } else {
+                rsx! {
+                    span {
+                        "{text}"
+                    }
+                }
+            }
+        }
+    }
+}