1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
use crate::WithBreakpoints; use yew::prelude::*; #[derive(Clone, PartialEq, Properties)] pub struct Props { #[prop_or_default] pub children: Children, #[prop_or_default] pub gutter: bool, #[prop_or_default] pub cols: WithBreakpoints<usize>, } pub struct Grid { props: Props, } impl Component for Grid { type Message = (); type Properties = Props; fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self { Self { props } } fn update(&mut self, _: Self::Message) -> ShouldRender { true } fn change(&mut self, props: Self::Properties) -> ShouldRender { if self.props != props { self.props = props; true } else { false } } fn view(&self) -> Html { let mut classes = Classes::from("pf-l-grid"); if self.props.gutter { classes.push("pf-m-gutter"); } classes = classes.extend( self.props .cols .mapped(|cols| format!("pf-m-all-{}-col", cols)), ); return html! { <div class=classes> { for self.props.children.iter() } </div> }; } } #[derive(Clone, PartialEq, Properties)] pub struct GridItemProps { #[prop_or_default] pub children: Children, #[prop_or_default] pub cols: WithBreakpoints<u16>, #[prop_or_default] pub rows: WithBreakpoints<u16>, #[prop_or_default] pub offset: WithBreakpoints<u16>, } pub struct GridItem { props: GridItemProps, } impl Component for GridItem { type Message = (); type Properties = GridItemProps; fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self { Self { props } } fn update(&mut self, _: Self::Message) -> ShouldRender { true } fn change(&mut self, props: Self::Properties) -> ShouldRender { if self.props != props { self.props = props; true } else { false } } fn view(&self) -> Html { let mut classes = Classes::from("pf-l-grid__item"); classes = classes.extend(self.props.cols.mapped(|cols| format!("pf-m-{}-col", cols))); classes = classes.extend(self.props.rows.mapped(|cols| format!("pf-m-{}-row", cols))); classes = classes.extend( self.props .offset .mapped(|cols| format!("pf-m-offset-{}-col", cols)), ); return html! { <div class=classes> { for self.props.children.iter() } </div> }; } }