Merge remote-tracking branch 'origin/main' into use_webtransport

# Conflicts:
#	src/use_scroll.rs
This commit is contained in:
Maccesch 2023-08-31 04:49:54 +01:00
commit 58e6759a76
46 changed files with 271 additions and 262 deletions

View file

@ -11,7 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- `signal_debounced`
- `signal_throttled`
### Braking Changes 🛠
### Breaking Changes 🛠
- Leptos version is now 0.5
- No `cx: Scope` params are supported/needed anymore because of the changes in Leptos.
@ -35,6 +35,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Callbacks in options don't require to be cloneable anymore
- Callback in `use_raf_fn` doesn't require to be cloneable anymore
- `use_scroll` is now callable on the server
### Fixes 🍕
@ -70,7 +71,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- `is_some`
- `use_raf_fn`
### Braking Changes 🛠
### Breaking Changes 🛠
- The following functions now accept a `MaybeRwSignal` as their initial/default value which means
you can use a synchronized `RwSignal` in those places.
@ -113,7 +114,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [0.4.0] - 2023-07-03
### Braking Changes 🛠
### Breaking Changes 🛠
- Required `leptos` version is now 0.4
- Following the changes in `leptos` there is no longer a `stable` crate feature required in order to use this library
@ -150,7 +151,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [0.3.0] - 2023-06-13
### Braking Changes 🛠
### Breaking Changes 🛠
- `use_event_listener` no longer returns a `Box<dyn Fn()>` but a `impl Fn() + Clone`
@ -180,7 +181,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [0.2.0] - 2023-06-11
### Braking Changes
### Breaking Changes
- `watch` doesn't accept `immediate` as a direct argument anymore. This is only provided by the option variant.
- `watch` has now variant `watch_with_options` which allows for debouncing and throttling.

View file

@ -1,6 +1,6 @@
[package]
name = "leptos-use"
version = "0.7.0-alpha"
version = "0.7.0-beta"
edition = "2021"
authors = ["Marc-Stefan Cassola"]
categories = ["gui", "web-programming"]

View file

