yewprint/src/tabs.rs

use implicit_clone::{unsync::IArray, ImplicitClone};
use std::collections::{hash_map::DefaultHasher, HashMap};
use std::hash::{Hash, Hasher};
use std::marker::PhantomData;
use web_sys::HtmlElement;
use yew::prelude::*;

pub struct Tabs<T: ImplicitClone + PartialEq + Hash + 'static> {
    tab_refs: HashMap<u64, NodeRef>,
    indicator_ref: NodeRef,
    phantom: PhantomData<T>,
}

#[derive(Clone, PartialEq, Properties)]
pub struct TabsProps<T: ImplicitClone + PartialEq + 'static> {
    #[prop_or_default]
    pub animate: bool,
    #[prop_or_default]
    pub default_selected_tab_id: Option<T>,
    pub id: AttrValue,
    #[prop_or_default]
    pub large: bool,
    #[prop_or_default]
    pub render_active_panel_only: bool,
    pub selected_tab_id: T,
    #[prop_or_default]
    pub vertical: bool,
    #[prop_or_default]
    pub onchange: Callback<T>,
    #[prop_or_default]
    pub class: Classes,
    pub tabs: IArray<Tab<T>>,
}

impl<T: ImplicitClone + PartialEq + Hash + 'static> Component for Tabs<T> {
    type Message = ();
    type Properties = TabsProps<T>;

    fn create(ctx: &Context<Self>) -> Self {
        let tab_refs = ctx
            .props()
            .tabs
            .iter()
            .map(|x| {
                let mut hasher = DefaultHasher::new();
                x.id.hash(&mut hasher);
                let id = hasher.finish();
                (id, NodeRef::default())
            })
            .collect::<HashMap<_, _>>();

        Self {
            tab_refs,
            indicator_ref: Default::default(),
            phantom: PhantomData,
        }
    }

    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
        true
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let tabs = ctx
            .props()
            .tabs
            .iter()
            .map(|x| {
                let mut hasher = DefaultHasher::new();
                x.id.hash(&mut hasher);
                let id = hasher.finish();
                let title_id = format!("bp3-tab-title_{}_{}", ctx.props().id, id);
                let panel_id = format!("bp3-tab-panel_{}_{}", ctx.props().id, id);
                let selected = ctx.props().selected_tab_id == x.id;
                (x, id, title_id, panel_id, selected)
            })
            .collect::<Vec<_>>();

        html! {
            <div
                class={classes!(
                    "bp3-tabs",
                    ctx.props().vertical.then_some("bp3-vertical"),
                    ctx.props().class.clone(),
                )}
            >
                <div
                    class={classes!(
                        "bp3-tab-list",
                        ctx.props().large.then_some("bp3-large"),
                    )}
                >
                    {
                        if ctx.props().animate {
                            html! {
                                <div
                                    class="bp3-tab-indicator-wrapper"
                                    ref={self.indicator_ref.clone()}
                                >
                                    <div class="bp3-tab-indicator" />
                                </div>
                            }
                        } else {
                            html!()
                        }
                    }
                    {
                        tabs
                            .iter()
                            .map(|(props, id, title_id, panel_id, selected)| html! {
                                <div
                                    class={classes!(
                                        "bp3-tab",
                                        props.title_class.clone(),
                                    )}
                                    aria-disabled={props.disabled.then_some("true")}
                                    aria-expanded={selected.to_string()}
                                    aria-selected={selected.to_string()}
                                    role="tab"
                                    tabIndex={(!props.disabled).then_some("0")}
                                    id={title_id.to_string()}
                                    aria-controls={panel_id.to_string()}
                                    data-tab-id={id.to_string()}
                                    onclick={(!props.disabled).then(|| {
                                        let tab_id = props.id.clone();
                                        ctx
                                            .props()
                                            .onchange
                                            .reform(move |_| tab_id.clone())
                                    })}
                                    key={*id}
                                    ref={self.tab_refs[id].clone()}
                                >
                                    { props.title.clone() }
                                </div>
                            })
                            .collect::<Html>()
                    }
                </div>
                {
                    tabs
                        .iter()
                        .filter(|(_, _, _, _, selected)| {
                            !ctx.props().render_active_panel_only || *selected
                        })
                        .map(|(props, id, title_id, panel_id, selected)| html! {
                            <div
                                class={classes!(
                                    "bp3-tab-panel",
                                    selected.then(|| props.panel_class.clone()),
                                )}
                                aria-labelledby={title_id.to_string()}
                                aria-hidden={(!selected).then_some("true")}
                                role="tabpanel"
                                id={panel_id.to_string()}
                                key={*id}
                            >
                                { props.panel.clone() }
                            </div>
                        })
                        .collect::<Html>()
                }
            </div>
        }
    }

    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
        if ctx.props().animate {
            let mut hasher = DefaultHasher::new();
            ctx.props().selected_tab_id.hash(&mut hasher);
            let id = hasher.finish();
            let indicator = self.indicator_ref.cast::<HtmlElement>().unwrap();

            if let Some(element) = self.tab_refs[&id].cast::<HtmlElement>() {
                let indicator_style = format!(
                    "height: {}px; width: {}px; \
                                    transform: translateX({}px) translateY({}px);",
                    element.client_height(),
                    element.client_width(),
                    element.offset_left(),
                    element.offset_top(),
                );
                let _ = indicator.set_attribute("style", &indicator_style);
            }
        }
    }
}

#[derive(Clone, PartialEq)]
pub struct Tab<T> {
    pub disabled: bool,
    pub id: T,
    pub title: Html,
    pub panel: Html,
    pub title_class: Classes,
    pub panel_class: Classes,
}

impl<T: ImplicitClone> ImplicitClone for Tab<T> {}