mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -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("layout") view=LayoutMdPage/>
|
||||
<Route path=StaticSegment("loading-bar") view=LoadingBarMdPage/>
|
||||
// <Route path="/message" view=MessageMdPage/>
|
||||
<Route path=StaticSegment("message-bar") view=MessageBarMdPage/>
|
||||
<Route path=StaticSegment("popover") view=PopoverMdPage/>
|
||||
<Route path=StaticSegment("progress-bar") view=ProgressBarMdPage/>
|
||||
|
|
@ -94,7 +93,6 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
|
|||
{
|
||||
view! {
|
||||
<Route path=StaticSegment("scrollbar") view=ScrollbarMdPage/>
|
||||
// <Route path="/select" view=SelectMdPage/>
|
||||
<Route path=StaticSegment("skeleton") view=SkeletonMdPage/>
|
||||
<Route path=StaticSegment("slider") view=SliderMdPage/>
|
||||
<Route path=StaticSegment("space") view=SpaceMdPage/>
|
||||
|
|
|
|||
|
|
@ -229,10 +229,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
|
|||
value: "/components/loading-bar".into(),
|
||||
label: "Loading Bar".into(),
|
||||
},
|
||||
// MenuItemOption {
|
||||
// value: "/components/message".into(),
|
||||
// label: "Message".into(),
|
||||
// },
|
||||
MenuItemOption {
|
||||
value: "/components/message-bar".into(),
|
||||
label: "Message Bar".into(),
|
||||
|
|
@ -253,10 +249,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
|
|||
value: "/components/scrollbar".into(),
|
||||
label: "Scrollbar".into(),
|
||||
},
|
||||
// MenuItemOption {
|
||||
// value: "/components/select".into(),
|
||||
// label: "Select".into(),
|
||||
// },
|
||||
MenuItemOption {
|
||||
value: "/components/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",
|
||||
"LayoutMdPage" => "../docs/layout/mod.md",
|
||||
"LoadingBarMdPage" => "../docs/loading_bar/mod.md",
|
||||
// "MessageMdPage" => "../docs/message/mod.md",
|
||||
"MessageBarMdPage" => "../docs/message_bar/mod.md",
|
||||
"PopoverMdPage" => "../docs/popover/mod.md",
|
||||
"ProgressBarMdPage" => "../docs/progress_bar/mod.md",
|
||||
"RadioMdPage" => "../docs/radio/mod.md",
|
||||
"ScrollbarMdPage" => "../docs/scrollbar/mod.md",
|
||||
// "SelectMdPage" => "../docs/select/mod.md",
|
||||
"SkeletonMdPage" => "../docs/skeleton/mod.md",
|
||||
"SliderMdPage" => "../docs/slider/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(
|
||||
receiver: ToasterReceiver,
|
||||
#[prop(optional)] position: ToastPosition,
|
||||
#[prop(default = Duration::from_secs(3000))] timeout: Duration,
|
||||
#[prop(default = Duration::from_secs(3))] timeout: Duration,
|
||||
) -> impl IntoView {
|
||||
mount_style("toaster", include_str!("./toaster.css"));
|
||||
let config_provider = ConfigInjection::expect_context();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue