Merge pull request #70 from spielrs/fix-navbar-movile-optimize-render

improve documentation and provide prop to hide navItems in mobile lay…

crate/Cargo.toml

@@ -6,7 +6,7 @@ license = "MIT/Apache-2.0"
 name = "yew_style_page"
 readme = "./README.md"
 repository = "https://github.com/spielrs/yew-styles-page.git"
-version = "0.7.2"
+version = "0.7.3"
 
 [lib]
 crate-type = ["cdylib"]

crate/src/page/navbar_page.rs

@@ -1,4 +1,6 @@
 use super::highlighters::{navbar_code, navbar_with_a_tag};
+use wasm_bindgen::JsCast;
+use web_sys::Element;
 use yew::prelude::*;
 use yew_prism::Prism;
 use yew_styles::{
@@ -15,6 +17,7 @@ pub struct NavbarPage {
     link: ComponentLink<Self>,
     navbar_menu: Vec<String>,
     item_menu: Vec<Vec<bool>>,
+    close_navbar_mobile: bool,
 }
 
 #[derive(Clone)]
@@ -35,6 +38,7 @@ struct ElementRender {
 
 pub enum Msg {
     ChangeType(usize, usize, String),
+    CloseNavarMobile(MouseEvent),
 }
 
 #[derive(Clone, Properties)]
@@ -49,6 +53,7 @@ impl Component for NavbarPage {
             link,
             navbar_menu: vec![String::from("home"); 50],
             item_menu: vec![vec![true, false, false, false]; 50],
+            close_navbar_mobile: false,
         }
     }
 
@@ -65,14 +70,37 @@ impl Component for NavbarPage {
                 }
                 self.item_menu[index][item_index] = true;
             }
+            Msg::CloseNavarMobile(mouse_event) => {
+                let target_class = mouse_event
+                    .target()
+                    .unwrap()
+                    .dyn_into::<Element>()
+                    .unwrap()
+                    .class_list();
+
+                let target_parent = mouse_event
+                    .target()
+                    .unwrap()
+                    .dyn_into::<Element>()
+                    .unwrap()
+                    .parent_element()
+                    .unwrap()
+                    .tag_name();
+
+                if !target_class.value().contains("navbar-menu") && target_parent != "svg" {
+                    self.close_navbar_mobile = true;
+                } else {
+                    self.close_navbar_mobile = false
+                }
+            }
         };
 
         true
     }
 
     fn view(&self) -> Html {
         html! {
-            <>
+            <div onclick=self.link.callback(|e| Msg::CloseNavarMobile(e))>
                 <h1>{"Navbar Components"}</h1>
 
                 <h2>{"Features required"}</h2>
@@ -88,6 +116,7 @@ impl Component for NavbarPage {
                 <ul>
                     <li><b>{"navbar_palette: "}</b>{"type navbar style. Options included in "}<code>{"Pallete"}</code>{". Default "}<code>{"Standard"}</code></li>
                     <li><b>{"button_style: "}</b>{"navbar styles. Options included in "}<code>{"Style"}</code>{". Default "}<code>{"Regular"}</code>{"."}</li>
+                    <li><b>{"hide_navbar_items_mobile: "}</b>{"Hide Navbar items in mobile. Default "}<code>{"false"}</code></li>
                     <li><b>{"fixed: "}</b>{"the location of the navbar which is fixed .Options included in "}<code>{"Fixed"}</code>{". Default "}<code>{"Top"}</code>{"."}</li>
                     <li><b>{"branch: "}</b>{"vnode embedded in the beginning of the navbar, useful to include a branch logo. Optional"}</li>
                     <li><b>{"key: "}</b>{"general property to add keys."}</li>
@@ -126,8 +155,8 @@ impl Component for NavbarPage {
                     language="rust"/>
 
                 <h2>{"Visual examples"}</h2>
-                {get_style(self.link.clone(), self.navbar_menu.clone(), self.item_menu.clone())}
-            </>
+                {get_style(self.link.clone(), self.navbar_menu.clone(), self.item_menu.clone(), self.close_navbar_mobile)}
+            </div>
         }
     }
 }
@@ -136,6 +165,7 @@ fn get_style(
     link: ComponentLink<NavbarPage>,
     navbar_menu: Vec<String>,
     item_menu: Vec<Vec<bool>>,
+    close_navbar_mobile: bool,
 ) -> Html {
     let styles = vec![
         NavbarStyle {
@@ -162,6 +192,7 @@ fn get_style(
                 navbar_menu.clone(),
                 item_menu.clone(),
                 index,
+                close_navbar_mobile,
             );
 
             index = navbar.index + 1;
@@ -177,6 +208,7 @@ fn get_navbar_palette(
     navbar_menu: Vec<String>,
     item_menu: Vec<Vec<bool>>,
     index: usize,
+    close_navbar_mobile: bool,
 ) -> ElementRender {
     let mut navbar_palette_rendered = index;
     let types = vec![
@@ -224,6 +256,7 @@ fn get_navbar_palette(
                         fixed=Fixed::None
                         navbar_style=style.style.clone()
                         navbar_palette=navbar_palette.navbar_palette
+                        hide_navbar_items_mobile = close_navbar_mobile
                         branch=html!{<img src="/spielrs_logo.png"/>}
                     >
                         <NavbarContainer justify_content=JustifyContent::FlexStart(Mode::NoMode)>

crate/yew_styles/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "yew_styles"
-version = "0.7.2"
+version = "0.7.3"
 description = "Framework styles for yew"
 documentation = "https://docs.rs/crate/yew_styles"
 authors = ["Francisco Jesus Navarro Cortes <[email protected]>"]

crate/yew_styles/src/components/button.rs

@@ -102,7 +102,7 @@ impl From<Props> for ButtonProps {
 
 #[derive(Clone, Properties)]
 pub struct Props {
-    /// Type botton style. Options included in `Pallete`
+    /// Type botton style. Default `Palette::Standard`
     #[prop_or(Palette::Standard)]
     pub button_palette: Palette,
     /// General property to add custom class styles
@@ -117,10 +117,10 @@ pub struct Props {
     /// General property to add keys
     #[prop_or_default]
     pub key: String,
-    /// Three diffent button standard sizes. Options included in `Size`
+    /// Three diffent button standard sizes. Default `Size::Medium`
     #[prop_or(Size::Medium)]
     pub button_size: Size,
-    /// Button styles. Options included in `Style`
+    /// Button styles. Default `Style::Regular`
     #[prop_or(Style::Regular)]
     pub button_style: Style,
     /// Click event for button. Required

crate/yew_styles/src/components/card.rs

@@ -139,7 +139,7 @@ pub struct Card {
     props: Props,
 }
 
-#[derive(Clone, Properties)]
+#[derive(Clone, PartialEq, Properties)]
 pub struct Props {
     /// A dragged item (element or text selection) is dragged
     #[prop_or(Callback::noop())]
@@ -169,40 +169,40 @@ pub struct Props {
     /// Click event for card
     #[prop_or(Callback::noop())]
     pub onclick_signal: Callback<MouseEvent>,
-    /// If the item is draggable
+    /// If the item is draggable. Default `false`
     #[prop_or(false)]
     pub draggable: bool,
-    /// Header content of the card
+    /// Header content of the card. Default `None`
     #[prop_or(None)]
     pub header: Option<Html>,
-    /// The size of the header card based in Flexbox
+    /// The size of the header card based in Flexbox. Default `4`
     #[prop_or(4)]
     pub header_size: i8,
-    /// Body content of the card
+    /// Body content of the card. Default None
     #[prop_or(None)]
     pub body: Option<Html>,
-    /// The size of the body card based in Flexbox
+    /// The size of the body card based in Flexbox. Default `6`
     #[prop_or(6)]
     pub body_size: i8,
     /// Footer content of the card
     #[prop_or(None)]
     pub footer: Option<Html>,
-    /// The size of the footer card based in Flexbox
+    /// The size of the footer card based in Flexbox. Default `2`
     #[prop_or(2)]
     pub footer_size: i8,
-    /// Without split in parts, only a single content
+    /// Without split in parts, only a single content. Default `None`
     #[prop_or(None)]
     pub single_content: Option<Html>,
-    /// Type card purpose style
+    /// Type card purpose style. Default `Palette::Standard`
     #[prop_or(Palette::Standard)]
     pub card_palette: Palette,
-    /// Card styles
+    /// Card styles. Default `Style::Regular`
     #[prop_or(Style::Regular)]
     pub card_style: Style,
-    /// three diffent card standard sizes
+    /// three diffent card standard sizes. Default `Size::Medium`
     #[prop_or(Size::Medium)]
     pub card_size: Size,
-    /// if hove, focus, active effects are enable
+    /// if hove, focus, active effects are enable. Default `true`
     #[prop_or(true)]
     pub interaction_effect: bool,
     /// General property to get the ref of the component
@@ -272,8 +272,12 @@ impl Component for Card {
     }
 
     fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        self.props = props;
-        true
+        if self.props != props {
+            self.props = props;
+            true
+        } else {
+            false
+        }
     }
 
     fn view(&self) -> Html {

crate/yew_styles/src/components/forms/form_component.rs

@@ -350,16 +350,16 @@ pub struct Form {
     props: Props,
 }
 
-#[derive(Clone, Properties)]
+#[derive(Clone, PartialEq, Properties)]
 pub struct Props {
-    /// Signal to emit the event submit.
+    /// Signal to emit the event submit. Default
     #[prop_or(Callback::noop())]
     pub onsubmit_signal: Callback<FocusEvent>,
     pub children: Children,
     /// The URL that processes the form submission
     #[prop_or_default]
     pub action: String,
-    /// The HTTP method to submit the form
+    /// The HTTP method to submit the form. Default `Method::Post`
     #[prop_or(Method::Post)]
     pub method: Method,
     /// The name of the form
@@ -379,7 +379,7 @@ pub struct Props {
     pub id: String,
 }
 
-#[derive(Clone)]
+#[derive(Clone, PartialEq)]
 pub enum Method {
     Post,
     Get,
@@ -409,8 +409,12 @@ impl Component for Form {
     }
 
     fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        self.props = props;
-        true
+        if self.props != props {
+            self.props = props;
+            true
+        } else {
+            false
+        }
     }
 
     fn view(&self) -> Html {

crate/yew_styles/src/components/forms/form_file.rs

@@ -9,14 +9,14 @@ pub struct FormFile {
     props: Props,
 }
 
-#[derive(Clone, Properties)]
+#[derive(Clone, PartialEq, Properties)]
 pub struct Props {
-    /// One or more unique file type specifiers describing file types to allow
+    /// One or more unique file type specifiers describing file types to allow. Required
     pub accept: Vec<String>,
-    /// The input style according with the purpose
+    /// The input style according with the purpose. Default `Palette::Standard`
     #[prop_or(Palette::Standard)]
     pub input_palette: Palette,
-    /// The size of the input
+    /// The size of the input. Default `Size::Medium`
     #[prop_or(Size::Medium)]
     pub input_size: Size,
     /// Signal to emit the event change
@@ -25,37 +25,37 @@ pub struct Props {
     #[prop_or_default]
     pub capture: String,
     /// Whether to allow multiple values
-    #[prop_or_default]
+    #[prop_or(false)]
     pub multiple: bool,
-    /// Hide the file input element
+    /// Hide the file input element. Default `false`
     #[prop_or(false)]
     pub hidden: bool,
-    /// Underline style instead of box, like Material
-    #[prop_or_default]
+    /// Underline style instead of box, like Material. Default `false`
+    #[prop_or(false)]
     pub underline: bool,
-    /// Error state for validation
-    #[prop_or_default]
+    /// Error state for validation. Default `false`
+    #[prop_or(false)]
     pub error_state: bool,
     /// Show error message when error_state is true
     #[prop_or_default]
     pub error_message: String,
     /// Alt attribute for the image type
     #[prop_or_default]
     pub alt: String,
-    /// Automatically focus the form control when the page is loaded
-    #[prop_or_default]
+    /// Automatically focus the form control when the page is loaded. Default `false`
+    #[prop_or(false)]
     pub autofocus: bool,
     /// The name of the input
     #[prop_or_default]
     pub name: String,
-    /// A value is required or must be check for the form to be submittable
+    /// A value is required or must be check for the form to be submittable. Default `false`
     #[prop_or(false)]
     pub required: bool,
-    /// The value is not editable
-    #[prop_or_default]
+    /// The value is not editable. Default `false`
+    #[prop_or(false)]
     pub readonly: bool,
-    /// Whether the form control is disabled
-    #[prop_or_default]
+    /// Whether the form control is disabled. Default `false`
+    #[prop_or(false)]
     pub disabled: bool,
     /// General property to get the ref of the component
     #[prop_or_default]
@@ -95,8 +95,12 @@ impl Component for FormFile {
     }
 
     fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        self.props = props;
-        true
+        if self.props != props {
+            self.props = props;
+            true
+        } else {
+            false
+        }
     }
 
     fn view(&self) -> Html {