radix_leptos_primitives/components/

scroll_area.rs

use crate::utils::merge_classes;
use leptos::children::Children;
use leptos::prelude::*;

/// Scroll Area component for custom scrollable areas
///
/// Provides accessible scroll area with custom scrollbar styling
#[component]
pub fn ScrollArea(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] orientation: Option<ScrollAreaOrientation>,
    #[prop(optional)] scroll_hidden: Option<bool>,
) -> impl IntoView {
    let orientation = orientation.unwrap_or_default();
    let scroll_hidden = scroll_hidden.unwrap_or(false);

    let class = merge_classes(vec![
        "scroll-area",
        &orientation.to_class(),
        class.as_deref().unwrap_or(""),
    ]);

    view! {
        <div
            class=class
            style=style
            data-orientation=orientation.to_aria()
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Scroll Area Viewport component
#[component]
pub fn ScrollAreaViewport(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
) -> impl IntoView {
    let class = merge_classes(vec!["scroll-area-viewport", class.as_deref().unwrap_or("")]);

    view! {
        <div
            class=class
            style=style
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Scroll Area Scrollbar component
#[component]
pub fn ScrollAreaScrollbar(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] orientation: Option<ScrollAreaOrientation>,
    #[prop(optional)] force_mount: Option<bool>,
) -> impl IntoView {
    let orientation = orientation.unwrap_or_default();
    let force_mount = force_mount.unwrap_or(false);

    let class = merge_classes(vec![
        "scroll-area-scrollbar",
        &orientation.to_class(),
        class.as_deref().unwrap_or(""),
    ]);

    view! {
        <div
            class=class
            style=style
            data-orientation=orientation.to_aria()
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Scroll Area Thumb component
#[component]
pub fn ScrollAreaThumb(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
) -> impl IntoView {
    let class = merge_classes(vec!["scroll-area-thumb", class.as_deref().unwrap_or("")]);

    view! {
        <div
            class=class
            style=style
        />
    }
}

/// Scroll Area Corner component
#[component]
pub fn ScrollAreaCorner(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
) -> impl IntoView {
    let class = merge_classes(vec!["scroll-area-corner", class.as_deref().unwrap_or("")]);

    view! {
        <div
            class=class
            style=style
        />
    }
}

/// Scroll Area Orientation enum
#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
pub enum ScrollAreaOrientation {
    #[default]
    Vertical,
    Horizontal,
    Both,
}

impl ScrollAreaOrientation {
    pub fn to_class(&self) -> &'static str {
        match self {
            ScrollAreaOrientation::Vertical => "vertical",
            ScrollAreaOrientation::Horizontal => "horizontal",
            ScrollAreaOrientation::Both => "both",
        }
    }

    pub fn to_aria(&self) -> &'static str {
        match self {
            ScrollAreaOrientation::Vertical => "vertical",
            ScrollAreaOrientation::Horizontal => "horizontal",
            ScrollAreaOrientation::Both => "both",
        }
    }
}

#[cfg(test)]
mod tests {
    use crate::utils::merge_classes;
    use crate::ScrollAreaOrientation;
    use wasm_bindgen_test::*;

    wasm_bindgen_test_configure!(run_in_browser);

    // Scroll Area Tests
    #[test]
    fn test_scroll_area_creation() {}

    #[test]
    fn test_scroll_area_with_class() {}

    #[test]
    fn test_scroll_area_with_style() {}

    #[test]
    fn test_scroll_area_vertical_orientation() {}

    #[test]
    fn test_scroll_area_horizontal_orientation() {}

    #[test]
    fn test_scroll_area_both_orientation() {}

    #[test]
    fn test_scroll_area_scroll_hidden() {}

    // Scroll Area Viewport Tests
    #[test]
    fn test_scroll_area_viewport_creation() {}

    #[test]
    fn test_scroll_area_viewport_with_class() {}

    #[test]
    fn test_scroll_area_viewport_with_style() {}

    // Scroll Area Scrollbar Tests
    #[test]
    fn test_scroll_area_scrollbar_creation() {}

    #[test]
    fn test_scroll_area_scrollbar_with_class() {}

    #[test]
    fn test_scroll_area_scrollbar_with_style() {}

    #[test]
    fn test_scroll_area_scrollbar_vertical_orientation() {}

    #[test]
    fn test_scroll_area_scrollbar_horizontal_orientation() {}

    #[test]
    fn test_scroll_area_scrollbar_both_orientation() {}

    #[test]
    fn test_scroll_area_scrollbar_force_mount() {}

    // Scroll Area Thumb Tests
    #[test]
    fn test_scroll_area_thumb_creation() {}

    #[test]
    fn test_scroll_area_thumb_with_class() {}

    #[test]
    fn test_scroll_area_thumb_with_style() {}

    // Scroll Area Corner Tests
    #[test]
    fn test_scroll_area_corner_creation() {}

    #[test]
    fn test_scroll_area_corner_with_class() {}

    #[test]
    fn test_scroll_area_corner_with_style() {}

    // Scroll Area Orientation Tests
    #[test]
    fn test_scroll_area_orientation_default() {
        let orientation = ScrollAreaOrientation::default();
        assert_eq!(orientation, ScrollAreaOrientation::Vertical);
    }

    #[test]
    fn test_scroll_area_orientation_vertical() {
        let orientation = ScrollAreaOrientation::Vertical;
        assert_eq!(orientation.to_class(), "vertical");
        assert_eq!(orientation.to_aria(), "vertical");
    }

    #[test]
    fn test_scroll_area_orientation_horizontal() {
        let orientation = ScrollAreaOrientation::Horizontal;
        assert_eq!(orientation.to_class(), "horizontal");
        assert_eq!(orientation.to_aria(), "horizontal");
    }

    #[test]
    fn test_scroll_area_orientation_both() {
        let orientation = ScrollAreaOrientation::Both;
        assert_eq!(orientation.to_class(), "both");
        assert_eq!(orientation.to_aria(), "both");
    }

    // Helper Function Tests
    #[test]
    fn test_merge_classes_empty() {
        let result = merge_classes(Vec::new());
        assert_eq!(result, "");
    }

    #[test]
    fn test_merge_classes_single() {
        let result = merge_classes(vec!["class1"]);
        assert_eq!(result, "class1");
    }

    #[test]
    fn test_merge_classes_multiple() {
        let result = merge_classes(vec!["class1", "class2", "class3"]);
        assert_eq!(result, "class1 class2 class3");
    }

    #[test]
    fn test_merge_classes_with_empty() {
        let result = merge_classes(vec!["class1", "", "class3"]);
        assert_eq!(result, "class1 class3");
    }

    // Property-based tests
    #[test]
    fn test_scroll_area_property_based() {
        use proptest::prelude::*;
        proptest!(|(____class in ".*", __style in ".*")| {

        });
    }

    #[test]
    fn test_scroll_area_viewport_property_based() {
        use proptest::prelude::*;
        proptest!(|(____class in ".*", __style in ".*")| {

        });
    }

    #[test]
    fn test_scroll_area_scrollbar_property_based() {
        use proptest::prelude::*;
        proptest!(|(____class in ".*", __style in ".*")| {

        });
    }

    #[test]
    fn test_scroll_area_thumb_property_based() {
        use proptest::prelude::*;
        proptest!(|(____class in ".*", __style in ".*")| {

        });
    }

    #[test]
    fn test_scroll_area_corner_property_based() {
        use proptest::prelude::*;
        proptest!(|(____class in ".*", __style in ".*")| {

        });
    }
}