+
+ 
+
+
radix-leptos-context
+ +This is an internal utility, not intended for public usage. + +[Rust Radix](https://github.com/RustForWeb/radix) is a Rust port of [Radix](https://www.radix-ui.com/primitives). + +## Documentation + +See [the Rust Radix book](https://radix.rustforweb.org/) for documentation. + +## Rust For Web + +The Rust Radix project is part of the [Rust For Web](https://github.com/RustForWeb). + +[Rust For Web](https://github.com/RustForWeb) creates and ports web UI libraries for Rust. All projects are free and open source. diff --git a/packages/primitives/leptos/context/src/create_context.rs b/packages/primitives/leptos/context/src/create_context.rs new file mode 100644 index 00000000..92d05f46 --- /dev/null +++ b/packages/primitives/leptos/context/src/create_context.rs @@ -0,0 +1,84 @@ +/// Macro to create a context provider and a hook to consume the context. +/// +/// # Example +/// ```rust +/// use leptos::prelude::*; +/// use radix_leptos_context::create_context; +/// +/// #[derive(Clone)] +/// struct CountContext(i32); +/// +/// create_context!( +/// context_type: CountContext, +/// provider: CountProvider, +/// hook: use_count, +/// root: "Count" +/// ); +/// +/// #[component] +/// fn Counter() -> impl IntoView { +/// let count = use_count("Counter"); +/// view! {"Count: "{count.0}
}
+/// }
+///
+/// #[component]
+/// fn App() -> impl IntoView {
+/// view! {
+/// {count.0}
}
+/// }
+/// ```
+#[macro_export]
+macro_rules! create_context {
+ (
+ context_type: $context_ty:ty,
+ provider: $provider:ident,
+ hook: $hook:ident,
+ root: $root_component_name:expr
+ ) => {
+ use leptos::prelude::*;
+
+ #[component]
+ #[allow(non_snake_case)]
+ pub fn $provider(
+ value: $context_ty,
+ children: TypedChildren
+
+
+
+
radix-leptos-primitive
+ +This is an internal utility, not intended for public usage. + +[Rust Radix](https://github.com/RustForWeb/radix) is a Rust port of [Radix](https://www.radix-ui.com/primitives). + +## Overview + +```rust +use leptos::*; +use leptos_node_ref::AnyNodeRef; +use leptos_typed_fallback_show::TypedFallbackShow; + +/// A generic Primitive component. Renders `element()` by default, or its +/// children directly if `as_child` is `true`. We rely on `TypedChildrenFn` +/// so that attributes can pass through at runtime—critical in Leptos v0.7 +/// because `Children`-based types block such passthrough. +#[component] +#[allow(non_snake_case)] +pub fn Primitive` as a child (no extra wrapper).
+ #[prop(into, optional)]
+ as_child: MaybeProp,
+ /// A reference to the `
` node, if needed.
+ #[prop(optional)]
+ node_ref: AnyNodeRef,
+ /// Child elements, usually `ProgressIndicator`.
+ children: TypedChildrenFn,
) -> impl IntoView {
- let get_value_label = get_value_label.unwrap_or(Box::new(default_get_value_label));
- let max = Signal::derive(move || {
- max.get()
- .and_then(|max| match max == 0.0 {
- true => None,
- false => Some(max),
- })
- .unwrap_or(DEFAULT_MAX)
+ // Provide a default callback if none is given.
+ let get_value_label = get_value_label.unwrap_or_else(|| {
+ Callback::new(|(value, max): (f64, f64)| {
+ let pct = ((value / max) * f64::from(100.0)).round();
+ format!("{}%", pct)
+ })
+ });
+
+ // Derive signals for max and clamped value.
+ let max_signal = Signal::derive({
+ let max = max.clone();
+ move || max.get().filter(|m| *m > 0.0).unwrap_or(DEFAULT_MAX)
+ });
+
+ let value_signal = Signal::derive({
+ let value = value.clone();
+ move || value.get().map(|v| v.clamp(0.0, max_signal.get()))
+ });
+
+ // Derive signals for data/aria attributes.
+ let progress_state = Signal::derive({
+ let val = value_signal.clone();
+ let mx = max_signal.clone();
+ move || get_progress_state(val.get(), mx.get())
+ });
+
+ let value_label = Signal::derive({
+ let val = value_signal.clone();
+ let mx = max_signal.clone();
+ let label_cb = get_value_label; // Callback is Copy
+ move || val.get().map(|v| label_cb.run((v, mx.get())))
});
- let value = Signal::derive(move || value.get().map(|value| value.min(max.get()).max(0.0)));
-
- let value_label =
- Signal::derive(move || value.get().map(|value| get_value_label(value, max.get())));
-
- let context_value = ProgressContextValue { value, max };
-
- let mut attrs = attrs.clone();
- attrs.extend([
- ("aria-valuemax", max.into_attribute()),
- ("aria-valuemin", "0".into_attribute()),
- ("aria-valuenow", value.into_attribute()),
- ("aria-valuetext", value_label.into_attribute()),
- ("role", "progressbar".into_attribute()),
- (
- "data-state",
- (move || get_progress_state(value.get(), max.get())).into_attribute(),
- ),
- ("data-value", value.into_attribute()),
- ("data-max", max.into_attribute()),
- ]);
+
+ // Add a reactive effect for warning checks
+ #[debug_assertions]
+ Effect::new(move |_| {
+ let current_max = max_signal.get();
+ if current_max <= 0.0 {
+ logging::warn!(
+ "Invalid prop `max` of value `{}` supplied to `Progress`. Defaulting to `{}`.",
+ current_max,
+ DEFAULT_MAX
+ );
+ }
+
+ if let Some(v) = value_signal.get() {
+ if v < 0.0 || v > current_max {
+ logging::warn!(
+ "Invalid prop `value` of `{}` supplied to `Progress` (must be between 0 and {}). \
+ Defaulting to `None` (indeterminate).",
+ v,
+ current_max
+ );
+ }
+ }
+ });
+
+ // Provide context to children.
+ let ctx_value = ProgressContextValue {
+ value: value_signal,
+ max: max_signal,
+ };
view! {
-
-
+
- {children()}
-
-
+ children=children
+
+ // ARIA
+ attr:role="progressbar"
+ attr:aria-valuemax=move || max_signal.get().to_string()
+ attr:aria-valuemin="0"
+ attr:aria-valuenow=move || value_signal.get().map(|v| v.to_string())
+ attr:aria-valuetext=move || value_label.get()
+
+ // Data attributes
+ attr:data-state=move || progress_state.get().to_string()
+ attr:data-value=move || value_signal.get().map(|v| v.to_string())
+ attr:data-max=move || max_signal.get().to_string()
+ />
+
}
}
+/* -------------------------------------------------------------------------------------------------
+ * ProgressIndicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const INDICATOR_NAME: &'static str = "ProgressIndicator";
+
#[component]
+#[allow(non_snake_case)]
pub fn ProgressIndicator(
- #[prop(into, optional)] as_child: MaybeProp,
- #[prop(optional)] node_ref: NodeRef,
- #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
- #[prop(optional)] children: Option,
+ /// If `true`, renders as a child without an extra `
`.
+ #[prop(into, optional)]
+ as_child: MaybeProp,
+ /// Reference to the `
`.
+ #[prop(into, optional)]
+ node_ref: AnyNodeRef,
+ /// Child elements, e.g. a styled bar or animated element.
+ #[prop(optional)]
+ children: Option,
) -> impl IntoView {
+ let context = use_progress_context(INDICATOR_NAME);
let children = StoredValue::new(children);
- let context = expect_context::();
-
- let mut attrs = attrs.clone();
- attrs.extend([
- (
- "data-state",
- (move || get_progress_state(context.value.get(), context.max.get())).into_attribute(),
- ),
- ("data-value", context.value.into_attribute()),
- ("data-max", context.max.into_attribute()),
- ]);
- let attrs = StoredValue::new(attrs);
+ let progress_state = Signal::derive({
+ let val = context.value;
+ let mx = context.max;
+ move || get_progress_state(val.get(), mx.get())
+ });
view! {
- {children.with_value(|children| children.as_ref().map(|children| children()))}
+ {children.with_value(|c| c.as_ref().map(|inner| inner()))}
}
}
-fn default_get_value_label(value: f64, max: f64) -> String {
- format!("{}%", (value / max).round() * 100.0)
-}
+/* -------------------------------------------------------------------------------------------------
+ * Helpers
+ * -----------------------------------------------------------------------------------------------*/
fn get_progress_state(value: Option, max_value: f64) -> ProgressState {
match value {
- Some(value) => match value == max_value {
- true => ProgressState::Complete,
- false => ProgressState::Loading,
- },
+ Some(v) if v == max_value => ProgressState::Complete,
+ Some(_) => ProgressState::Loading,
None => ProgressState::Indeterminate,
}
}
+
+/* -------------------------------------------------------------------------------------------------
+ * Re-exports
+ * -----------------------------------------------------------------------------------------------*/
+
+pub mod primitive {
+ pub use super::*;
+ pub use Progress as Root;
+ pub use ProgressIndicator as Indicator;
+}
diff --git a/stories/leptos/Cargo.toml b/stories/leptos/Cargo.toml
index b56a152e..edeb1c1c 100644
--- a/stories/leptos/Cargo.toml
+++ b/stories/leptos/Cargo.toml
@@ -29,7 +29,7 @@ radix-leptos-label = { path = "../../packages/primitives/leptos/label" }
# "csr",
# ] }
# radix-leptos-presence = { path = "../../packages/primitives/leptos/presence" }
-# radix-leptos-progress = { path = "../../packages/primitives/leptos/progress" }
+radix-leptos-progress = { path = "../../packages/primitives/leptos/progress" }
# radix-leptos-separator = { path = "../../packages/primitives/leptos/separator" }
# radix-leptos-switch = { path = "../../packages/primitives/leptos/switch" }
# radix-leptos-toggle = { path = "../../packages/primitives/leptos/toggle" }
diff --git a/stories/leptos/src/app.rs b/stories/leptos/src/app.rs
index 6f066343..d1f5e22b 100644
--- a/stories/leptos/src/app.rs
+++ b/stories/leptos/src/app.rs
@@ -4,7 +4,7 @@ use leptos_router::{
path,
};
-use crate::primitives::{accessible_icon, arrow, aspect_ratio, label, visually_hidden};
+use crate::primitives::{accessible_icon, arrow, aspect_ratio, label, progress, visually_hidden};
#[component]
fn NavLink(href: H, children: Children) -> impl IntoView
@@ -152,14 +152,14 @@ pub fn App() -> impl IntoView {
// With Deferred Mount Animation
- // Progress
+
+ Progress
- //
+
// Separator
@@ -264,8 +264,8 @@ pub fn App() -> impl IntoView {
//
+ /
+
+ /
+
+ /
+
+ /
+
+ /
+
+ /
+
+ /
+
}
}
@@ -81,13 +86,13 @@ pub fn ProgressRange(
view! {
() {
- set_value.call(val);
+ set_value.run(val);
}
}
/>
@@ -132,7 +137,7 @@ fn use_progress_value_state(
initial_state: Option,
max: ReadSignal,
) -> UsePreviousValueReturn {
- let (value, set_value) = create_signal(initial_state);
+ let (value, set_value) = signal(initial_state);
let percentage = Signal::derive(move || {
value
.get()
@@ -158,7 +163,7 @@ fn use_indeterminate_toggle(
}
fn use_previous_value(value: ReadSignal>) -> ReadSignal {
- let (previous, set_previous) = create_signal(value.get_untracked().unwrap_or(0.0));
+ let (previous, set_previous) = signal(value.get_untracked().unwrap_or(0.0));
Effect::new(move |_| {
if let Some(value) = value.get() {
-
- //
Styled
- // Chromatic
- //
-
+
Styled
+ Chromatic
+
-
+
+
- -
}
}
@@ -33,40 +38,40 @@ pub fn Chromatic() -> impl IntoView {
view! {
- -