Port all components to function components

README.md

@@ -16,7 +16,7 @@ Bug reports, feature requests, and pull requests are welcome!
 
 Please try to match your code style to the existing codebase. If you think a change in that style is warranted, feel free to make a suggestion in a new Issue. 
 
-Much of this codebase uses struct components. **For new contributions please use functional components** unless you have good reason to use struct components. It is the [recommended default from Yew](https://yew.rs/docs/concepts/function-components)[^1], and we should be consistent. 
+**For new contributions please use functional components** unless you have good reason to use struct components. It is the [recommended default from Yew](https://yew.rs/docs/concepts/function-components)[^1], and we should be consistent. 
 [^1]: > function components - the recommended way to write components when starting with Yew and when writing simple presentation logic.
 
 Please be sure to try `cargo test` before submitting a PR.

packages/yew-bootstrap/src/component/accordion.rs

@@ -245,8 +245,8 @@ pub struct AccordionProps {
 ///             {
 ///                 items.iter().map(|item| {
 ///                     html_nested! {
-///                         <AccordionItem title={item.0.clone()}>
-///                             {item.0.clone()}
+///                         <AccordionItem title={item.0}>
+///                             {item.0}
 ///                         </AccordionItem>
 ///                     }
 ///                 }).collect::<Vec<VChild<AccordionItem>>>()

packages/yew-bootstrap/src/component/alert.rs

@@ -2,25 +2,6 @@ use yew::prelude::*;
 
 use crate::util::Color;
 
-/// # Alert component
-/// Used alongside [crate::util::Color] to create Alert components 
-/// 
-/// See [AlertProps] for a listing of properties
-/// 
-/// ## Example
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::Alert;
-/// use yew_bootstrap::util::Color;
-/// fn test() -> Html {
-///     html!{
-///         <Alert style={Color::Primary}>
-///             {"This is a primary alert!"}
-///         </Alert>
-///     }
-/// }
-/// ```
-pub struct Alert {}
 
 /// # Properties of [Alert]
 #[derive(Properties, Clone, PartialEq)]
@@ -42,29 +23,38 @@ pub struct AlertProps {
     pub text: String,
 }
 
-impl Component for Alert {
-    type Message = ();
-    type Properties = AlertProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-        let mut classes = Classes::new();
-        classes.push("alert");
-        classes.push(format!("alert-{}", props.style));
-        classes.push(props.class.clone());
-
-        html! {
-            <div
-                class={classes}
-                role="alert"
-            >
-                { &props.text }
-                { for props.children.iter() }
-            </div>
-        }
+/// # Alert component
+/// Used alongside [crate::util::Color] to create Alert components
+///
+/// See [AlertProps] for a listing of properties
+///
+/// ## Example
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::Alert;
+/// use yew_bootstrap::util::Color;
+/// fn test() -> Html {
+///     html!{
+///         <Alert style={Color::Primary}>
+///             {"This is a primary alert!"}
+///         </Alert>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn Alert(props: &AlertProps) -> Html {
+    let mut classes = Classes::new();
+    classes.push("alert");
+    classes.push(format!("alert-{}", props.style));
+    classes.push(props.class.clone());
+
+    html! {
+        <div
+            class={classes}
+            role="alert"
+        >
+            { &props.text }
+            { for props.children.iter() }
+        </div>
     }
 }

packages/yew-bootstrap/src/component/badge.rs

@@ -2,26 +2,6 @@ use yew::prelude::*;
 
 use crate::util::{Color, ArrangeX, ArrangeY};
 
-/// # Badge component
-/// Used alongside [crate::util::Color] to create Badge components
-///
-/// See [BadgeProps] for a listing of properties
-///
-/// ## Example
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::Badge;
-/// use yew_bootstrap::util::Color;
-/// fn test() -> Html {
-///     html!{
-///         <Badge style={Color::Primary}>
-///             {"This is a primary badge!"}
-///         </Badge>
-///     }
-/// }
-/// ```
-pub struct Badge {}
-
 /// # Properties of [Badge]
 #[derive(Properties, Clone, PartialEq)]
 pub struct BadgeProps {
@@ -50,43 +30,52 @@ pub struct BadgeProps {
     pub text: String,
 }
 
-impl Component for Badge {
-    type Message = ();
-    type Properties = BadgeProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-        let mut classes = Classes::new();
-        match &props.position {
-            Some(position) => {
-                classes.push("position-absolute".to_string());
-                classes.push(format!("{}", position.0));
-                classes.push(format!("{}", position.1));
-                classes.push("translate-middle".to_string());
-            }
-            None => {}
-        }
-        classes.push("badge");
-        if props.pill {
-            classes.push("rounded-pill");
-        }
-        classes.push(format!("bg-{}", props.style));
-        if [Color::Warning, Color::Info, Color::Light].contains(&props.style) {
-            classes.push("text-dark");
+/// # Badge component
+/// Used alongside [crate::util::Color] to create Badge components
+///
+/// See [BadgeProps] for a listing of properties
+///
+/// ## Example
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::Badge;
+/// use yew_bootstrap::util::Color;
+/// fn test() -> Html {
+///     html!{
+///         <Badge style={Color::Primary}>
+///             {"This is a primary badge!"}
+///         </Badge>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn Badge(props: &BadgeProps) -> Html {
+    let mut classes = Classes::new();
+    match &props.position {
+        Some(position) => {
+            classes.push("position-absolute".to_string());
+            classes.push(format!("{}", position.0));
+            classes.push(format!("{}", position.1));
+            classes.push("translate-middle".to_string());
         }
-        classes.push(props.class.clone());
+        None => {}
+    }
+    classes.push("badge");
+    if props.pill {
+        classes.push("rounded-pill");
+    }
+    classes.push(format!("bg-{}", props.style));
+    if [Color::Warning, Color::Info, Color::Light].contains(&props.style) {
+        classes.push("text-dark");
+    }
+    classes.push(props.class.clone());
 
-        html! {
-            <span
-                class={classes}
-            >
-                { &props.text }
-                { for props.children.iter() }
-            </span>
-        }
+    html! {
+        <span
+            class={classes}
+        >
+            { &props.text }
+            { for props.children.iter() }
+        </span>
     }
 }