use std::rc::Rc;
use yew::prelude::*;
use crate::prelude::OptionalHtml;
#[derive(Debug, Clone, PartialEq, Properties)]
pub struct ToggleGroupProperties {
#[prop_or_default]
pub children: ChildrenWithProps<ToggleGroupItem>,
#[prop_or_default]
pub class: Classes,
#[prop_or_default]
pub compact: bool,
#[prop_or_default]
pub all_disabled: bool,
}
#[function_component(ToggleGroup)]
pub fn toggle_group(props: &ToggleGroupProperties) -> Html {
let mut class = classes!(props.class.clone(), "pf-v5-c-toggle-group");
if props.compact {
class.push("pf-m-compact");
};
html! {
<div {class} role="group">
{for props.children.iter().map(|mut item| {
let item_props = Rc::make_mut(&mut item.props);
item_props.disabled |= props.all_disabled;
item
})}
</div>
}
}
#[derive(Debug, Clone, PartialEq, Properties)]
pub struct ToggleGroupItemProperties {
#[prop_or_default]
pub text: OptionalHtml,
#[prop_or_default]
pub icon: OptionalHtml,
#[prop_or_default]
pub class: Classes,
#[prop_or_default]
pub disabled: bool,
#[prop_or_default]
pub selected: bool,
#[prop_or_default]
pub onchange: Callback<()>,
#[prop_or_default]
pub button_ref: NodeRef,
}
#[function_component(ToggleGroupItem)]
pub fn toggle_group_item(props: &ToggleGroupItemProperties) -> Html {
let mut class = classes!(props.class.clone(), "pf-v5-c-toggle-group__item");
let mut button_class = classes!("pf-v5-c-toggle-group__button");
if props.selected {
class.push("pf-m-selected");
button_class.push("pf-m-selected");
}
let onclick = use_callback(props.onchange.clone(), |_, onchange| onchange.emit(()));
html! {
<div {class}>
<button
type="button"
class={button_class}
{onclick}
disabled={props.disabled}
ref={props.button_ref.clone()}
>
if let Some(icon) = (*props.icon).as_ref() {
<ToggleGroupItemElement
variant={ToggleGroupItemElementVariant::Icon(icon.clone())}
/>
}
if let Some(text) = (*props.text).as_ref() {
<ToggleGroupItemElement
variant={ToggleGroupItemElementVariant::Text(text.clone())}
/>
}
</button>
</div>
}
}
#[derive(Debug, Clone, PartialEq)]
pub enum ToggleGroupItemElementVariant {
Icon(Html),
Text(Html),
}
#[derive(Debug, Clone, PartialEq, Properties)]
pub struct ToggleGroupItemElementProperties {
#[prop_or_default]
variant: Option<ToggleGroupItemElementVariant>,
}
#[function_component(ToggleGroupItemElement)]
pub fn toggle_group_item_element(props: &ToggleGroupItemElementProperties) -> Html {
let (class, children) = props
.variant
.as_ref()
.map(|v| match v {
ToggleGroupItemElementVariant::Icon(children) => {
("pf-v5-c-toggle-group__icon", children)
}
ToggleGroupItemElementVariant::Text(children) => {
("pf-v5-c-toggle-group__text", children)
}
})
.unzip();
html! {
<span {class} id="foo">
if let Some(children) = children {
{(*children).clone()}
}
</span>
}
}