WIP: Tree: intent & cleanup

This commit is contained in:
Cecile Tonglet 2020-09-14 06:19:58 +02:00
parent 96b58f8fd7
commit 6089ca39c7
4 changed files with 48 additions and 19 deletions

View file

@ -3,6 +3,7 @@ use crate::collapse::Collapse;
use crate::forms::controls::Switch; use crate::forms::controls::Switch;
use crate::icon::IconName; use crate::icon::IconName;
use crate::tree::*; use crate::tree::*;
use crate::Intent;
use yew::prelude::*; use yew::prelude::*;
const DARK_BG_COLOR: &str = "#30404d"; const DARK_BG_COLOR: &str = "#30404d";
@ -35,6 +36,8 @@ impl Component for App {
.insert( .insert(
Node::new(NodeData { Node::new(NodeData {
icon: None, icon: None,
icon_color: None,
icon_intent: None,
label: "".into(), label: "".into(),
is_selected: false, is_selected: false,
is_expanded: false, is_expanded: false,
@ -51,6 +54,8 @@ impl Component for App {
.insert( .insert(
Node::new(NodeData { Node::new(NodeData {
icon: Some(IconName::FolderClose), icon: Some(IconName::FolderClose),
icon_color: None,
icon_intent: None,
label: "Directory 1".into(), label: "Directory 1".into(),
is_selected: false, is_selected: false,
is_expanded: false, is_expanded: false,
@ -66,6 +71,8 @@ impl Component for App {
tree.insert( tree.insert(
Node::new(NodeData { Node::new(NodeData {
icon: Some(IconName::Document), icon: Some(IconName::Document),
icon_color: None,
icon_intent: None,
label: "File 1".into(), label: "File 1".into(),
is_selected: false, is_selected: false,
is_expanded: false, is_expanded: false,
@ -81,6 +88,8 @@ impl Component for App {
tree.insert( tree.insert(
Node::new(NodeData { Node::new(NodeData {
icon: Some(IconName::Tag), icon: Some(IconName::Tag),
icon_color: None,
icon_intent: Some(Intent::Primary),
label: "File 2".into(), label: "File 2".into(),
is_selected: false, is_selected: false,
is_expanded: false, is_expanded: false,

View file

@ -1,3 +1,4 @@
use crate::Intent;
use yew::prelude::*; use yew::prelude::*;
include!(concat!(env!("OUT_DIR"), "/icon_svg_paths.rs")); include!(concat!(env!("OUT_DIR"), "/icon_svg_paths.rs"));
@ -24,6 +25,8 @@ pub struct Props {
pub title: Option<String>, pub title: Option<String>,
#[prop_or_default] #[prop_or_default]
pub color: Option<String>, pub color: Option<String>,
#[prop_or_default]
pub intent: Option<Intent>,
#[prop_or(16)] #[prop_or(16)]
pub icon_size: i32, pub icon_size: i32,
#[prop_or_default] #[prop_or_default]
@ -54,6 +57,10 @@ impl Component for Icon {
fn view(&self) -> Html { fn view(&self) -> Html {
let mut class = "bp3-icon ".to_string(); let mut class = "bp3-icon ".to_string();
class.push_str(self.props.class.as_str()); class.push_str(self.props.class.as_str());
class.push_str(" ");
if let Some(intent) = self.props.intent {
class.push_str(intent.into());
}
let paths = if self.props.icon_size == SIZE_STANDARD { let paths = if self.props.icon_size == SIZE_STANDARD {
icon_svg_paths_16(self.props.icon) icon_svg_paths_16(self.props.icon)

View file

@ -23,3 +23,22 @@ pub fn run_app() -> Result<(), wasm_bindgen::JsValue> {
Ok(()) Ok(())
} }
#[derive(Debug, Copy, Clone, PartialEq)]
pub enum Intent {
Primary,
Success,
Warning,
Danger,
}
impl From<Intent> for &'static str {
fn from(intent: Intent) -> Self {
match intent {
Intent::Primary => "bp3-intent-primary",
Intent::Success => "bp3-intent-success",
Intent::Warning => "bp3-intent-warning",
Intent::Danger => "bp3-intent-danger",
}
}
}

View file

@ -1,5 +1,6 @@
use crate::collapse::Collapse; use crate::collapse::Collapse;
use crate::icon::{Icon, IconName}; use crate::icon::{Icon, IconName};
use crate::Intent;
pub use id_tree::*; pub use id_tree::*;
use std::cell::{Ref, RefCell, RefMut}; use std::cell::{Ref, RefCell, RefMut};
use std::rc::Rc; use std::rc::Rc;
@ -18,15 +19,6 @@ impl<T> PartialEq for TreeData<T> {
} }
impl<T> TreeData<T> { impl<T> TreeData<T> {
pub fn new() -> Self {
let tree = id_tree::Tree::new();
Self {
tree: Rc::new(RefCell::new(tree)),
version: 0,
}
}
pub fn borrow(&self) -> Ref<id_tree::Tree<NodeData<T>>> { pub fn borrow(&self) -> Ref<id_tree::Tree<NodeData<T>>> {
self.tree.borrow() self.tree.borrow()
} }
@ -61,6 +53,8 @@ pub struct NodeData<T> {
pub disabled: bool, pub disabled: bool,
pub has_caret: bool, pub has_caret: bool,
pub icon: Option<IconName>, pub icon: Option<IconName>,
pub icon_color: Option<String>,
pub icon_intent: Option<Intent>,
pub is_expanded: bool, pub is_expanded: bool,
pub is_selected: bool, pub is_selected: bool,
pub label: yew::virtual_dom::VNode, pub label: yew::virtual_dom::VNode,
@ -134,6 +128,8 @@ impl<T: Clone> Tree<T> {
disabled=data.disabled disabled=data.disabled
has_caret=data.has_caret has_caret=data.has_caret
icon=data.icon icon=data.icon
icon_color=data.icon_color.clone()
icon_intent=data.icon_intent
is_expanded=data.is_expanded is_expanded=data.is_expanded
is_selected=data.is_selected is_selected=data.is_selected
label=data.label.clone() label=data.label.clone()
@ -160,23 +156,16 @@ pub struct TreeNode {
#[derive(Clone, PartialEq, Properties)] #[derive(Clone, PartialEq, Properties)]
pub struct TreeNodeProps { pub struct TreeNodeProps {
#[prop_or_default]
pub disabled: bool, pub disabled: bool,
#[prop_or_default]
pub has_caret: bool, pub has_caret: bool,
#[prop_or_default]
pub icon: Option<IconName>, pub icon: Option<IconName>,
#[prop_or_default] pub icon_color: Option<String>,
pub icon_intent: Option<Intent>,
pub is_expanded: bool, pub is_expanded: bool,
#[prop_or_default]
pub is_selected: bool, pub is_selected: bool,
#[prop_or_default]
pub label: yew::virtual_dom::VNode, pub label: yew::virtual_dom::VNode,
#[prop_or_default]
pub on_collapse: Option<Callback<MouseEvent>>, pub on_collapse: Option<Callback<MouseEvent>>,
#[prop_or_default]
pub on_expand: Option<Callback<MouseEvent>>, pub on_expand: Option<Callback<MouseEvent>>,
#[prop_or_default]
pub children: html::Children, pub children: html::Children,
pub depth: u32, pub depth: u32,
} }
@ -239,7 +228,12 @@ impl Component for TreeNode {
} }
} }
} }
<Icon class="bp3-tree-node-icon" icon=self.props.icon.unwrap_or_default() /> <Icon
class="bp3-tree-node-icon"
icon=self.props.icon.unwrap_or_default()
color=self.props.icon_color.clone(),
intent=self.props.icon_intent,
/>
<span class="bp3-tree-node-label">{self.props.label.clone()}</span> <span class="bp3-tree-node-label">{self.props.label.clone()}</span>
</div> </div>
<Collapse is_open=self.props.is_expanded> <Collapse is_open=self.props.is_expanded>