@ -26,6 +26,7 @@
[![Docs](https://docs.rs/leptos-use/badge.svg)](https://docs.rs/leptos-use/)
[![MIT/Apache 2.0](https://img.shields.io/badge/license-MIT%2FApache-blue.svg)](https://github.com/synphonyte/leptos-use#license)
[![Build Status](https://github.com/synphonyte/leptos-use/actions/workflows/ci.yml/badge.svg)](https://github.com/synphonyte/leptos-use/actions/workflows/ci.yml)
[![Discord](https://img.shields.io/discord/1031524867910148188?color=%237289DA&label=discord)](https://discord.com/channels/1031524867910148188/1121154537709895783)
```rust
use leptos::*;
@ -89,4 +90,4 @@ To scaffold a new function quickly you can run `template/createfn.sh`. It requir
|---------------|---------------------------|
| <= 0.3 | 0.3 |
| 0.4, 0.5, 0.6 | 0.4 |
| main | 0.5.0-alpha |
| main | 0.5.0-alpha/beta |

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -11,16 +11,16 @@ axum = { version = "0.6.4", optional = true }
console_error_panic_hook = "0.1"
console_log = "1"
cfg-if = "1"
leptos = { version = "0.5.0-alpha2", features = ["nightly"] }
leptos_axum = { version = "0.5.0-alpha2", optional = true }
leptos_meta = { version = "0.5.0-alpha2", features = ["nightly"] }
leptos_router = { version = "0.5.0-alpha2", features = ["nightly"] }
leptos = { version = "0.5.0-beta2", features = ["nightly"] }
leptos_axum = { version = "0.5.0-beta2", optional = true }
leptos_meta = { version = "0.5.0-beta2", features = ["nightly"] }
leptos_router = { version = "0.5.0-beta2", features = ["nightly"] }
leptos-use = { path = "../..", features = ["storage"] }
log = "0.4"
simple_logger = "4"
tokio = { version = "1.25.0", optional = true }
tower = { version = "0.4.13", optional = true }
tower-http = { version = "0.5.0-alpha2", features = ["fs"], optional = true }
tower-http = { version = "0.5.0-beta2", features = ["fs"], optional = true }
wasm-bindgen = "=0.2.87"
thiserror = "1.0.38"
tracing = { version = "0.1.37", optional = true }

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5.0-alpha2", features = ["nightly", "csr"] }
leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

View file

@ -1,7 +1,7 @@
use crate::utils::Pausable;
use default_struct_builder::DefaultBuilder;
use leptos::*;
use std::cell::RefCell;
use std::cell::{Cell, RefCell};
use std::rc::Rc;
use wasm_bindgen::closure::Closure;
use wasm_bindgen::JsCast;
@ -47,8 +47,7 @@ pub fn use_raf_fn_with_options(
) -> Pausable<impl Fn() + Clone, impl Fn() + Clone> {
let UseRafFnOptions { immediate } = options;
let previous_frame_timestamp = store_value(0.0_f64);
let raf_handle = store_value(None::<i32>);
let raf_handle = Rc::new(Cell::new(None::<i32>));
let (is_active, set_active) = create_signal(false);
@ -56,11 +55,12 @@ pub fn use_raf_fn_with_options(
let request_next_frame = {
let loop_ref = Rc::clone(&loop_ref);
let raf_handle = Rc::clone(&raf_handle);
move || {
let loop_ref = Rc::clone(&loop_ref);
raf_handle.set_value(
raf_handle.set(
window()
.request_animation_frame(
Closure::once_into_js(move |timestamp: f64| {
@ -76,13 +76,14 @@ pub fn use_raf_fn_with_options(
let loop_fn = {
let request_next_frame = request_next_frame.clone();
let previous_frame_timestamp = Cell::new(0.0_f64);
move |timestamp: f64| {
if !is_active.get() {
return;
}
let prev_timestamp = previous_frame_timestamp.get_value();
let prev_timestamp = previous_frame_timestamp.get();
let delta = if prev_timestamp > 0.0 {
timestamp - prev_timestamp
} else {
@ -91,7 +92,7 @@ pub fn use_raf_fn_with_options(
callback(UseRafFnCallbackArgs { delta, timestamp });
previous_frame_timestamp.set_value(timestamp);
previous_frame_timestamp.set(timestamp);
request_next_frame();
}
@ -109,18 +110,18 @@ pub fn use_raf_fn_with_options(
let pause = move || {
set_active.set(false);
let handle = raf_handle.get_value();
let handle = raf_handle.get();
if let Some(handle) = handle {
let _ = window().cancel_animation_frame(handle);
}
raf_handle.set_value(None);
raf_handle.set(None);
};
if immediate {
resume();
}
on_cleanup(pause);
on_cleanup(pause.clone());
Pausable {
resume,

View file

@ -1,10 +1,10 @@
use crate::core::ElementMaybeSignal;
use crate::use_event_listener::use_event_listener_with_options;
use crate::{use_debounce_fn_with_arg, use_throttle_fn_with_arg_and_options, ThrottleOptions};
use cfg_if::cfg_if;
use default_struct_builder::DefaultBuilder;
use leptos::ev::{scrollend, EventDescriptor};
use leptos::ev::scrollend;
use leptos::*;
use std::borrow::Cow;
use std::rc::Rc;
use wasm_bindgen::JsCast;
@ -161,7 +161,7 @@ use wasm_bindgen::JsCast;
///
/// ## Server-Side Rendering
///
/// Please refer to ["Functions with Target Elements"](https://leptos-use.rs/server_side_rendering.html#functions-with-target-elements)
/// On the server this returns signals that don't change and setters that are noops.
pub fn use_scroll<El, T>(element: El) -> UseScrollReturn
where
El: Clone,
@ -182,40 +182,6 @@ where
let (internal_x, set_internal_x) = create_signal(0.0);
let (internal_y, set_internal_y) = create_signal(0.0);
let signal = (element).into();
let behavior = options.behavior;
let scroll_to = {
let signal = signal.clone();
move |x: Option<f64>, y: Option<f64>| {
let element = signal.get_untracked();
if let Some(element) = element {
let element = element.into();
let mut scroll_options = web_sys::ScrollToOptions::new();
scroll_options.behavior(behavior.get_untracked().into());
if let Some(x) = x {
scroll_options.left(x);
}
if let Some(y) = y {
scroll_options.top(y);
}
element.scroll_to_with_scroll_to_options(&scroll_options);
}
}
};
let set_x = {
let scroll_to = scroll_to.clone();
Box::new(move |x| scroll_to(Some(x), None))
};
let set_y = Box::new(move |y| scroll_to(None, Some(y)));
let (is_scrolling, set_is_scrolling) = create_signal(false);
let arrived_state = create_rw_signal(Directions {
@ -231,182 +197,222 @@ where
bottom: false,
});
let on_scroll_end = {
let on_stop = Rc::clone(&options.on_stop);
cfg_if! { if #[cfg(feature = "ssr")] {
let set_x = Box::new(|_| {});
let set_y = Box::new(|_| {});
let measure = Box::new(|| {});
} else {
let signal = element.into();
let behavior = options.behavior;
move |e| {
if !is_scrolling.get_untracked() {
return;
}
let scroll_to = {
let signal = signal.clone();
set_is_scrolling.set(false);
directions.update(|directions| {
directions.left = false;
directions.right = false;
directions.top = false;
directions.bottom = false;
on_stop.clone()(e);
});
}
};
move |x: Option<f64>, y: Option<f64>| {
let element = signal.get_untracked();
let throttle = options.throttle;
if let Some(element) = element {
let element = element.into();
let on_scroll_end_debounced =
use_debounce_fn_with_arg(on_scroll_end.clone(), throttle + options.idle);
let mut scroll_options = web_sys::ScrollToOptions::new();
scroll_options.behavior(behavior.get_untracked().into());
let offset = options.offset;
if let Some(x) = x {
scroll_options.left(x);
}
if let Some(y) = y {
scroll_options.top(y);
}
let set_arrived_state = move |target: web_sys::Element| {
let style = window()
.get_computed_style(&target)
.expect("failed to get computed style");
if let Some(style) = style {
let display = style
.get_property_value("display")
.expect("failed to get display");
let flex_direction = style
.get_property_value("flex-direction")
.expect("failed to get flex-direction");
let scroll_left = target.scroll_left() as f64;
let scroll_left_abs = scroll_left.abs();
directions.update(|directions| {
directions.left = scroll_left < internal_x.get_untracked();
directions.right = scroll_left > internal_x.get_untracked();
});
let left = scroll_left_abs <= offset.left;
let right = scroll_left_abs + target.client_width() as f64
>= target.scroll_width() as f64 - offset.right - ARRIVED_STATE_THRESHOLD_PIXELS;
arrived_state.update(|arrived_state| {
if display == "flex" && flex_direction == "row-reverse" {
arrived_state.left = right;
arrived_state.right = left;
} else {
arrived_state.left = left;
arrived_state.right = right;
element.scroll_to_with_scroll_to_options(&scroll_options);
}
});
set_internal_x.set(scroll_left);
let mut scroll_top = target.scroll_top() as f64;
// patch for mobile compatibility
if target == document().unchecked_into::<web_sys::Element>() && scroll_top == 0.0 {
scroll_top = document().body().expect("failed to get body").scroll_top() as f64;
}
let scroll_top_abs = scroll_top.abs();
directions.update(|directions| {
directions.top = scroll_top < internal_y.get_untracked();
directions.bottom = scroll_top > internal_y.get_untracked();
});
let top = scroll_top_abs <= offset.top;
let bottom = scroll_top_abs + target.client_height() as f64
>= target.scroll_height() as f64 - offset.bottom - ARRIVED_STATE_THRESHOLD_PIXELS;
// reverse columns and rows behave exactly the other way around,
// bottom is treated as top and top is treated as the negative version of bottom
arrived_state.update(|arrived_state| {
if display == "flex" && flex_direction == "column-reverse" {
arrived_state.top = bottom;
arrived_state.bottom = top;
} else {
arrived_state.top = top;
arrived_state.bottom = bottom;
}
});
set_internal_y.set(scroll_top);
}
};
let on_scroll_handler = {
let on_scroll = Rc::clone(&options.on_scroll);
move |e: web_sys::Event| {
let target: web_sys::Element = event_target(&e);
set_arrived_state(target);
set_is_scrolling.set(true);
on_scroll_end_debounced.clone()(e.clone());
on_scroll.clone()(e);
}
};
let target = {
let signal = signal.clone();
Signal::derive(move || {
let element = signal.get();
element.map(|element| element.into().unchecked_into::<web_sys::EventTarget>())
})
};
if throttle >= 0.0 {
let throttled_scroll_handler = use_throttle_fn_with_arg_and_options(
on_scroll_handler.clone(),
throttle,
ThrottleOptions {
trailing: true,
leading: false,
},
);
let handler = move |e: web_sys::Event| {
throttled_scroll_handler.clone()(e);
};
let _ = use_event_listener_with_options::<
_,
Signal<Option<web_sys::EventTarget>>,
web_sys::EventTarget,
_,
>(
target,
ev::scroll,
handler,
options.event_listener_options.clone(),
);
} else {
let _ = use_event_listener_with_options::<
_,
Signal<Option<web_sys::EventTarget>>,
web_sys::EventTarget,
_,
>(
target,
ev::scroll,
on_scroll_handler,
options.event_listener_options.clone(),
);
}
let set_x = {
let scroll_to = scroll_to.clone();
Box::new(move |x| scroll_to(Some(x), None))
};
let _ = use_event_listener_with_options::<
_,
Signal<Option<web_sys::EventTarget>>,
web_sys::EventTarget,
_,
>(
target,
scrollend,
on_scroll_end,
options.event_listener_options,
);
let set_y = Box::new(move |y| scroll_to(None, Some(y)));
let measure = Box::new(move || {
let el = signal.get_untracked();
if let Some(el) = el {
let el = el.into();
set_arrived_state(el);
let on_scroll_end = {
let on_stop = Rc::clone(&options.on_stop);
move |e| {
if !is_scrolling.get_untracked() {
return;
}
set_is_scrolling.set(false);
directions.update(|directions| {
directions.left = false;
directions.right = false;
directions.top = false;
directions.bottom = false;
on_stop.clone()(e);
});
}
};
let throttle = options.throttle;
let on_scroll_end_debounced =
use_debounce_fn_with_arg(on_scroll_end.clone(), throttle + options.idle);
let offset = options.offset;
let set_arrived_state = move |target: web_sys::Element| {
let style = window()
.get_computed_style(&target)
.expect("failed to get computed style");
if let Some(style) = style {
let display = style
.get_property_value("display")
.expect("failed to get display");
let flex_direction = style
.get_property_value("flex-direction")
.expect("failed to get flex-direction");
let scroll_left = target.scroll_left() as f64;
let scroll_left_abs = scroll_left.abs();
directions.update(|directions| {
directions.left = scroll_left < internal_x.get_untracked();
directions.right = scroll_left > internal_x.get_untracked();
});
let left = scroll_left_abs <= offset.left;
let right = scroll_left_abs + target.client_width() as f64
>= target.scroll_width() as f64 - offset.right - ARRIVED_STATE_THRESHOLD_PIXELS;
arrived_state.update(|arrived_state| {
if display == "flex" && flex_direction == "row-reverse" {
arrived_state.left = right;
arrived_state.right = left;
} else {
arrived_state.left = left;
arrived_state.right = right;
}
});
set_internal_x.set(scroll_left);
let mut scroll_top = target.scroll_top() as f64;
// patch for mobile compatibility
if target == document().unchecked_into::<web_sys::Element>() && scroll_top == 0.0 {
scroll_top = document().body().expect("failed to get body").scroll_top() as f64;
}
let scroll_top_abs = scroll_top.abs();
directions.update(|directions| {
directions.top = scroll_top < internal_y.get_untracked();
directions.bottom = scroll_top > internal_y.get_untracked();
});
let top = scroll_top_abs <= offset.top;
let bottom = scroll_top_abs + target.client_height() as f64
>= target.scroll_height() as f64 - offset.bottom - ARRIVED_STATE_THRESHOLD_PIXELS;
// reverse columns and rows behave exactly the other way around,
// bottom is treated as top and top is treated as the negative version of bottom
arrived_state.update(|arrived_state| {
if display == "flex" && flex_direction == "column-reverse" {
arrived_state.top = bottom;
arrived_state.bottom = top;
} else {
arrived_state.top = top;
arrived_state.bottom = bottom;
}
});
set_internal_y.set(scroll_top);
}
};
let on_scroll_handler = {
let on_scroll = Rc::clone(&options.on_scroll);
move |e: web_sys::Event| {
let target: web_sys::Element = event_target(&e);
set_arrived_state(target);
set_is_scrolling.set(true);
on_scroll_end_debounced.clone()(e.clone());
on_scroll.clone()(e);
}
};
let target = {
let signal = signal.clone();
Signal::derive(move || {
let element = signal.get();
element.map(|element| element.into().unchecked_into::<web_sys::EventTarget>())
})
};
if throttle >= 0.0 {
let throttled_scroll_handler = use_throttle_fn_with_arg_and_options(
on_scroll_handler.clone(),
throttle,
ThrottleOptions {
trailing: true,
leading: false,
},
);
let handler = move |e: web_sys::Event| {
throttled_scroll_handler.clone()(e);
};
let _ = use_event_listener_with_options::<
_,
Signal<Option<web_sys::EventTarget>>,
web_sys::EventTarget,
_,
>(
target,
ev::scroll,
handler,
options.event_listener_options.clone().unwrap_or_default(),
);
} else {
let _ = use_event_listener_with_options::<
_,
Signal<Option<web_sys::EventTarget>>,
web_sys::EventTarget,
_,
>(
target,
ev::scroll,
on_scroll_handler,
options.event_listener_options.clone().unwrap_or_default(),
);
}
});
let _ = use_event_listener_with_options::<
_,
Signal<Option<web_sys::EventTarget>>,
web_sys::EventTarget,
_,
>(
target,
scrollend,
on_scroll_end,
options.event_listener_options.unwrap_or_default(),
);
let measure = Box::new(move || {
let el = signal.get_untracked();
if let Some(el) = el {
let el = el.into();
set_arrived_state(el);
}
});
}}
UseScrollReturn {
x: internal_x.into(),
@ -447,7 +453,8 @@ pub struct UseScrollOptions {
on_stop: Rc<dyn Fn(web_sys::Event)>,
/// Options passed to the `addEventListener("scroll", ...)` call
event_listener_options: web_sys::AddEventListenerOptions,
#[builder(into)]
event_listener_options: Option<web_sys::AddEventListenerOptions>,
/// When changing the `x` or `y` signals this specifies the scroll behaviour.
/// Can be `Auto` (= not smooth) or `Smooth`. Defaults to `Auto`.

View file

@ -154,7 +154,6 @@ pub fn use_websocket_with_options(
connect_ref.set_value({
let ws = ws_ref.get_value();
let url = url;
let unmounted = Rc::clone(&unmounted);
Some(Rc::new(move || {