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
116
117
118
119
120
121

//! Input group

use crate::prelude::ChildrenProperties;
use yew::prelude::*;

/// Properties for [`InputGroup`]
#[derive(Clone, PartialEq, Properties)]
pub struct InputGroupProperties {
    #[prop_or_default]
    pub class: Classes,

    #[prop_or_default]
    pub style: Option<AttrValue>,

    pub children: Html,

    #[prop_or_default]
    pub plain: bool,

    #[prop_or_default]
    pub aria_label: AttrValue,
}

/// Input group component
///
/// > An **input group** groups multiple related controls or inputs together so they appear as one control.
///
/// See: <https://www.patternfly.org/components/input-group>
///
/// ## Properties
///
/// Defined in [`InputGroupProperties`].
///
/// ## Children
///
/// Input groups can have form elements as their children, and also make use of the
/// [`InputGroupItem`] component to amend the input group with additional content.
#[function_component(InputGroup)]
pub fn input_group(props: &InputGroupProperties) -> Html {
    let mut class = classes!("pf-v5-c-input-group");

    class.extend(props.class.clone());

    if props.plain {
        class.push(classes!("pf-m-plain"));
    }

    html! (
        <div {class} aria-label={&props.aria_label} style={&props.style}>
            { props.children.clone() }
        </div>
    )
}

/// Input group text, as child of [`InputGroupItem`]
#[function_component(InputGroupText)]
pub fn input_group_text(props: &ChildrenProperties) -> Html {
    html!(
        <span class={"pf-v5-c-input-group__text"}>
            { props.children.clone() }
        </span>
    )
}

#[derive(Clone, Debug, PartialEq, Properties)]
pub struct InputGroupItemProperties {
    /// The element's ID
    #[prop_or_default]
    pub id: Option<AttrValue>,

    #[prop_or_default]
    pub class: Classes,

    #[prop_or_default]
    pub style: Option<AttrValue>,

    #[prop_or_default]
    pub plain: bool,

    #[prop_or_default]
    pub fill: bool,

    #[prop_or_default]
    pub r#box: bool,

    #[prop_or_default]
    pub disabled: bool,

    #[prop_or_default]
    pub children: Html,
}

/// Additional item on an input group.
#[function_component(InputGroupItem)]
pub fn input_group_item(props: &InputGroupItemProperties) -> Html {
    let mut class = classes!("pf-v5-c-input-group__item");

    if props.plain {
        class.push(classes!("pf-m-plain"));
    }

    if props.fill {
        class.push(classes!("pf-m-fill"));
    }

    if props.r#box {
        class.push(classes!("pf-m-box"));
    }

    if props.disabled {
        class.push(classes!("pf-m-disabled"));
    }

    class.extend(props.class.clone());

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