jinya_ui/layout/
button_row.rs

1use yew::{Component, ComponentLink, Html};
2use yew::prelude::*;
3
4pub fn get_css<'a>() -> &'a str {
5    // language=CSS
6    "
7.jinya-button-row {
8    width: 100%;
9    padding-top: 0.5rem;
10    padding-bottom: 0.5rem;
11    display: flex;
12}
13
14.jinya-button-row--align-end {
15    justify-content: flex-end;
16}
17
18.jinya-button-row--align-end .jinya-button {
19    margin-left: 1rem;
20}
21
22.jinya-button-row--align-start {
23    justify-content: flex-start;
24}
25
26.jinya-button-row--align-start .jinya-button {
27    margin-right: 1rem;
28}
29    "
30}
31
32#[derive(Clone, PartialEq)]
33pub enum ButtonRowAlignment {
34    End,
35    Start,
36}
37
38pub struct ButtonRow {
39    children: Children,
40    alignment: ButtonRowAlignment,
41}
42
43#[derive(Clone, PartialEq, Properties)]
44pub struct ButtonRowProps {
45    pub children: Children,
46    #[prop_or(ButtonRowAlignment::End)]
47    pub alignment: ButtonRowAlignment,
48}
49
50impl ButtonRow {
51    fn get_alignment_class(&self) -> &str {
52        match self.alignment {
53            ButtonRowAlignment::End => "jinya-button-row jinya-button-row--align-end",
54            ButtonRowAlignment::Start => "jinya-button-row jinya-button-row--align-start"
55        }
56    }
57}
58
59impl Component for ButtonRow {
60    type Message = ();
61    type Properties = ButtonRowProps;
62
63    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
64        ButtonRow {
65            children: props.children,
66            alignment: props.alignment,
67        }
68    }
69
70    fn update(&mut self, _msg: Self::Message) -> bool {
71        false
72    }
73
74    fn change(&mut self, _props: Self::Properties) -> bool {
75        self.children = _props.children;
76        self.alignment = _props.alignment;
77        true
78    }
79
80    fn view(&self) -> Html {
81        html! {
82            <div class=self.get_alignment_class()>
83                {for self.children.iter().enumerate().map(|(_, mut button)| {
84                    button
85                })}
86            </div>
87        }
88    }
89}
jinya_ui/layout/button_row.rs

jinya_ui/layout/
button_row.rs
