use crate::core::{AsClasses, ExtendClasses, WithBreakpoints};
use yew::html::IntoPropValue;
use yew::prelude::*;
#[derive(Copy, Clone, Default, Eq, PartialEq)]
pub enum PageSectionVariant {
#[default]
Default,
Darker,
Dark,
Light,
}
impl AsClasses for PageSectionVariant {
fn extend_classes(&self, classes: &mut Classes) {
match self {
Self::Default => {}
Self::Darker => classes.push("pf-m-dark-100"),
Self::Dark => classes.push("pf-m-dark-200"),
Self::Light => classes.push("pf-m-light"),
}
}
}
#[derive(Copy, Clone, Debug, Default, Eq, PartialEq)]
pub enum PageSectionType {
#[default]
Default,
Breadcrumbs,
Navigation,
SubNavigation,
Tabs,
Wizard,
}
impl AsClasses for PageSectionType {
fn extend_classes(&self, classes: &mut Classes) {
match self {
Self::Default => classes.push("pf-v5-c-page__main-section"),
Self::Breadcrumbs => classes.push("pf-v5-c-page__main-breadcrumb"),
Self::Navigation => classes.push("pf-v5-c-page__main-nav"),
Self::SubNavigation => classes.push("pf-v5-c-page__main-subnav"),
Self::Tabs => classes.push("pf-v5-c-page__main-tabs"),
Self::Wizard => classes.push("pf-v5-c-page__main-wizard"),
}
}
}
#[derive(Clone, PartialEq, Properties)]
pub struct PageSectionProperties {
#[prop_or_default]
pub children: Html,
#[prop_or_default]
pub r#type: PageSectionType,
#[prop_or_default]
pub variant: PageSectionVariant, #[prop_or_default]
pub fill: PageSectionFill,
#[prop_or_default]
pub limit_width: bool,
#[prop_or_default]
pub shadow: PageSectionShadow,
#[prop_or_default]
pub align_center: bool,
#[prop_or_default]
pub overflow_scroll: bool,
#[prop_or_default]
pub sticky: WithBreakpoints<PageSectionSticky>,
#[prop_or_default]
pub id: Option<AttrValue>,
#[prop_or_default]
pub class: Classes,
#[prop_or_default]
pub style: Option<AttrValue>,
#[prop_or_default]
pub hidden: bool,
}
#[derive(Copy, Clone, Debug, PartialEq, Eq, Default)]
pub enum PageSectionShadow {
#[default]
None,
Top,
Bottom,
Both,
}
impl AsClasses for PageSectionShadow {
fn extend_classes(&self, classes: &mut Classes) {
match self {
Self::None => {}
Self::Top => classes.push("pf-m-shadow-top"),
Self::Bottom => classes.push("pf-m-shadow-bottom"),
Self::Both => classes.push("pf-m-shadow-top pf-m-shadow-bottom"),
}
}
}
#[derive(Copy, Clone, Debug, PartialEq, Eq, Default)]
pub enum PageSectionSticky {
#[default]
None,
Top,
Bottom,
Both,
}
impl AsClasses for PageSectionSticky {
fn extend_classes(&self, classes: &mut Classes) {
match self {
Self::None => {}
Self::Top => classes.push("pf-m-sticky-top"),
Self::Bottom => classes.push("pf-m-sticky-bottom"),
Self::Both => classes.push("pf-m-sticky-top pf-m-sticky-bottom"),
}
}
}
#[derive(Copy, Clone, Debug, Default, PartialEq, Eq)]
pub enum PageSectionFill {
#[default]
Default,
Fill,
NoFill,
}
impl AsClasses for PageSectionFill {
fn extend_classes(&self, classes: &mut Classes) {
match self {
Self::Default => {}
Self::Fill => classes.push("pf-m-fill"),
Self::NoFill => classes.push("pf-m-no-fill"),
}
}
}
impl IntoPropValue<PageSectionFill> for bool {
fn into_prop_value(self) -> PageSectionFill {
match self {
true => PageSectionFill::Fill,
false => PageSectionFill::NoFill,
}
}
}
#[function_component(PageSection)]
pub fn page_section(props: &PageSectionProperties) -> Html {
let mut class = props.r#type.as_classes();
class.extend_from(&props.variant);
class.extend_from(&props.fill);
class.extend_from(&props.sticky);
class.extend_from(&props.shadow);
if props.limit_width {
class.push("pf-m-limit-width");
}
if props.align_center {
class.push("pf-m-align-center"); }
if props.overflow_scroll {
class.push("pf-m-overflow-scroll"); }
class.extend(&props.class);
html! (
<section {class} id={&props.id} hidden={props.hidden} style={props.style.clone()}>
if props.limit_width {
<div class="pf-v5-c-page__main-body">
{ props.children.clone() }
</div>
} else {
{ props.children.clone() }
}
</section>
)
}
#[derive(PartialEq, Properties)]
pub struct PageSectionGroupProperties {
pub children: Html,
#[prop_or_default]
pub shadow: PageSectionShadow,
#[prop_or_default]
pub sticky: WithBreakpoints<PageSectionSticky>,
#[prop_or_default]
pub overflow_scroll: bool,
}
#[function_component(PageSectionGroup)]
pub fn page_section_group(props: &PageSectionGroupProperties) -> Html {
let mut class = Classes::from("pf-v5-c-page__main-group");
class.extend_from(&props.shadow);
class.extend_from(&props.sticky);
if props.overflow_scroll {
class.push("pf-m-overflow-scroll");
}
html!(
<div {class}>
{ props.children.clone() }
</div>
)
}