adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: change the type of dir in ConfigProvider

Browse source
This commit is contained in:
luoxiao 2024-08-25 00:33:57 +08:00
parent 5879a2df86
commit f408899eda
16 changed files with 51 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
demo/src/app.rs
View file

@ -16,9 +16,10 @@ pub fn App() -> impl IntoView {
provide_meta_context();
// let (read_theme, _, _) = use_local_storage::<String, FromToStringCodec>("theme");
// let theme = RwSignal::new(Theme::from(read_theme.get_untracked()));
let dir = RwSignal::new(ConfigDirection::Ltr);
view! {
<ConfigProvider>
<ConfigProvider dir=dir>
<ToasterProvider>
<LoadingBarProvider>
<TheRouter />

27
demo/src/components/site_header.rs
View file

@ -9,6 +9,7 @@ use thaw::*;
pub fn SiteHeader() -> impl IntoView {
let navigate = use_navigate();
let navigate_signal = RwSignal::new(use_navigate());
let dir = ConfigInjection::expect_context().dir;
let theme = Theme::use_rw_theme();
let theme_name = Memo::new(move |_| {
theme.with(|theme| {
@ -221,6 +222,32 @@ pub fn SiteHeader() -> impl IntoView {
>
{move || theme_name.get()}
</Button>
<Button
on_click=move |_| {
let Some(dir) = dir else {
return;
};
dir.update(move |dir| {
*dir = match dir {
ConfigDirection::Auto => ConfigDirection::Ltr,
ConfigDirection::Ltr => ConfigDirection::Rtl,
ConfigDirection::Rtl => ConfigDirection::Ltr,
};
});
}
>
{move || {
let Some(dir) = dir else {
return None;
};
match dir.get() {
ConfigDirection::Auto => Some("Auto"),
ConfigDirection::Ltr => Some("LTR"),
ConfigDirection::Rtl => Some("RTL"),
}
}}
</Button>
<Button
icon=icondata::BiDiscordAlt
on_click=move |_| {

2
thaw/src/back_top/mod.rs
View file

@ -91,7 +91,7 @@ pub fn BackTop(
>
<div
class=class_list!["thaw-config-provider thaw-back-top", class]
data-thaw-id=config_provider.id().clone()
data-thaw-id=config_provider.id()
node_ref=back_top_ref
style=move || {
display

2
thaw/src/button/button.css
View file

@ -124,7 +124,7 @@
}
.thaw-button:not(.thaw-button--only-icon) .thaw-button__icon {
margin-right: var(--spacingHorizontalSNudge);
margin-inline-end: var(--spacingHorizontalSNudge);
}
.thaw-button__icon {

2
thaw/src/color_picker/mod.rs
View file

@ -155,7 +155,7 @@ pub fn ColorPicker(
class="thaw-config-provider thaw-color-picker-popover"
node_ref=popover_ref
style=move || display.get().unwrap_or_default()
data-thaw-id=config_provider.id().clone()
data-thaw-id=config_provider.id()
>
<ColorPanel hue=hue.read_only() sv />

2
thaw/src/combobox/listbox.rs
View file

@ -43,7 +43,7 @@ pub fn Listbox(
<div
class=format!("thaw-config-provider thaw-listbox {class}")
style=move || display.get().unwrap_or_default()
data-thaw-id=config_provider.id().clone()
data-thaw-id=config_provider.id()
node_ref=listbox_ref
role="listbox"
on:mousedown=|e| e.prevent_default()

21
thaw/src/config_provider/mod.rs
View file

@ -10,7 +10,7 @@ pub fn ConfigProvider(
theme: Option<RwSignal<Theme>>,
/// Sets the direction of text & generated styles.
#[prop(optional, into)]
dir: RwSignal<Option<ConfigDirection>>,
dir: Option<RwSignal<ConfigDirection>>,
children: Children,
) -> impl IntoView {
mount_style("config-provider", include_str!("./config-provider.css"));
@ -39,18 +39,14 @@ pub fn ConfigProvider(
}
});
let config_injection = ConfigInjection {
theme,
dir,
id: id.get_value(),
};
let config_injection = ConfigInjection { theme, dir, id };
view! {
<Provider value=config_injection>
<div
class=class_list!["thaw-config-provider", class]
data-thaw-id=id.get_value()
dir=move || dir.get().map(move |dir| dir.as_str())
dir=move || dir.map(move |dir| dir.get().as_str())
>
{children()}
</div>
@ -61,13 +57,13 @@ pub fn ConfigProvider(
#[derive(Clone)]
pub struct ConfigInjection {
pub theme: RwSignal<Theme>,
pub dir: RwSignal<Option<ConfigDirection>>,
id: String,
pub dir: Option<RwSignal<ConfigDirection>>,
id: StoredValue<String>,
}
impl ConfigInjection {
pub fn id(&self) -> &String {
&self.id
pub fn id(&self) -> String {
self.id.get_value()
}
pub fn expect_context() -> Self {
@ -75,10 +71,11 @@ impl ConfigInjection {
}
}
#[derive(Clone)]
#[derive(Debug, Clone, Copy, Default)]
pub enum ConfigDirection {
Ltr,
Rtl,
#[default]
Auto,
}

2
thaw/src/date_picker/panel/mod.rs
View file

@ -73,7 +73,7 @@ pub fn Panel(
>
<div
class="thaw-config-provider thaw-date-picker-panel"
data-thaw-id=config_provider.id().clone()
data-thaw-id=config_provider.id()
style=move || display.get().unwrap_or_default()
node_ref=panel_ref
on:mousedown=|e| e.prevent_default()

2
thaw/src/dialog/dialog.rs
View file

@ -35,7 +35,7 @@ pub fn Dialog(
<FocusTrap disabled=!close_on_esc active=open.signal() on_esc>
<div
class=class_list!["thaw-config-provider thaw-dialog", class]
data-thaw-id=config_provider.id().clone()
data-thaw-id=config_provider.id()
>
<CSSTransition
node_ref=mask_ref

2
thaw/src/drawer/overlay_drawer.rs
View file

@ -58,7 +58,7 @@ pub fn OverlayDrawer(
<FocusTrap disabled=!close_on_esc active=open.signal() on_esc>
<div
class=class_list!["thaw-config-provider thaw-overlay-drawer-container", class]
data-thaw-id=config_provider.id().clone()
data-thaw-id=config_provider.id()
>
<CSSTransition
node_ref=mask_ref

2
thaw/src/loading_bar/mod.rs
View file

@ -100,7 +100,7 @@ fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl I
view! {
<div
class="thaw-config-provider thaw-loading-bar-container"
data-thaw-id=config_provider.id().clone()
data-thaw-id=config_provider.id()
style="display: none"
node_ref=container_ref
>

2
thaw/src/menu/mod.rs
View file

@ -128,7 +128,7 @@ pub fn Menu(
move || appearance.get().map(|a| format!("thaw-menu--{}", a.as_str())),
class
]
data-thaw-id=config_provider.id().clone()
data-thaw-id=config_provider.id()
style=move || display.get().unwrap_or_default()
node_ref=menu_ref
on:mouseenter=on_mouse_enter

2
thaw/src/popover/mod.rs
View file

@ -138,7 +138,7 @@ pub fn Popover(
move || appearance.get().map(|a| format!("thaw-popover-surface--{}", a.as_str())),
class
]
data-thaw-id=config_provider.id().clone()
data-thaw-id=config_provider.id()
style=move || display.get().unwrap_or_default()
node_ref=popover_ref

2
thaw/src/time_picker/mod.rs
View file

@ -255,7 +255,7 @@ fn Panel(
>
<div
class="thaw-config-provider thaw-time-picker-panel"
data-thaw-id=config_provider.id().clone()
data-thaw-id=config_provider.id()
style=move || display.get().unwrap_or_default()
node_ref=panel_ref
on:mousedown=|e| e.prevent_default()

2
thaw/src/toast/toaster.rs
View file

@ -68,7 +68,7 @@ pub fn Toaster(
<Teleport>
<div
class="thaw-config-provider thaw-toaster-wrapper"
data-thaw-id=config_provider.id().clone()
data-thaw-id=config_provider.id()
>
<div class="thaw-toaster thaw-toaster--top">
<For each=move || top_id_list.get() key=|id| id.clone() let:id>

2
thaw/src/tooltip/tooltip.rs
View file

@ -80,7 +80,7 @@ pub fn Tooltip(
"thaw-config-provider thaw-tooltip-content",
move || format!("thaw-tooltip-content--{}", appearance.get().as_str())
]
data-thaw-id=config_provider.id().clone()
data-thaw-id=config_provider.id()
style=move || display.get().unwrap_or_default()
role="tooltip"
node_ref=content_ref