Function ScrollArea

primitives/src/scroll_area.rs:87–134

(props: ScrollAreaProps)

/// - `data-scroll-direction`: Indicates the scroll direction. Values are `vertical`, `horizontal`, or `both`.
#[component]
pub fn ScrollArea(props: ScrollAreaProps) -> Element {
    let direction = props.direction;
    let scroll_type = props.scroll_type;
    let always_show = props.always_show_scrollbars;

    let (overflow_x, overflow_y, scrollbar_width) = match scroll_type() {
        ScrollType::Auto => match direction() {
            ScrollDirection::Vertical => (Some("hidden"), Some("auto"), None),
            ScrollDirection::Horizontal => (Some("auto"), Some("hidden"), None),
            ScrollDirection::Both => (Some("auto"), Some("auto"), None),
        },
        ScrollType::Always => match direction() {
            ScrollDirection::Vertical => (Some("hidden"), Some("scroll"), None),
            ScrollDirection::Horizontal => (Some("scroll"), Some("hidden"), None),
            ScrollDirection::Both => (Some("scroll"), Some("scroll"), None),
        },
        ScrollType::Hidden => match direction() {
            ScrollDirection::Vertical => (Some("hidden"), Some("scroll"), Some("none")),
            ScrollDirection::Horizontal => (Some("scroll"), Some("hidden"), Some("none")),
            ScrollDirection::Both => (Some("scroll"), Some("scroll"), Some("none")),
        },
    };

    let visibility_class = use_memo(move || {
        if always_show() {
            "dx-scroll-area-always-show"
        } else {
            "dx-scroll-area-auto-hide"
        }
    });

    rsx! {
        div {
            class: "{visibility_class}",
            overflow_x,
            overflow_y,
            "scrollbar-width": scrollbar_width,
            "data-scroll-direction": match direction() {
                ScrollDirection::Vertical => "vertical",
                ScrollDirection::Horizontal => "horizontal",
                ScrollDirection::Both => "both",
            },
            ..props.attributes,

            {props.children}
        }
    }
}