@perspective-dev/viewer 4.0.0

package/src/rust/components/containers/select.rs

@@ -0,0 +1,269 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use std::borrow::{Borrow, Cow};
+use std::fmt::Display;
+use std::rc::Rc;
+
+use wasm_bindgen::JsCast;
+use yew::prelude::*;
+
+#[derive(Clone, Eq, PartialEq)]
+pub enum SelectItem<T> {
+    Option(T),
+    OptGroup(Cow<'static, str>, Vec<T>),
+}
+
+impl<T: Display> SelectItem<T> {
+    pub fn name<'a>(&self) -> Cow<'a, str> {
+        match self {
+            Self::Option(x) => format!("{x}").into(),
+            Self::OptGroup(x, _) => x.clone(),
+        }
+    }
+}
+
+pub enum SelectMsg {
+    SelectedChanged(i32),
+    KeyboardInput(bool, i32, String),
+}
+
+#[derive(Properties)]
+pub struct SelectProps<T>
+where
+    T: Clone + Display + PartialEq + 'static,
+{
+    pub values: Rc<Vec<SelectItem<T>>>,
+    pub selected: T,
+    pub on_select: Callback<T>,
+
+    #[prop_or_default]
+    pub is_autosize: bool,
+
+    #[prop_or_default]
+    pub label: Option<Cow<'static, str>>,
+
+    #[prop_or_default]
+    pub id: Option<&'static str>,
+
+    #[prop_or_default]
+    pub class: Option<String>,
+
+    #[prop_or_default]
+    pub wrapper_class: Option<String>,
+}
+
+impl<T> PartialEq for SelectProps<T>
+where
+    T: Clone + Display + PartialEq + 'static,
+{
+    fn eq(&self, rhs: &Self) -> bool {
+        self.selected == rhs.selected && self.values == rhs.values
+    }
+}
+
+/// A `<select>` HTML elements, lifted to support parameterization over a set of
+/// values of a type `T`.
+pub struct Select<T>
+where
+    T: Clone + Display + PartialEq + 'static,
+{
+    select_ref: NodeRef,
+    selected: T,
+}
+
+fn find_nth<T>(mut count: i32, items: &[SelectItem<T>]) -> Option<&T> {
+    for ref item in items.iter() {
+        match item {
+            SelectItem::Option(_) if count > 0 => {
+                count -= 1;
+            },
+            SelectItem::OptGroup(_, items) if count >= items.len() as i32 => {
+                count -= items.len() as i32;
+            },
+            SelectItem::OptGroup(_, items) => return items.get(count as usize),
+            SelectItem::Option(x) => return Some(x),
+        }
+    }
+
+    None
+}
+
+impl<T> Component for Select<T>
+where
+    T: Clone + Display + PartialEq + 'static,
+{
+    type Message = SelectMsg;
+    type Properties = SelectProps<T>;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
+            select_ref: NodeRef::default(),
+            selected: _ctx.props().selected.clone(),
+        }
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            SelectMsg::SelectedChanged(x) => {
+                self.selected = find_nth(x, &ctx.props().values).unwrap().clone();
+                ctx.props().on_select.emit(self.selected.clone());
+                true
+            },
+
+            // All the up and down arrow keys to instantly select, which is
+            // useful for keyboard warrios. This is not ada without the shift
+            // key. I'm not sure if it is _with_ the shift key either, but its
+            // cool.
+            SelectMsg::KeyboardInput(is_shift, idx, code) => {
+                if is_shift {
+                    if code.as_str() == "ArrowUp" {
+                        if let Some(x) = find_nth(idx - 1, &ctx.props().values) {
+                            self.selected = x.clone();
+                            ctx.props().on_select.emit(self.selected.clone());
+                            return true;
+                        }
+                    } else if code.as_str() == "ArrowDown"
+                        && let Some(x) = find_nth(idx + 1, &ctx.props().values)
+                    {
+                        self.selected = x.clone();
+                        ctx.props().on_select.emit(self.selected.clone());
+                        return true;
+                    }
+                }
+
+                false
+            },
+        }
+    }
+
+    // The `<select>` has its own state not refelcted by `SelectProps`.
+    fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
+        self.selected = ctx.props().selected.clone();
+        true
+    }
+
+    // Annoyingly, `<select>` cannot be updated from its HTML alone.
+    fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool) {
+        if let Some(elem) = self.select_ref.cast::<web_sys::HtmlSelectElement>() {
+            elem.set_value(&format!("{}", self.selected))
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let callback = ctx.link().callback(|event: InputEvent| {
+            let value = event
+                .target()
+                .unwrap()
+                .unchecked_into::<web_sys::HtmlSelectElement>()
+                .selected_index();
+            SelectMsg::SelectedChanged(value)
+        });
+
+        let key_callback = ctx.link().callback(|event: KeyboardEvent| {
+            event.prevent_default();
+            let value = event
+                .target()
+                .unwrap()
+                .unchecked_into::<web_sys::HtmlSelectElement>()
+                .selected_index();
+
+            let is_shift = event.shift_key();
+            SelectMsg::KeyboardInput(is_shift, value, event.code())
+        });
+
+        let class = if let Some(class) = &ctx.props().class {
+            format!("noselect {class}")
+        } else {
+            "noselect".to_owned()
+        };
+
+        let is_group_selected = !ctx
+            .props()
+            .values
+            .iter()
+            .any(|x| matches!(x, SelectItem::Option(y) if *y == ctx.props().selected));
+
+        let select = html! {
+            <select
+                id={ctx.props().id}
+                {class}
+                ref={&self.select_ref}
+                oninput={callback}
+                onkeydown={key_callback}
+            >
+                { for ctx.props().values.iter().map(|value| match value {
+                        SelectItem::Option(value) => {
+                            let selected = *value == ctx.props().selected;
+                            html! {
+                                <option
+                                    key={ format!("{}", value) }
+                                    selected={ selected }
+                                    value={ format!("{value}") }>
+                                    { format!("{}", value) }
+                                </option>
+                            }
+                        },
+                        SelectItem::OptGroup(name, group) => html! {
+                            <optgroup
+                                key={ name.to_string() }
+                                label={ name.to_string() }>
+                                {
+                                    for group.iter().map(|value| {
+                                        let selected =
+                                            *value == ctx.props().selected;
+
+                                        let label = format!("{value}");
+                                        let category: &str = name.borrow();
+                                        let label = label
+                                            .strip_prefix(category)
+                                            .unwrap_or(&label)
+                                            .trim()
+                                            .to_owned();
+
+                                        html! {
+                                            <option
+                                                key={ format!("{}", value) }
+                                                selected={ selected }
+                                                value={ format!("{value}") }>
+                                                { label }
+                                            </option>
+                                        }
+                                    })
+                                }
+                            </optgroup>
+                        }
+                    }) }
+            </select>
+        };
+
+        let wrapper_class = match &ctx.props().wrapper_class {
+            Some(x) => classes!("dropdown-width-container", x),
+            None => classes!("dropdown-width-container"),
+        };
+
+        let value = if ctx.props().is_autosize {
+            self.selected.to_string()
+        } else {
+            "".to_owned()
+        };
+
+        html! {
+            if is_group_selected && ctx.props().label.is_some() {
+                <label>{ ctx.props().label.to_owned() }</label>
+                <div class={wrapper_class} data-value={value.clone()}>{ select }</div>
+            } else {
+                <div class={wrapper_class} data-value={value}>{ select }</div>
+            }
+        }
+    }
+}

