domcom 0.0.1

Dominator Component Library
Documentation 
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

use dominator::{class, html, pseudo, Dom};
use factoryizer::Factory;

use super::ty::{Component, Reactive, RemSizing};

#[derive(Default, Clone)]
pub enum FlexDirection {
    #[default]
    Row,
    Column,
    RowReverse,
    ColumnReverse,
}

impl ToString for FlexDirection {
    fn to_string(&self) -> String {
        match self {
            FlexDirection::Row => "row",
            FlexDirection::Column => "column",
            FlexDirection::RowReverse => "row-reverse",
            FlexDirection::ColumnReverse => "column-reverse",
        }
        .to_string()
    }
}

#[derive(Factory, Default)]
pub struct Flex {
    as_tag: Option<&'static str>,
    space_x: RemSizing,
    space_y: RemSizing,
    wrap: bool,
    direction: FlexDirection,

    #[skip]
    children: Vec<Dom>,
    #[skip]
    styles: Vec<(String, Reactive<String>)>,
}

impl Flex {
    pub fn child(&mut self, child: Dom) -> &mut Self {
        self.children.push(child);
        self
    }
}

impl Component for Flex {
    fn style(&mut self, style: (String, Reactive<String>)) -> &mut Self {
        self.styles.push(style);
        self
    }
    fn dom(&mut self) -> dominator::Dom {
        html!(self.as_tag.unwrap_or("div"), {
            .class(
                class! {
                    .style("display", "flex")
                    .style("flex-direction", &self.direction.to_string())
                    .style(
                        "flex-wrap",
                        &match self.wrap {
                            true => "wrap",
                            false => "nowrap",
                        }
                    )
                    .pseudo!("> * + *", {
                        .style("margin-left", &self.space_x.to_string())
                        .style("margin-top", &self.space_y.to_string())
                    })
                }
            )
            .children(self.children.iter_mut().map(|c| c))
        })
    }
}