perspective_viewer/components/column_selector/
column_selector_column_row.rs

1// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
2// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
3// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
4// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
5// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
6// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
7// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
8// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
9// ┃ This file is part of the Perspective library, distributed under the terms ┃
10// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
11// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
12
13use perspective_client::config::ColumnType;
14use web_sys::DragEvent;
15use yew::prelude::*;
16
17use crate::components::type_icon::TypeIcon;
18
19/// The draggable row of a `column-selector-column`
20#[derive(Clone, PartialEq, Properties)]
21pub struct ColumnSelectorColumnRowProps {
22    pub name: String,
23
24    #[prop_or_default]
25    pub col_type: Option<ColumnType>,
26
27    #[prop_or_default]
28    pub aggregate: Option<Html>,
29
30    /// Trailing affordance (e.g. the edit button in the active list).
31    #[prop_or_default]
32    pub trailing: Html,
33
34    #[prop_or_default]
35    pub wrapper_class: Classes,
36
37    #[prop_or_default]
38    pub wrapper_ref: NodeRef,
39
40    #[prop_or_default]
41    pub ondragstart: Option<Callback<DragEvent>>,
42
43    #[prop_or_default]
44    pub ondragend: Option<Callback<DragEvent>>,
45}
46
47#[function_component]
48pub fn ColumnSelectorColumnRow(p: &ColumnSelectorColumnRowProps) -> Html {
49    let mut classes = classes!["column-selector-draggable"];
50    if p.aggregate.is_some() {
51        classes.push("show-aggregate");
52    }
53
54    classes.extend(p.wrapper_class.clone());
55    html! {
56        <div
57            class={classes}
58            ref={&p.wrapper_ref}
59            draggable={p.ondragstart.is_some().then_some("true")}
60            ondragstart={p.ondragstart.clone()}
61            ondragend={p.ondragend.clone()}
62        >
63            <div class="column-selector-column-border">
64                <span class="drag-handle icon" />
65                <TypeIcon ty={p.col_type.unwrap_or(ColumnType::String)} />
66                if let Some(aggregate) = &p.aggregate { { aggregate.clone() } }
67                <span class="column_name">{ p.name.clone() }</span>
68                if p.aggregate.is_none() { <span class="column-selector--spacer" /> }
69                { p.trailing.clone() }
70            </div>
71        </div>
72    }
73}
perspective_viewer/components/column_selector/column_selector_column_row.rs

perspective_viewer/components/column_selector/
column_selector_column_row.rs
