freya_components/
accordion.rs

1use freya_animation::prelude::{
2    AnimNum,
3    Ease,
4    Function,
5    use_animation,
6};
7use freya_core::prelude::*;
8use torin::{
9    gaps::Gaps,
10    prelude::VisibleSize,
11};
12
13use crate::{
14    define_theme,
15    get_theme,
16};
17
18define_theme! {
19    %[component]
20    pub Accordion {
21        %[fields]
22        color: Color,
23        background: Color,
24        border_fill: Color,
25    }
26}
27
28/// A container that expands/collapses vertically when pressed.
29///
30/// # Example
31///
32/// ```rust
33/// # use freya::prelude::*;
34/// const LOREM_IPSUM: &str = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.";
35///
36/// fn app() -> impl IntoElement {
37///     rect()
38///        .center()
39///        .expanded()
40///        .spacing(4.)
41///        .children((0..2).map(|_| {
42///            Accordion::new()
43///                .header("Click to expand!")
44///                .child(LOREM_IPSUM)
45///                .into()
46///        }))
47/// }
48///
49/// # use freya_testing::prelude::*;
50/// # use std::time::Duration;
51/// # launch_doc(|| {
52/// #   rect().child(app())
53/// # }, "./images/gallery_accordion.png").with_hook(|t| {
54/// #   t.click_cursor((125., 115.));
55/// #   t.poll(Duration::from_millis(1), Duration::from_millis(300));
56/// #   t.sync_and_update();
57/// # });
58/// ```
59///
60/// # Preview
61/// ![Accordion Preview][accordion]
62#[cfg_attr(feature = "docs",
63    doc = embed_doc_image::embed_image!("accordion", "images/gallery_accordion.png")
64)]
65#[derive(Clone, PartialEq, Default)]
66pub struct Accordion {
67    pub(crate) theme: Option<AccordionThemePartial>,
68    header: Option<Element>,
69    children: Vec<Element>,
70    key: DiffKey,
71}
72
73impl KeyExt for Accordion {
74    fn write_key(&mut self) -> &mut DiffKey {
75        &mut self.key
76    }
77}
78
79impl Accordion {
80    pub fn new() -> Self {
81        Self::default()
82    }
83
84    pub fn header<C: Into<Element>>(mut self, header: C) -> Self {
85        self.header = Some(header.into());
86        self
87    }
88}
89
90impl ChildrenExt for Accordion {
91    fn get_children(&mut self) -> &mut Vec<Element> {
92        &mut self.children
93    }
94}
95
96impl Component for Accordion {
97    fn render(self: &Accordion) -> impl IntoElement {
98        let header = use_focus();
99        let accordion_theme = get_theme!(&self.theme, AccordionThemePreference, "accordion");
100        let mut open = use_state(|| false);
101        let mut animation = use_animation(move |_conf| {
102            AnimNum::new(0., 100.)
103                .time(300)
104                .function(Function::Expo)
105                .ease(Ease::Out)
106        });
107
108        let clip_percent = animation.get().value();
109
110        rect()
111            .a11y_id(header.a11y_id())
112            .a11y_role(AccessibilityRole::Header)
113            .a11y_focusable(true)
114            .corner_radius(CornerRadius::new_all(8.))
115            .padding(Gaps::new_all(8.))
116            .color(accordion_theme.color)
117            .background(accordion_theme.background)
118            .border(
119                Border::new()
120                    .fill(accordion_theme.border_fill)
121                    .width(1.)
122                    .alignment(BorderAlignment::Inner),
123            )
124            .on_pointer_enter(move |_| {
125                Cursor::set(CursorIcon::Pointer);
126            })
127            .on_pointer_leave(move |_| {
128                Cursor::set(CursorIcon::default());
129            })
130            .on_press(move |_| {
131                if open.toggled() {
132                    animation.start();
133                } else {
134                    animation.reverse();
135                }
136            })
137            .maybe_child(self.header.clone())
138            .child(
139                rect()
140                    .a11y_role(AccessibilityRole::Region)
141                    .a11y_builder(|b| {
142                        b.set_labelled_by([header.a11y_id()]);
143                        if !open() {
144                            b.set_hidden();
145                        }
146                    })
147                    .overflow(Overflow::Clip)
148                    .visible_height(VisibleSize::inner_percent(clip_percent))
149                    .children(self.children.clone()),
150            )
151    }
152
153    fn render_key(&self) -> DiffKey {
154        self.key.clone().or(self.default_key())
155    }
156}
freya_components/accordion.rs

freya_components/
accordion.rs