package/src/rust/components/containers/sidebar.rs

@@ -0,0 +1,89 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use perspective_client::clone;
+use web_sys::Element;
+use yew::{
+    AttrValue, Callback, Children, Html, Properties, function_component, html, use_effect_with,
+    use_node_ref, use_state_eq,
+};
+
+use crate::components::editable_header::{EditableHeader, EditableHeaderProps};
+
+#[derive(PartialEq, Clone, Properties)]
+pub struct SidebarProps {
+    /// The component's children.
+    pub children: Children,
+
+    /// When this callback is called, the sidebar will close
+    pub on_close: Callback<()>,
+    pub id_prefix: String,
+    pub width_override: Option<i32>,
+    pub selected_tab: Option<usize>,
+    pub header_props: EditableHeaderProps,
+}
+
+/// Sidebars are designed to live in a
+/// [`super::split_panel::SplitPanel`]
+#[function_component]
+pub fn Sidebar(p: &SidebarProps) -> Html {
+    let id = &p.id_prefix;
+    let noderef = use_node_ref();
+    let auto_width = use_state_eq(|| 0f64);
+
+    // this gets the last calculated width and ensures that
+    // the auto-width element is at least that big.
+    // this ensures the panel grows but does not shrink.
+    use_effect_with(p.clone(), {
+        clone!(noderef, auto_width);
+        move |p| {
+            if p.width_override.is_none() {
+                let updated_width = noderef
+                    .cast::<Element>()
+                    .map(|el| el.get_bounding_client_rect().width())
+                    .unwrap_or_default();
+                let new_auto_width = (*auto_width).max(updated_width);
+                auto_width.set(new_auto_width);
+            } else {
+                auto_width.set(0f64);
+            }
+        }
+    });
+
+    let width_style = format!("min-width: 200px; width: {}px", *auto_width);
+    html! {
+        <div class="sidebar_column" id={format!("{id}_sidebar")} ref={noderef}>
+            <SidebarCloseButton id={format!("{id}_close_button")} on_close_sidebar={&p.on_close} />
+            <div class="sidebar_header"><EditableHeader ..p.header_props.clone() /></div>
+            <div class="sidebar_border" id={format!("{id}_border")} />
+            { p.children.iter().collect::<Html>() }
+            <div class="sidebar-auto-width" style={width_style} />
+        </div>
+    }
+}
+
+#[derive(PartialEq, Clone, Properties)]
+pub struct SidebarCloseButtonProps {
+    pub on_close_sidebar: Callback<()>,
+    pub id: AttrValue,
+}
+
+#[function_component]
+pub fn SidebarCloseButton(p: &SidebarCloseButtonProps) -> Html {
+    let onclick = yew::use_callback(p.on_close_sidebar.clone(), |_, cb| cb.emit(()));
+    let id = &p.id;
+    html! {
+        <div {onclick} {id} class="sidebar_close_button">
+            <div class="sidebar_close_button_inner" />
+        </div>
+    }
+}