mirror of
https://github.com/adoyle0/thaw.git
synced 2025-02-02 16:44:15 -05:00
refactor: dead code
This commit is contained in:
luoxiao
parent
1d7237e6de
commit
f4838a8168
9 changed files with 1 additions and 467 deletions
|
|
@ -84,7 +84,6 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
|
||||||
<Route path=StaticSegment("input") view=InputMdPage/>
|
<Route path=StaticSegment("input") view=InputMdPage/>
|
||||||
<Route path=StaticSegment("layout") view=LayoutMdPage/>
|
<Route path=StaticSegment("layout") view=LayoutMdPage/>
|
||||||
<Route path=StaticSegment("loading-bar") view=LoadingBarMdPage/>
|
<Route path=StaticSegment("loading-bar") view=LoadingBarMdPage/>
|
||||||
// <Route path="/message" view=MessageMdPage/>
|
|
||||||
<Route path=StaticSegment("message-bar") view=MessageBarMdPage/>
|
<Route path=StaticSegment("message-bar") view=MessageBarMdPage/>
|
||||||
<Route path=StaticSegment("popover") view=PopoverMdPage/>
|
<Route path=StaticSegment("popover") view=PopoverMdPage/>
|
||||||
<Route path=StaticSegment("progress-bar") view=ProgressBarMdPage/>
|
<Route path=StaticSegment("progress-bar") view=ProgressBarMdPage/>
|
||||||
|
|
@ -94,7 +93,6 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
|
||||||
{
|
{
|
||||||
view! {
|
view! {
|
||||||
<Route path=StaticSegment("scrollbar") view=ScrollbarMdPage/>
|
<Route path=StaticSegment("scrollbar") view=ScrollbarMdPage/>
|
||||||
// <Route path="/select" view=SelectMdPage/>
|
|
||||||
<Route path=StaticSegment("skeleton") view=SkeletonMdPage/>
|
<Route path=StaticSegment("skeleton") view=SkeletonMdPage/>
|
||||||
<Route path=StaticSegment("slider") view=SliderMdPage/>
|
<Route path=StaticSegment("slider") view=SliderMdPage/>
|
||||||
<Route path=StaticSegment("space") view=SpaceMdPage/>
|
<Route path=StaticSegment("space") view=SpaceMdPage/>
|
||||||
|
|
|
||||||
|
|
@ -229,10 +229,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
|
||||||
value: "/components/loading-bar".into(),
|
value: "/components/loading-bar".into(),
|
||||||
label: "Loading Bar".into(),
|
label: "Loading Bar".into(),
|
||||||
},
|
},
|
||||||
// MenuItemOption {
|
|
||||||
// value: "/components/message".into(),
|
|
||||||
// label: "Message".into(),
|
|
||||||
// },
|
|
||||||
MenuItemOption {
|
MenuItemOption {
|
||||||
value: "/components/message-bar".into(),
|
value: "/components/message-bar".into(),
|
||||||
label: "Message Bar".into(),
|
label: "Message Bar".into(),
|
||||||
|
|
@ -253,10 +249,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
|
||||||
value: "/components/scrollbar".into(),
|
value: "/components/scrollbar".into(),
|
||||||
label: "Scrollbar".into(),
|
label: "Scrollbar".into(),
|
||||||
},
|
},
|
||||||
// MenuItemOption {
|
|
||||||
// value: "/components/select".into(),
|
|
||||||
// label: "Select".into(),
|
|
||||||
// },
|
|
||||||
MenuItemOption {
|
MenuItemOption {
|
||||||
value: "/components/skeleton".into(),
|
value: "/components/skeleton".into(),
|
||||||
label: "Skeleton".into(),
|
label: "Skeleton".into(),
|
||||||
|
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
# Message
|
|
||||||
|
|
||||||
<MessageBar layout=MessageBarLayout::Multiline intent=MessageBarIntent::Warning>
|
|
||||||
<MessageBarBody>
|
|
||||||
<h3 style="margin: 0">"Prerequisite"</h3>
|
|
||||||
<p>
|
|
||||||
"If you want to use message, you need to wrap the component where you call related methods inside MessageProvider and use use_message to get the API."
|
|
||||||
</p>
|
|
||||||
</MessageBarBody>
|
|
||||||
</MessageBar>
|
|
||||||
|
|
||||||
```rust demo
|
|
||||||
let message = use_message();
|
|
||||||
let success = move |_| {
|
|
||||||
message.create(
|
|
||||||
"Success".into(),
|
|
||||||
MessageVariant::Success,
|
|
||||||
MessageOptions {closable: true, duration: std::time::Duration::from_secs(0)},
|
|
||||||
);
|
|
||||||
};
|
|
||||||
let warning = move |_| {
|
|
||||||
message.create(
|
|
||||||
"Warning".into(),
|
|
||||||
MessageVariant::Warning,
|
|
||||||
Default::default(),
|
|
||||||
);
|
|
||||||
};
|
|
||||||
let error = move |_| {
|
|
||||||
message.create("Error".into(), MessageVariant::Error, Default::default());
|
|
||||||
};
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<Space>
|
|
||||||
<Button on_click=success>"Success"</Button>
|
|
||||||
<Button on_click=warning>"Warning"</Button>
|
|
||||||
<Button on_click=error>"Error"</Button>
|
|
||||||
</Space>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### MessageProvider Props
|
|
||||||
|
|
||||||
| Name | Type | Default | Desciption |
|
|
||||||
| --------- | ------------------ | ----------------------- | ------------------------------- |
|
|
||||||
| placement | `MessagePlacement` | `MessagePlacement::Top` | Position to place the messages. |
|
|
||||||
|
|
||||||
### MessageProvider Injection Methods
|
|
||||||
|
|
||||||
| Name | Type | Description |
|
|
||||||
| ------ | ------------------------------------------------------------------------------ | ------------------------ |
|
|
||||||
| create | `fn(&self, content: String, variant: MessageVariant, options: MessageOptions)` | Use create type message. |
|
|
||||||
|
|
||||||
### MessageOptions fields
|
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| duration | `Duration` | `std::time::Duration::from_secs(3)` | How long the message will be displayed. 0 for permanent message |
|
|
||||||
| closable | `bool` | `false` | Can the message be manually closed. |
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
# Select
|
|
||||||
|
|
||||||
```rust demo
|
|
||||||
let value = RwSignal::new(None::<String>);
|
|
||||||
|
|
||||||
let options = vec![
|
|
||||||
SelectOption::new("RwSignal", String::from("rw_signal")),
|
|
||||||
SelectOption::new("Memo", String::from("memo")),
|
|
||||||
];
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<Select value options />
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
# Multiple Select
|
|
||||||
|
|
||||||
```rust demo
|
|
||||||
let value = RwSignal::new(vec![
|
|
||||||
"rust".to_string(),
|
|
||||||
"javascript".to_string(),
|
|
||||||
"zig".to_string(),
|
|
||||||
"python".to_string(),
|
|
||||||
"cpp".to_string(),
|
|
||||||
]);
|
|
||||||
|
|
||||||
let options = vec![
|
|
||||||
MultiSelectOption::new("Rust", String::from("rust")).with_variant(TagVariant::Success),
|
|
||||||
MultiSelectOption::new("JavaScript", String::from("javascript")),
|
|
||||||
MultiSelectOption::new("Python", String::from("python")).with_variant(TagVariant::Warning),
|
|
||||||
MultiSelectOption::new("C++", String::from("cpp")).with_variant(TagVariant::Error),
|
|
||||||
MultiSelectOption::new("Lua", String::from("lua")),
|
|
||||||
MultiSelectOption::new("Zig", String::from("zig")),
|
|
||||||
];
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<MultiSelect value options />
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Select Props
|
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
|
||||||
| ------- | ----------------------------------- | -------------------- | ----------------------------------------- |
|
|
||||||
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the select element. |
|
|
||||||
| value | `Model<Option<T>>` | `None` | Checked value. |
|
|
||||||
| options | `MaybeSignal<Vec<SelectOption<T>>>` | `vec![]` | Options that can be selected. |
|
|
||||||
|
|
||||||
### Multiple Select Props
|
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
|
||||||
| --------- | ----------------------------------- | -------------------- | ----------------------------------------- |
|
|
||||||
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the select element. |
|
|
||||||
| value | `Model<Vec<T>>` | `vec![]` | Checked values. |
|
|
||||||
| options | `MaybeSignal<Vec<SelectOption<T>>>` | `vec![]` | Options that can be selected. |
|
|
||||||
| clearable | `MaybeSignal<bool>` | `false` | Allow the options to be cleared. |
|
|
||||||
|
|
||||||
### Select Slots
|
|
||||||
|
|
||||||
| Name | Default | Description |
|
|
||||||
| ----------- | ------- | ------------- |
|
|
||||||
| SelectLabel | `None` | Select label. |
|
|
||||||
|
|
@ -53,13 +53,11 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
|
||||||
"InputMdPage" => "../docs/input/mod.md",
|
"InputMdPage" => "../docs/input/mod.md",
|
||||||
"LayoutMdPage" => "../docs/layout/mod.md",
|
"LayoutMdPage" => "../docs/layout/mod.md",
|
||||||
"LoadingBarMdPage" => "../docs/loading_bar/mod.md",
|
"LoadingBarMdPage" => "../docs/loading_bar/mod.md",
|
||||||
// "MessageMdPage" => "../docs/message/mod.md",
|
|
||||||
"MessageBarMdPage" => "../docs/message_bar/mod.md",
|
"MessageBarMdPage" => "../docs/message_bar/mod.md",
|
||||||
"PopoverMdPage" => "../docs/popover/mod.md",
|
"PopoverMdPage" => "../docs/popover/mod.md",
|
||||||
"ProgressBarMdPage" => "../docs/progress_bar/mod.md",
|
"ProgressBarMdPage" => "../docs/progress_bar/mod.md",
|
||||||
"RadioMdPage" => "../docs/radio/mod.md",
|
"RadioMdPage" => "../docs/radio/mod.md",
|
||||||
"ScrollbarMdPage" => "../docs/scrollbar/mod.md",
|
"ScrollbarMdPage" => "../docs/scrollbar/mod.md",
|
||||||
// "SelectMdPage" => "../docs/select/mod.md",
|
|
||||||
"SkeletonMdPage" => "../docs/skeleton/mod.md",
|
"SkeletonMdPage" => "../docs/skeleton/mod.md",
|
||||||
"SliderMdPage" => "../docs/slider/mod.md",
|
"SliderMdPage" => "../docs/slider/mod.md",
|
||||||
"SpaceMdPage" => "../docs/space/mod.md",
|
"SpaceMdPage" => "../docs/space/mod.md",
|
||||||
|
|
|
||||||
|
|
@ -1,122 +0,0 @@
|
||||||
.thaw-message-container {
|
|
||||||
z-index: 6000;
|
|
||||||
position: fixed;
|
|
||||||
overflow: visible;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message-container--top {
|
|
||||||
align-items: center;
|
|
||||||
top: 12px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message-container--bottom {
|
|
||||||
align-items: center;
|
|
||||||
bottom: 12px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message-container--bottom-left {
|
|
||||||
align-items: start;
|
|
||||||
bottom: 12px;
|
|
||||||
left: 12px;
|
|
||||||
right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message-container--bottom-right {
|
|
||||||
align-items: end;
|
|
||||||
bottom: 12px;
|
|
||||||
left: 0px;
|
|
||||||
right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message-container--top-left {
|
|
||||||
align-items: start;
|
|
||||||
top: 12px;
|
|
||||||
left: 12px;
|
|
||||||
right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message-container--top-right {
|
|
||||||
align-items: end;
|
|
||||||
top: 12px;
|
|
||||||
left: 0px;
|
|
||||||
right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message-wrapper {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
position: relative;
|
|
||||||
transform-origin: top center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message-wrapper.fade-in-height-expand-transition-leave-from,
|
|
||||||
.thaw-message-wrapper.fade-in-height-expand-transition-enter-to {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message-wrapper.fade-in-height-expand-transition-leave-to,
|
|
||||||
.thaw-message-wrapper.fade-in-height-expand-transition-enter-from {
|
|
||||||
transform: scale(0.85);
|
|
||||||
opacity: 0;
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
max-height: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message-wrapper.fade-in-height-expand-transition-leave-active {
|
|
||||||
overflow: visible;
|
|
||||||
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s,
|
|
||||||
opacity 0.3s cubic-bezier(0, 0, 0.2, 1) 0s,
|
|
||||||
margin-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s,
|
|
||||||
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message-wrapper.fade-in-height-expand-transition-enter-active {
|
|
||||||
overflow: visible;
|
|
||||||
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
||||||
opacity 0.3s cubic-bezier(0.4, 0, 1, 1),
|
|
||||||
margin-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
||||||
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message {
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 10px 20px;
|
|
||||||
|
|
||||||
max-width: 75vh;
|
|
||||||
background: var(--thaw-background-color);
|
|
||||||
|
|
||||||
font-size: 14px;
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
||||||
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
|
||||||
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message__icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
margin-right: 10px;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message__content {
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thaw-message__close {
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
@ -1,108 +0,0 @@
|
||||||
use super::{Message, MessageVariant};
|
|
||||||
use leptos::{context::Provider, prelude::*};
|
|
||||||
use std::time::Duration;
|
|
||||||
use thaw_components::Teleport;
|
|
||||||
use thaw_utils::{class_list, mount_style};
|
|
||||||
use uuid::Uuid;
|
|
||||||
|
|
||||||
#[derive(Default, Clone)]
|
|
||||||
pub enum MessagePlacement {
|
|
||||||
#[default]
|
|
||||||
Top,
|
|
||||||
TopLeft,
|
|
||||||
TopRight,
|
|
||||||
Bottom,
|
|
||||||
BottomLeft,
|
|
||||||
BottomRight,
|
|
||||||
}
|
|
||||||
|
|
||||||
impl MessagePlacement {
|
|
||||||
fn container_style(&self) -> String {
|
|
||||||
match self {
|
|
||||||
MessagePlacement::Top => "thaw-message-container--top".to_owned(),
|
|
||||||
MessagePlacement::TopLeft => "thaw-message-container--top-left".to_owned(),
|
|
||||||
MessagePlacement::TopRight => "thaw-message-container--top-right".to_owned(),
|
|
||||||
MessagePlacement::Bottom => "thaw-message-container--bottom".to_owned(),
|
|
||||||
MessagePlacement::BottomLeft => "thaw-message-container--bottom-left".to_owned(),
|
|
||||||
MessagePlacement::BottomRight => "thaw-message-container--bottom-right".to_owned(),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#[component]
|
|
||||||
pub fn MessageProvider(
|
|
||||||
#[prop(optional)] placement: MessagePlacement,
|
|
||||||
children: Children,
|
|
||||||
) -> impl IntoView {
|
|
||||||
mount_style("message", include_str!("./message.css"));
|
|
||||||
|
|
||||||
let message_list = RwSignal::<Vec<MessageType>>::new(vec![]);
|
|
||||||
|
|
||||||
let handle_after_leave = move |id| {
|
|
||||||
message_list.update(move |message_list| {
|
|
||||||
let Some(index) = message_list.iter().position(|message| id == message.0) else {
|
|
||||||
return;
|
|
||||||
};
|
|
||||||
message_list.remove(index);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<Provider value=MessageInjection::new(
|
|
||||||
message_list,
|
|
||||||
)>
|
|
||||||
{children()} <Teleport>
|
|
||||||
<div class=class_list!["thaw-message-container", placement.container_style()]>
|
|
||||||
<For
|
|
||||||
each=move || message_list.get()
|
|
||||||
key=|message| message.0
|
|
||||||
children=move |message| {
|
|
||||||
view! { <Message message on_close=handle_after_leave/> }
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</Teleport>
|
|
||||||
</Provider>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pub(crate) type MessageType = (Uuid, String, MessageVariant, MessageOptions);
|
|
||||||
|
|
||||||
#[derive(Clone)]
|
|
||||||
pub struct MessageOptions {
|
|
||||||
pub duration: Duration,
|
|
||||||
pub closable: bool,
|
|
||||||
}
|
|
||||||
|
|
||||||
impl Default for MessageOptions {
|
|
||||||
fn default() -> Self {
|
|
||||||
Self {
|
|
||||||
duration: Duration::from_secs(3),
|
|
||||||
closable: false,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(Clone)]
|
|
||||||
pub struct MessageInjection {
|
|
||||||
message_list: RwSignal<Vec<MessageType>>,
|
|
||||||
}
|
|
||||||
impl Copy for MessageInjection {}
|
|
||||||
|
|
||||||
impl MessageInjection {
|
|
||||||
fn new(message_list: RwSignal<Vec<MessageType>>) -> Self {
|
|
||||||
Self { message_list }
|
|
||||||
}
|
|
||||||
|
|
||||||
pub fn create(&self, content: String, variant: MessageVariant, options: MessageOptions) {
|
|
||||||
self.message_list.update(move |message_list| {
|
|
||||||
let id = uuid::Uuid::new_v4();
|
|
||||||
message_list.push((id, content, variant, options));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pub fn use_message() -> MessageInjection {
|
|
||||||
expect_context::<MessageInjection>()
|
|
||||||
}
|
|
||||||
|
|
@ -1,104 +0,0 @@
|
||||||
mod message_provider;
|
|
||||||
|
|
||||||
pub use message_provider::*;
|
|
||||||
|
|
||||||
use crate::{Icon, Theme};
|
|
||||||
use leptos::{html, prelude::*};
|
|
||||||
use thaw_components::{CSSTransition, If, Then};
|
|
||||||
use uuid::Uuid;
|
|
||||||
|
|
||||||
#[derive(Default, Clone)]
|
|
||||||
pub enum MessageVariant {
|
|
||||||
#[default]
|
|
||||||
Success,
|
|
||||||
Warning,
|
|
||||||
Error,
|
|
||||||
}
|
|
||||||
|
|
||||||
impl MessageVariant {
|
|
||||||
fn icon(&self) -> icondata_core::Icon {
|
|
||||||
match self {
|
|
||||||
MessageVariant::Success => icondata_ai::AiCloseCircleFilled,
|
|
||||||
MessageVariant::Warning => icondata_ai::AiExclamationCircleFilled,
|
|
||||||
MessageVariant::Error => icondata_ai::AiCheckCircleFilled,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// fn theme_color(&self, theme: &Theme) -> String {
|
|
||||||
// match self {
|
|
||||||
// MessageVariant::Success => theme.common.color_success.clone(),
|
|
||||||
// MessageVariant::Warning => theme.common.color_warning.clone(),
|
|
||||||
// MessageVariant::Error => theme.common.color_error.clone(),
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
#[component]
|
|
||||||
fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) -> impl IntoView {
|
|
||||||
let (id, content, variant, MessageOptions { duration, closable }) = message;
|
|
||||||
let is_show = RwSignal::new(true);
|
|
||||||
let message_ref = NodeRef::<html::Div>::new();
|
|
||||||
|
|
||||||
if !duration.is_zero() {
|
|
||||||
set_timeout(
|
|
||||||
move || {
|
|
||||||
is_show.set(false);
|
|
||||||
},
|
|
||||||
duration,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// let theme = use_theme(Theme::light);
|
|
||||||
let css_vars = Memo::new(move |_| {
|
|
||||||
let mut css_vars = String::new();
|
|
||||||
// theme.with(|theme| {
|
|
||||||
// css_vars.push_str(&format!(
|
|
||||||
// "--thaw-background-color: {}",
|
|
||||||
// theme.message.background_color
|
|
||||||
// ))
|
|
||||||
// });
|
|
||||||
css_vars
|
|
||||||
});
|
|
||||||
// let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme)));
|
|
||||||
|
|
||||||
let on_before_leave = Callback::new(move |_| {
|
|
||||||
// let Some(node_el) = message_ref.get() else {
|
|
||||||
// return;
|
|
||||||
// };
|
|
||||||
// use std::ops::Deref;
|
|
||||||
// let any_el = node_el.into_any();
|
|
||||||
// let el = any_el.deref();
|
|
||||||
// let style = el.style();
|
|
||||||
// let _ = style.set_property("max-height", &format!("{}px", el.offset_height()));
|
|
||||||
});
|
|
||||||
let on_after_leave = Callback::new(move |_| {
|
|
||||||
// queue_microtask(move || on_close.call(id));
|
|
||||||
});
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<CSSTransition
|
|
||||||
node_ref=message_ref
|
|
||||||
name="fade-in-height-expand-transition"
|
|
||||||
show=is_show
|
|
||||||
appear=true
|
|
||||||
on_before_leave=on_before_leave
|
|
||||||
on_after_leave=on_after_leave
|
|
||||||
let:_
|
|
||||||
>
|
|
||||||
<div class="thaw-message-wrapper" node_ref=message_ref>
|
|
||||||
<div class="thaw-message" style=move || css_vars.get()>
|
|
||||||
<div class="thaw-message__icon">
|
|
||||||
<Icon icon=variant.icon()/>
|
|
||||||
</div>
|
|
||||||
<div class="thaw-message__content">{content}</div>
|
|
||||||
<If cond=closable>
|
|
||||||
<Then slot>
|
|
||||||
<div class="thaw-message__close" on:click=move |_| is_show.set(false)>
|
|
||||||
<Icon icon=icondata_ai::AiCloseOutlined/>
|
|
||||||
</div>
|
|
||||||
</Then>
|
|
||||||
</If>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CSSTransition>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -10,7 +10,7 @@ use thaw_utils::mount_style;
|
||||||
pub fn Toaster(
|
pub fn Toaster(
|
||||||
receiver: ToasterReceiver,
|
receiver: ToasterReceiver,
|
||||||
#[prop(optional)] position: ToastPosition,
|
#[prop(optional)] position: ToastPosition,
|
||||||
#[prop(default = Duration::from_secs(3000))] timeout: Duration,
|
#[prop(default = Duration::from_secs(3))] timeout: Duration,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
mount_style("toaster", include_str!("./toaster.css"));
|
mount_style("toaster", include_str!("./toaster.css"));
|
||||||
let config_provider = ConfigInjection::expect_context();
|
let config_provider = ConfigInjection::expect_context();
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue