Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Base UI for new components #160

Open
wants to merge 1 commit into
base: feat/treasury-plugins
Choose a base branch
from
Open

Base UI for new components #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 134 additions & 0 deletions src/components/atoms/autocomplete.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
use crate::components::atoms::Input;
use dioxus::prelude::*;

use super::dropdown::ElementSize;
#[derive(PartialEq, Debug, Clone, Default)]
pub struct AutocompleteItem {
pub key: String,
pub value: String,
}
#[derive(PartialEq, Props, Clone)]
pub struct AutocompleteProps {
value: Option<AutocompleteItem>,
label: Option<String>,
on_change: EventHandler<usize>,
on_input: EventHandler<FormEvent>,
#[props(!optional)]
default: Option<String>,
#[props(default = false)]
disabled: bool,
#[props(default = false)]
reverse: bool,
#[props(default = "".to_string())]
class: String,
placeholder: String,
help: Option<String>,
left_icon: Option<Element>,
#[props(default = ElementSize::Medium)]
size: ElementSize,
body: Vec<Element>,
add_element: Option<Element>,
}
pub fn Autocomplete(props: AutocompleteProps) -> Element {
let mut is_active = use_signal::<bool>(|| false);
let mut search = use_signal::<String>(|| String::new());

let disabled = if props.disabled {
"button--disabled"
} else {
""
};
let placeholder = if let None = props.value {
"autocomplete__placeholder"
} else {
""
};
let size = match props.size {
ElementSize::Big => "autocomplete__container--big",
ElementSize::Medium => "autocomplete__container--medium",
ElementSize::Small => "autocomplete__container--small",
};
rsx!(
section { class: "autocomplete {props.class}",
if let Some(value) = props.label {
label { class: "input__label",
"{value}"
}
}
if is_active() {
Input {
message: search(),
placeholder: "".to_string(),
size: ElementSize::Small,
autofocus: true,
focus: is_active(),
error: None,
on_input: move |event: Event<FormData>| {
search.set(event.value());
props.on_input.call(event);
},
on_keypress: move |_| {},
on_click: move |_| {},
on_focus: move |_| {
is_active.set(true)
},
on_blur: move |_| {
// is_active.set(false)
}
}
} else {
div { class: "dropdown__container {size}",
button {
class: "dropdown__wrapper {disabled}",
disabled: props.disabled,
onclick: move |_| {
if !props.disabled {
is_active.toggle();
}
},
onblur: move |_| {
// is_active.set(false);
},
{props.left_icon},
span { class: "dropdown__content",
span { class: "dropdown__value {placeholder}",
match props.value {
Some(v) => {v.value}.to_string(),
None => props.placeholder
}
}
}
}
}
}
if is_active() {
{
rsx!(
ul {
class : "autocomplete__list",
class : if props.reverse { "autocomplete__list--reverse" },
{
props.body.into_iter().enumerate().map(| (index, item) | {
rsx!(
li {
class : "autocomplete__item",
onclick : move | _ | {
log::info!("click item");
is_active.toggle();
props.on_change.call(index);
},
{ item }
}
)
})
}
if let Some(help) = props.add_element {
div { class: "autocomplete__item", {help} }
}
}
)
}
}
}
)
}
14 changes: 14 additions & 0 deletions src/components/atoms/autocomplete_item.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
use dioxus::prelude::*;
#[derive(PartialEq, Props, Clone)]
pub struct AutocompleteItemProps {
title: String,
// on_click: EventHandler<()>,
}
pub fn AutocompleteItemButton(props: AutocompleteItemProps) -> Element {
rsx!(
div {
class: "autocomplete__item--recipient",
span { class: "autocomplete__item__alias", "{props.title}"}
}
)
}
6 changes: 4 additions & 2 deletions src/components/atoms/avatar.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ pub enum Variant {
}
#[derive(PartialEq, Props, Clone)]
pub struct AvatarProps {
#[props(default = "".to_string())]
class: String,
name: String,
size: u8,
#[props(!optional)]
Expand All @@ -21,10 +23,10 @@ pub fn Avatar(props: AvatarProps) -> Element {
Variant::SemiRound => "avatar--semi-round",
};
rsx! {
match & props.uri { Some(uri) => rsx!(img { class : "avatar {variant}", style :
match & props.uri { Some(uri) => rsx!(img { class : "avatar {variant} {props.class}", style :
"{avatar_style}", src : "{uri}" }), None => { let initial : Vec < char > = props
.name.chars().collect(); let initial = initial[0].to_uppercase(); rsx!(div {
class : "avatar {variant}", style : "{avatar_style}", span { class :
class : "avatar {variant} {props.class}", style : "{avatar_style}", span { class :
"avatar--initial", "{initial}" } }) } }
}
}
2 changes: 1 addition & 1 deletion src/components/atoms/button.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ pub fn Button(props: ButtonProps) -> Element {
Some(s) => {
rsx!(
button {
class: "button {props.class} {variant} {size} {loading}",
class: "button {variant} {size} {loading} {props.class}",
disabled: true,
"{s}"
}
Expand Down
28 changes: 28 additions & 0 deletions src/components/atoms/checkbox.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
use dioxus::prelude::*;
#[derive(PartialEq, Props, Clone)]
pub struct CheckboxProps {
#[props(default = "".to_string())]
class: String,
id: String,
name: String,
checked: bool,
label: String,
#[props(default = false)]
disabled: bool,
on_change: EventHandler,
}
pub fn Checkbox(props: CheckboxProps) -> Element {
rsx!(
label {
class: "container {props.class}",
input {
r#type: "checkbox",
name: props.name,
checked: props.checked,
onchange: move |_| { props.on_change.call(()) }
}
span {class: "checkmark"}
span {class: "checkbox__label", {props.label} }
}
)
}
24 changes: 10 additions & 14 deletions src/components/atoms/combo_input.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
use super::dropdown::ElementSize;
use crate::components::atoms::{dropdown::DropdownItem, input::InputType, Dropdown, Input};
use dioxus::prelude::*;
use dioxus_std::{i18n::use_i18, translate};
use crate::components::atoms::{
dropdown::DropdownItem, input::InputType, Dropdown, Input,
};
use super::dropdown::ElementSize;
#[derive(PartialEq, Clone, Debug)]
pub enum ComboInputOption {
Dropdown(DropdownItem),
Expand Down Expand Up @@ -34,16 +32,12 @@ pub fn ComboInput(props: ComboInputProps) -> Element {
let mut option_value = use_signal(|| props.value.option.clone());
let mut input_value = use_signal::<String>(|| props.value.input.clone());
let mut items = vec![];
let dropdown_options = use_signal::<
Vec<DropdownItem>,
>(|| {
let dropdown_options = use_signal::<Vec<DropdownItem>>(|| {
let Some(options) = props.options else {
return vec![
DropdownItem {
key: "Wallet".to_string(),
value: translate!(i18, "onboard.invite.form.wallet.label"),
},
];
return vec![DropdownItem {
key: "Wallet".to_string(),
value: translate!(i18, "onboard.invite.form.wallet.label"),
}];
};
options
});
Expand All @@ -68,6 +62,7 @@ pub fn ComboInput(props: ComboInputProps) -> Element {
},
on_keypress: move |_| {},
on_click: move |_| {},
on_focus: move |_| {}, on_blur: move |_| {}
}
),
ComboInputOption::Dropdown(value) => rsx!(
Expand Down Expand Up @@ -105,7 +100,8 @@ pub fn ComboInput(props: ComboInputProps) -> Element {
})
},
on_keypress: move |_| {},
on_click: move |_| {}
on_click: move |_| {},
on_focus: move |_| {}, on_blur: move |_| {}
}
}
)
Expand Down
42 changes: 37 additions & 5 deletions src/components/atoms/dropdown.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
use dioxus::prelude::*;
use crate::components::atoms::{Arrow, Icon};
use dioxus::prelude::*;
#[derive(PartialEq, Debug, Clone, Default)]
pub struct DropdownItem {
pub key: String,
Expand All @@ -14,6 +14,7 @@ pub enum ElementSize {
#[derive(PartialEq, Props, Clone)]
pub struct DropdownProps {
value: Option<DropdownItem>,
value_help: Option<String>,
label: Option<String>,
on_change: EventHandler<usize>,
#[props(!optional)]
Expand All @@ -23,14 +24,24 @@ pub struct DropdownProps {
#[props(default = "".to_string())]
class: String,
placeholder: String,
help: Option<String>,
left_icon: Option<Element>,
#[props(default = ElementSize::Medium)]
size: ElementSize,
body: Vec<Element>,
}
pub fn Dropdown(props: DropdownProps) -> Element {
let mut is_active = use_signal::<bool>(|| false);
let disabled = if props.disabled { "button--disabled" } else { "" };
let placeholder = if let None = props.value { "dropdown__placeholder" } else { "" };
let disabled = if props.disabled {
"button--disabled"
} else {
""
};
let placeholder = if let None = props.value {
"dropdown__placeholder"
} else {
""
};
let size = match props.size {
ElementSize::Big => "dropdown__container--big",
ElementSize::Medium => "dropdown__container--medium",
Expand All @@ -50,11 +61,29 @@ pub fn Dropdown(props: DropdownProps) -> Element {
is_active.toggle();
}
},
onblur: move |_| {
// is_active.set(false);
},
{props.left_icon},
span { class: "dropdown__content",
span { class: "dropdown__value {placeholder}",
match props.value {
Some(v) => {v.value}.to_string(),
None => props.placeholder
Some(v) => {
match props.value_help {
Some(value_help) => rsx!(
div { class: "card-send2__info",
h5 { class: "card-send3__info__title",
{v.value}
}
p { class: "card-send3__info__description",
{value_help}
}
}
),
None => rsx!({v.value}),
}
},
None => rsx!({props.placeholder})
}
}
Icon {
Expand All @@ -73,6 +102,9 @@ pub fn Dropdown(props: DropdownProps) -> Element {
is_active.toggle(); props.on_change.call(index) }, { item } }) }) } }) }
}
}
if let Some(help) = props.help {
div { class: "input--help", "{help}" }
}
}
)
}
Loading