yew_bs/components/

carousel.rs

use yew::prelude::*;
use web_sys::Element;
use crate::interop::BsCarousel;
#[derive(Properties, PartialEq)]
pub struct CarouselItemProps {
    #[prop_or_default]
    pub children: Children,
    #[prop_or_default]
    pub class: Option<AttrValue>,
    #[prop_or_default]
    pub interval: Option<u32>,
    #[prop_or_default]
    pub active: bool,
}
#[function_component(CarouselItem)]
pub fn carousel_item(props: &CarouselItemProps) -> Html {
    let mut classes = Classes::new();
    classes.push("carousel-item");
    if props.active {
        classes.push("active");
    }
    if let Some(class) = &props.class {
        classes.push(class.to_string());
    }
    let data_interval = props.interval.map(|i| i.to_string());
    html! {
        < div class = { classes } data - bs - interval = { data_interval } > { for props
        .children.iter() } </ div >
    }
}
#[derive(Properties, PartialEq)]
pub struct CarouselProps {
    #[prop_or_default]
    pub children: Children,
    #[prop_or(true)]
    pub indicators: bool,
    #[prop_or(true)]
    pub controls: bool,
    #[prop_or_default]
    pub captions: bool,
    #[prop_or(true)]
    pub ride: bool,
    #[prop_or(true)]
    pub pause: bool,
    #[prop_or(true)]
    pub wrap: bool,
    #[prop_or(true)]
    pub touch: bool,
    #[prop_or_default]
    pub interval: Option<u32>,
    #[prop_or(true)]
    pub keyboard: bool,
    #[prop_or_default]
    pub active_index: usize,
    #[prop_or_default]
    pub on_slide_change: Option<Callback<usize>>,
    #[prop_or_default]
    pub class: Option<AttrValue>,
    #[prop_or_default]
    pub node_ref: NodeRef,
}
#[function_component(Carousel)]
pub fn carousel(props: &CarouselProps) -> Html {
    let carousel_ref = use_node_ref();
    let bs_carousel = use_state(|| None::<BsCarousel>);
    let active_index = use_state(|| props.active_index);
    {
        let active_index_state = active_index.clone();
        use_effect_with(
            props.active_index,
            move |active_index_prop| {
                active_index_state.set(*active_index_prop);
            },
        );
    }
    {
        let carousel_ref = carousel_ref.clone();
        let bs_carousel = bs_carousel.clone();
        let ride = props.ride;
        let wrap = props.wrap;
        let pause = props.pause;
        let touch = props.touch;
        let keyboard = props.keyboard;
        let interval = props.interval;
        use_effect(move || {
            if let Some(element) = carousel_ref.cast::<Element>() {
                let options = js_sys::Object::new();
                let _ = js_sys::Reflect::set(
                    &options,
                    &"ride".into(),
                    &if ride { "carousel".into() } else { false.into() },
                );
                let _ = js_sys::Reflect::set(&options, &"wrap".into(), &wrap.into());
                let _ = js_sys::Reflect::set(
                    &options,
                    &"pause".into(),
                    &if pause { "hover".into() } else { false.into() },
                );
                let _ = js_sys::Reflect::set(&options, &"touch".into(), &touch.into());
                let _ = js_sys::Reflect::set(
                    &options,
                    &"keyboard".into(),
                    &keyboard.into(),
                );
                if let Some(interval) = interval {
                    let _ = js_sys::Reflect::set(
                        &options,
                        &"interval".into(),
                        &interval.into(),
                    );
                }
                bs_carousel.set(Some(BsCarousel::new(&element, Some(&options.into()))));
            }
            || {}
        });
    }
    let mut classes = Classes::new();
    classes.push("carousel");
    classes.push("slide");
    if let Some(class) = &props.class {
        classes.push(class.to_string());
    }
    let indicators = if props.indicators {
        let children_count = props.children.len();
        let current_active_index = *active_index;
        Some(
            html! {
                < div class = "carousel-indicators" > { (0..children_count).map(| index |
                { let is_active = index == current_active_index; let onclick = { let
                bs_carousel = bs_carousel.clone(); let active_index_state = active_index
                .clone(); let on_slide_change = props.on_slide_change.clone();
                Callback::from(move | _ | { if let Some(bs_carousel) = &* bs_carousel {
                bs_carousel.to(index as u32); } active_index_state.set(index); if let
                Some(callback) = & on_slide_change { callback.emit(index); } }) }; html!
                { < button type = "button" data - bs - target = "" data - bs - slide - to
                = { index.to_string() } class = { if is_active { "active" } else { "" } }
                aria - current = { if is_active { "true" } else { "false" } } aria -
                label = { format!("Slide {}", index + 1) } onclick = { onclick } /> } })
                .collect::< Html > () } </ div >
            },
        )
    } else {
        None
    };
    let controls = if props.controls {
        let prev_onclick = {
            let bs_carousel = bs_carousel.clone();
            let active_index_state = active_index.clone();
            let children_count = props.children.len();
            let on_slide_change = props.on_slide_change.clone();
            Callback::from(move |_| {
                if let Some(bs_carousel) = &*bs_carousel {
                    bs_carousel.prev();
                }
                let new_index = if *active_index_state == 0 {
                    children_count - 1
                } else {
                    *active_index_state - 1
                };
                active_index_state.set(new_index);
                if let Some(callback) = &on_slide_change {
                    callback.emit(new_index);
                }
            })
        };
        let next_onclick = {
            let bs_carousel = bs_carousel.clone();
            let active_index_state = active_index.clone();
            let children_count = props.children.len();
            let on_slide_change = props.on_slide_change.clone();
            Callback::from(move |_| {
                if let Some(bs_carousel) = &*bs_carousel {
                    bs_carousel.next();
                }
                let new_index = (*active_index_state + 1) % children_count;
                active_index_state.set(new_index);
                if let Some(callback) = &on_slide_change {
                    callback.emit(new_index);
                }
            })
        };
        Some(
            html! {
                <> < button class = "carousel-control-prev" type = "button" data - bs -
                target = "" data - bs - slide = "prev" onclick = { prev_onclick } > <
                span class = "carousel-control-prev-icon" aria - hidden = "true" ></ span
                > < span class = "visually-hidden" > { "Previous" } </ span > </ button >
                < button class = "carousel-control-next" type = "button" data - bs -
                target = "" data - bs - slide = "next" onclick = { next_onclick } > <
                span class = "carousel-control-next-icon" aria - hidden = "true" ></ span
                > < span class = "visually-hidden" > { "Next" } </ span > </ button > </>
            },
        )
    } else {
        None
    };
    html! {
        < div class = { classes } data - bs - ride = { if props.ride { "carousel" } else
        { "false" } } ref = { carousel_ref } > { indicators } < div class =
        "carousel-inner" > { props.children.iter().enumerate().map(| (index, child) | {
        let is_active = index == * active_index; html! { < CarouselItem active = {
        is_active } > { child } </ CarouselItem > } }).collect::< Html > () } </ div > {
        controls } </ div >
    }
}