mirror of
https://github.com/yewprint/yewprint
synced 2024-11-25 13:00:19 +00:00
WIP: Tree: intent & cleanup
This commit is contained in:
parent
96b58f8fd7
commit
6089ca39c7
4 changed files with 48 additions and 19 deletions
|
@ -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,
|
||||||
|
|
|
@ -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)
|
||||||
|
|
19
src/lib.rs
19
src/lib.rs
|
@ -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",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
32
src/tree.rs
32
src/tree.rs
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue