dioxus/packages/hooks/src/usestate.rs

480 lines
13 KiB
Rust
Raw Normal View History

2022-01-26 02:41:40 +00:00
#![warn(clippy::pedantic)]
2022-01-16 20:56:48 +00:00
use dioxus_core::prelude::*;
use std::{
2022-01-26 02:41:40 +00:00
cell::{RefCell, RefMut},
2022-01-16 20:56:48 +00:00
fmt::{Debug, Display},
2022-03-05 22:07:34 +00:00
ops::{Add, Div, Mul, Not, Sub},
2022-02-23 19:00:01 +00:00
rc::Rc,
sync::Arc,
2022-01-16 20:56:48 +00:00
};
2022-01-26 02:41:40 +00:00
/// Store state between component renders.
2022-01-16 20:56:48 +00:00
///
/// ## Dioxus equivalent of useState, designed for Rust
///
/// The Dioxus version of `useState` for state management inside components. It allows you to ergonomically store and
/// modify state between component renders. When the state is updated, the component will re-render.
///
///
/// ```ignore
/// const Example: Component = |cx| {
/// let count = use_state(cx, || 0);
2022-01-16 20:56:48 +00:00
///
/// cx.render(rsx! {
/// div {
2022-01-26 02:41:40 +00:00
/// h1 { "Count: {count}" }
2022-03-01 07:50:03 +00:00
/// button { onclick: move |_| *count.modify() += 1, "Increment" }
/// button { onclick: move |_| *count.modify() -= 1, "Decrement" }
2022-01-16 20:56:48 +00:00
/// }
/// ))
/// }
/// ```
pub fn use_state<T: 'static>(
cx: &ScopeState,
2022-01-16 20:56:48 +00:00
initial_state_fn: impl FnOnce() -> T,
) -> &UseState<T> {
let hook = cx.use_hook(move || {
2022-01-26 02:41:40 +00:00
let current_val = Rc::new(initial_state_fn());
let update_callback = cx.schedule_update();
let slot = Rc::new(RefCell::new(current_val.clone()));
let setter = Rc::new({
2022-12-01 04:54:30 +00:00
to_owned![update_callback, slot];
2022-01-26 02:41:40 +00:00
move |new| {
2022-01-31 19:33:25 +00:00
{
let mut slot = slot.borrow_mut();
2022-01-16 20:56:48 +00:00
2022-01-31 19:33:25 +00:00
// if there's only one reference (weak or otherwise), we can just swap the values
// Typically happens when the state is set multiple times - we don't want to create a new Rc for each new value
if let Some(val) = Rc::get_mut(&mut slot) {
*val = new;
} else {
*slot = Rc::new(new);
}
2022-01-26 02:41:40 +00:00
}
update_callback();
}
});
UseState {
current_val,
update_callback,
setter,
slot,
2022-01-16 20:56:48 +00:00
}
2022-01-26 02:41:40 +00:00
});
2022-01-16 20:56:48 +00:00
2022-01-28 21:12:06 +00:00
hook.current_val = hook.slot.borrow().clone();
2022-03-01 07:50:03 +00:00
hook
2022-01-16 20:56:48 +00:00
}
pub struct UseState<T: 'static> {
pub(crate) current_val: Rc<T>,
pub(crate) update_callback: Arc<dyn Fn()>,
2022-01-26 02:41:40 +00:00
pub(crate) setter: Rc<dyn Fn(T)>,
pub(crate) slot: Rc<RefCell<Rc<T>>>,
2022-01-16 20:56:48 +00:00
}
impl<T: 'static> UseState<T> {
2022-03-01 07:50:03 +00:00
/// Set the state to a new value.
pub fn set(&self, new: T) {
(self.setter)(new);
}
2022-01-26 02:41:40 +00:00
/// Get the current value of the state by cloning its container Rc.
///
/// This is useful when you are dealing with state in async contexts but need
/// to know the current value. You are not given a reference to the state.
///
/// # Examples
/// An async context might need to know the current value:
///
/// ```rust, ignore
/// fn component(cx: Scope) -> Element {
/// let count = use_state(cx, || 0);
2022-01-26 02:41:40 +00:00
/// cx.spawn({
2022-03-28 02:42:09 +00:00
/// let set_count = count.to_owned();
2022-01-26 02:41:40 +00:00
/// async move {
/// let current = set_count.current();
/// }
/// })
/// }
2022-01-31 19:33:25 +00:00
/// ```
2022-01-26 02:41:40 +00:00
#[must_use]
pub fn current(&self) -> Rc<T> {
self.slot.borrow().clone()
2022-01-16 20:56:48 +00:00
}
2022-01-26 02:41:40 +00:00
/// Get the `setter` function directly without the `UseState` wrapper.
///
/// This is useful for passing the setter function to other components.
///
/// However, for most cases, calling `to_owned` on the state is the
/// preferred way to get "another" state handle.
2022-01-26 02:41:40 +00:00
///
///
/// # Examples
/// A component might require an `Rc<dyn Fn(T)>` as an input to set a value.
///
/// ```rust, ignore
/// fn component(cx: Scope) -> Element {
/// let value = use_state(cx, || 0);
2022-01-26 02:41:40 +00:00
///
/// rsx!{
/// Component {
2022-03-28 02:42:09 +00:00
/// handler: value.setter()
2022-01-26 02:41:40 +00:00
/// }
/// }
/// }
/// ```
#[must_use]
pub fn setter(&self) -> Rc<dyn Fn(T)> {
self.setter.clone()
2022-01-16 20:56:48 +00:00
}
2022-01-26 02:41:40 +00:00
/// Set the state to a new value, using the current state value as a reference.
///
/// This is similar to passing a closure to React's `set_value` function.
///
/// # Examples
///
/// Basic usage:
/// ```rust, ignore
2022-01-26 02:41:40 +00:00
/// # use dioxus_core::prelude::*;
/// # use dioxus_hooks::*;
/// fn component(cx: Scope) -> Element {
/// let value = use_state(cx, || 0);
2022-01-31 19:33:25 +00:00
///
2022-01-26 02:41:40 +00:00
/// // to increment the value
2022-03-28 02:42:09 +00:00
/// value.modify(|v| v + 1);
2022-01-31 19:33:25 +00:00
///
2022-01-26 02:41:40 +00:00
/// // usage in async
/// cx.spawn({
2022-03-28 02:42:09 +00:00
/// let value = value.to_owned();
2022-01-26 02:41:40 +00:00
/// async move {
2022-03-28 02:42:09 +00:00
/// value.modify(|v| v + 1);
2022-01-26 02:41:40 +00:00
/// }
/// });
///
/// # todo!()
/// }
/// ```
pub fn modify(&self, f: impl FnOnce(&T) -> T) {
2022-01-31 19:33:25 +00:00
let new_val = {
let current = self.slot.borrow();
f(current.as_ref())
};
2022-01-26 02:41:40 +00:00
(self.setter)(new_val);
2022-01-16 20:56:48 +00:00
}
2022-01-26 02:41:40 +00:00
/// Get the value of the state when this handle was created.
///
/// This method is useful when you want an `Rc` around the data to cheaply
/// pass it around your app.
///
/// ## Warning
///
/// This will return a stale value if used within async contexts.
///
/// Try `current` to get the real current value of the state.
///
/// ## Example
///
/// ```rust, ignore
/// # use dioxus_core::prelude::*;
/// # use dioxus_hooks::*;
/// fn component(cx: Scope) -> Element {
/// let value = use_state(cx, || 0);
2022-01-31 19:33:25 +00:00
///
2022-03-28 02:42:09 +00:00
/// let as_rc = value.get();
2022-01-26 02:41:40 +00:00
/// assert_eq!(as_rc.as_ref(), &0);
///
/// # todo!()
/// }
/// ```
#[must_use]
2022-03-01 07:50:03 +00:00
pub fn get(&self) -> &T {
&self.current_val
}
#[must_use]
pub fn get_rc(&self) -> &Rc<T> {
2022-01-16 20:56:48 +00:00
&self.current_val
}
2022-01-26 02:41:40 +00:00
/// Mark the component that create this [`UseState`] as dirty, forcing it to re-render.
///
/// ```rust, ignore
/// fn component(cx: Scope) -> Element {
/// let count = use_state(cx, || 0);
2022-01-26 02:41:40 +00:00
/// cx.spawn({
2022-03-28 02:42:09 +00:00
/// let count = count.to_owned();
2022-01-26 02:41:40 +00:00
/// async move {
/// // for the component to re-render
2022-03-28 02:42:09 +00:00
/// count.needs_update();
2022-01-26 02:41:40 +00:00
/// }
/// })
/// }
2022-01-31 19:33:25 +00:00
/// ```
2022-01-26 02:41:40 +00:00
pub fn needs_update(&self) {
(self.update_callback)();
2022-01-16 20:56:48 +00:00
}
2022-01-26 02:41:40 +00:00
}
2022-01-16 20:56:48 +00:00
2022-01-26 02:41:40 +00:00
impl<T: Clone> UseState<T> {
/// Get a mutable handle to the value by calling `ToOwned::to_owned` on the
/// current value.
///
/// This is essentially cloning the underlying value and then setting it,
/// giving you a mutable handle in the process. This method is intended for
/// types that are cheaply cloneable.
///
/// If you are comfortable dealing with `RefMut`, then you can use `make_mut` to get
/// the underlying slot. However, be careful with `RefMut` since you might panic
/// if the `RefCell` is left open.
///
/// # Examples
///
/// ```rust, ignore
/// let val = use_state(cx, || 0);
2022-01-26 02:41:40 +00:00
///
2022-03-28 02:42:09 +00:00
/// val.with_mut(|v| *v = 1);
2022-01-26 02:41:40 +00:00
/// ```
pub fn with_mut(&self, apply: impl FnOnce(&mut T)) {
let mut slot = self.slot.borrow_mut();
let mut inner = slot.as_ref().to_owned();
2022-01-16 20:56:48 +00:00
2022-01-26 02:41:40 +00:00
apply(&mut inner);
2022-01-16 20:56:48 +00:00
2022-01-26 02:41:40 +00:00
if let Some(new) = Rc::get_mut(&mut slot) {
*new = inner;
} else {
*slot = Rc::new(inner);
2022-01-16 20:56:48 +00:00
}
2022-01-26 02:41:40 +00:00
self.needs_update();
2022-01-16 20:56:48 +00:00
}
2022-01-26 02:41:40 +00:00
/// Get a mutable handle to the value by calling `ToOwned::to_owned` on the
/// current value.
///
/// This is essentially cloning the underlying value and then setting it,
/// giving you a mutable handle in the process. This method is intended for
/// types that are cheaply cloneable.
2022-01-16 20:56:48 +00:00
///
2022-01-26 02:41:40 +00:00
/// # Warning
/// Be careful with `RefMut` since you might panic if the `RefCell` is left open!
2022-01-16 20:56:48 +00:00
///
2022-01-26 02:41:40 +00:00
/// # Examples
2022-01-16 20:56:48 +00:00
///
/// ```rust, ignore
/// let val = use_state(cx, || 0);
2022-01-16 20:56:48 +00:00
///
2022-03-28 02:42:09 +00:00
/// *val.make_mut() += 1;
2022-01-26 02:41:40 +00:00
/// ```
#[must_use]
pub fn make_mut(&self) -> RefMut<T> {
let mut slot = self.slot.borrow_mut();
2022-01-16 20:56:48 +00:00
self.needs_update();
2022-01-26 02:41:40 +00:00
if Rc::strong_count(&*slot) > 0 {
*slot = Rc::new(slot.as_ref().to_owned());
}
2022-01-16 20:56:48 +00:00
2022-01-26 02:41:40 +00:00
RefMut::map(slot, |rc| Rc::get_mut(rc).expect("the hard count to be 0"))
2022-01-16 20:56:48 +00:00
}
2022-03-04 19:31:04 +00:00
/// Convert this handle to a tuple of the value and the handle itself.
#[must_use]
pub fn split(&self) -> (&T, &Self) {
(&self.current_val, self)
}
2022-01-16 20:56:48 +00:00
}
2022-02-01 07:05:54 +00:00
impl<T: 'static> Clone for UseState<T> {
fn clone(&self) -> Self {
2022-01-26 02:41:40 +00:00
UseState {
current_val: self.current_val.clone(),
update_callback: self.update_callback.clone(),
setter: self.setter.clone(),
slot: self.slot.clone(),
}
2022-01-16 20:56:48 +00:00
}
}
impl<T: 'static + Display> std::fmt::Display for UseState<T> {
2022-01-16 20:56:48 +00:00
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{}", self.current_val)
}
}
impl<T: std::fmt::Binary> std::fmt::Binary for UseState<T> {
2022-03-09 18:36:30 +00:00
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{:b}", self.current_val.as_ref())
}
}
2022-03-01 07:50:03 +00:00
impl<T: PartialEq> PartialEq<T> for UseState<T> {
fn eq(&self, other: &T) -> bool {
self.current_val.as_ref() == other
}
}
// todo: this but for more interesting conrete types
impl PartialEq<bool> for &UseState<bool> {
fn eq(&self, other: &bool) -> bool {
self.current_val.as_ref() == other
}
}
impl<T: PartialEq> PartialEq<UseState<T>> for UseState<T> {
2022-01-26 02:41:40 +00:00
fn eq(&self, other: &UseState<T>) -> bool {
2022-03-01 07:50:03 +00:00
Rc::ptr_eq(&self.current_val, &other.current_val)
2022-01-26 02:41:40 +00:00
}
}
impl<T: Debug> Debug for UseState<T> {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{:?}", self.current_val)
}
}
impl<T> std::ops::Deref for UseState<T> {
2022-03-01 07:50:03 +00:00
type Target = T;
2022-01-26 02:41:40 +00:00
fn deref(&self) -> &Self::Target {
2022-03-01 07:50:03 +00:00
self.current_val.as_ref()
}
}
impl<T: Not + Copy> std::ops::Not for &UseState<T> {
type Output = <T as std::ops::Not>::Output;
fn not(self) -> Self::Output {
self.current_val.not()
}
}
impl<T: Not + Copy> std::ops::Not for UseState<T> {
type Output = <T as std::ops::Not>::Output;
fn not(self) -> Self::Output {
self.current_val.not()
}
}
impl<T: std::ops::Add + Copy> std::ops::Add<T> for &UseState<T> {
type Output = <T as std::ops::Add>::Output;
fn add(self, other: T) -> Self::Output {
*self.current_val.as_ref() + other
}
}
impl<T: std::ops::Sub + Copy> std::ops::Sub<T> for &UseState<T> {
type Output = <T as std::ops::Sub>::Output;
fn sub(self, other: T) -> Self::Output {
*self.current_val.as_ref() - other
}
}
impl<T: std::ops::Div + Copy> std::ops::Div<T> for &UseState<T> {
type Output = <T as std::ops::Div>::Output;
fn div(self, other: T) -> Self::Output {
*self.current_val.as_ref() / other
}
}
impl<T: std::ops::Mul + Copy> std::ops::Mul<T> for &UseState<T> {
type Output = <T as std::ops::Mul>::Output;
fn mul(self, other: T) -> Self::Output {
*self.current_val.as_ref() * other
2022-01-16 20:56:48 +00:00
}
}
2022-03-05 22:07:34 +00:00
impl<T: Add<Output = T> + Copy> std::ops::AddAssign<T> for &UseState<T> {
fn add_assign(&mut self, rhs: T) {
self.set((*self.current()) + rhs);
}
}
impl<T: Sub<Output = T> + Copy> std::ops::SubAssign<T> for &UseState<T> {
fn sub_assign(&mut self, rhs: T) {
self.set((*self.current()) - rhs);
}
}
impl<T: Mul<Output = T> + Copy> std::ops::MulAssign<T> for &UseState<T> {
fn mul_assign(&mut self, rhs: T) {
self.set((*self.current()) * rhs);
}
}
impl<T: Div<Output = T> + Copy> std::ops::DivAssign<T> for &UseState<T> {
fn div_assign(&mut self, rhs: T) {
self.set((*self.current()) / rhs);
}
}
2022-03-07 01:37:57 +00:00
impl<T: Add<Output = T> + Copy> std::ops::AddAssign<T> for UseState<T> {
fn add_assign(&mut self, rhs: T) {
self.set((*self.current()) + rhs);
}
}
impl<T: Sub<Output = T> + Copy> std::ops::SubAssign<T> for UseState<T> {
fn sub_assign(&mut self, rhs: T) {
self.set((*self.current()) - rhs);
}
}
impl<T: Mul<Output = T> + Copy> std::ops::MulAssign<T> for UseState<T> {
fn mul_assign(&mut self, rhs: T) {
self.set((*self.current()) * rhs);
}
}
impl<T: Div<Output = T> + Copy> std::ops::DivAssign<T> for UseState<T> {
fn div_assign(&mut self, rhs: T) {
self.set((*self.current()) / rhs);
}
}
2022-01-26 02:41:40 +00:00
#[test]
fn api_makes_sense() {
#[allow(unused)]
fn app(cx: Scope) -> Element {
let val = use_state(cx, || 0);
2022-01-26 02:41:40 +00:00
2022-03-01 07:50:03 +00:00
val.set(0);
val.modify(|v| v + 1);
let real_current = val.current();
2022-01-26 02:41:40 +00:00
2022-03-01 07:50:03 +00:00
match val.get() {
2022-01-26 02:41:40 +00:00
10 => {
2022-03-01 07:50:03 +00:00
val.set(20);
val.modify(|v| v + 1);
2022-01-26 02:41:40 +00:00
}
20 => {}
_ => {
println!("{real_current}");
}
}
cx.spawn({
2022-12-03 00:24:49 +00:00
to_owned![val];
2022-01-26 02:41:40 +00:00
async move {
2022-03-01 07:50:03 +00:00
val.modify(|f| f + 1);
2022-01-26 02:41:40 +00:00
}
});
2022-11-09 03:39:37 +00:00
// cx.render(LazyNodes::new(|f| f.static_text("asd")))
todo!()
2022-01-16 20:56:48 +00:00
}
}