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

use crate::prelude::attr_value_to_static_cow;
use implicit_clone::unsync::IString;
use yew::prelude::*;

/// Properties for [`Visible`].
#[derive(PartialEq, Properties)]
pub struct VisibleProperties {
    /// The visibility flag
    pub visible: bool,

    /// The content to show/hide
    #[prop_or_default]
    pub children: Html,

    /// Additional classes
    #[prop_or_default]
    pub class: Classes,
    #[prop_or_default]
    pub style: Option<AttrValue>,
    #[prop_or_default]
    pub id: Option<AttrValue>,

    /// The element to wrap the content with. Defaults to `div`.
    #[prop_or("div".into())]
    pub element: IString,
}

/// A component hiding its content when not being visible.
///
/// While the content is still part of the DOM tree, the wrapping element (and its children)
/// will not be visible.
///
/// ## Properties
///
/// Defined by [`VisibleProperties`].
///
/// ## Example
///
/// ```rust
/// use yew::prelude::*;
/// use patternfly_yew::prelude::*;
///
/// #[function_component(Example)]
/// fn example() -> Html {
///   let visible = true;
///   html!(
///     <>
///       <Visible {visible}>
///         { "Show me" }
///       </Visible>
///       <Visible {visible} element="span">
///         { "Show me (inline)" }
///       </Visible>
///     </>
///   )
/// }
/// ```
#[function_component(Visible)]
pub fn visible(props: &VisibleProperties) -> Html {
    let mut class = match props.visible {
        true => classes!(),
        false => classes!("pf-v5-u-display-none"),
    };

    class.extend(&props.class);

    html!(
        <@{attr_value_to_static_cow(&props.element)}
            {class}
            style={props.style.clone()}
            id={props.id.clone()}
        >
            { props.children.clone() }
        </@>
    )
}

#[cfg(test)]
mod test {
    use super::*;

    #[test]
    fn test_ele() {
        let element: String = "div".into();
        let _ = html!(<Visible visible={true} {element} / >);
        let _ = html!(<Visible visible={true} element={"div"} / >);
    }
}