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

improved docs

Browse source
This commit is contained in:
Maccesch 2023-05-19 22:28:26 +01:00
parent 704a31ea91
commit ab86f6d402
10 changed files with 75 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.github/workflows/ci.yml vendored
View file

@ -47,6 +47,7 @@ jobs:
run: |
cd docs/book
mdbook build
python3 post_build.py
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:

3
.idea/leptos-use.iml generated
View file

@ -13,6 +13,9 @@
<sourceFolder url="file://$MODULE_DIR$/examples/use_throttle_fn/src" isTestSource="false" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_event_listener/target" />
<excludeFolder url="file://$MODULE_DIR$/target" />
<excludeFolder url="file://$MODULE_DIR$/docs/book/book" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_event_listener/dist" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_throttle_fn/dist" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_throttle_fn/target" />
</content>
<orderEntry type="inheritedJdk" />

2
Cargo.toml
View file

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

10
docs/book/src/extract_doc_comment.py
View file

@ -1,4 +1,5 @@
import sys
import re
def main():
@ -23,6 +24,9 @@ def main():
return
interal_doc_link_pattern = re.compile(r"\[`([^]]+)\`](?!\()")
def process_line(line, name):
stripped = line.strip()
result = line
@ -34,6 +38,12 @@ def process_line(line, name):
<iframe class="demo" src="{name}/demo/index.html" width="100%" frameborder="0">
</iframe>
</div>'''
else:
result = re.sub(interal_doc_link_pattern,
r"[`\1`](https://docs.rs/leptos-use/latest/leptos_use/fn.\1.html)",
line)
return result

2
examples/use_throttle_fn/src/main.rs
View file

@ -19,7 +19,7 @@ fn Demo(cx: Scope) -> impl IntoView {
>
"Smash me!"
</button>
<p class="my-2"><small class="block">"Delay is set to 1000ms for this demo.."</small></p>
<p class="my-2"><small class="block">"Delay is set to 1000ms for this demo."</small></p>
<p class="my-3">"Button clicked: " { click_count }</p>
<p>"Event handler called: " { throttled_count }</p>
}

83
examples/use_throttle_fn/style/output.css
View file

@ -516,21 +516,11 @@ video {
--tw-backdrop-sepia: ;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
@ -549,39 +539,11 @@ video {
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}
.bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.bg-gray-600 {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.p-6 {
padding: 1.5rem;
}
@ -596,8 +558,9 @@ video {
padding-bottom: 0.5rem;
}
.font-bold {
font-weight: 700;
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.text-white {
@ -605,47 +568,7 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-gray-100 {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}
.text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.hover\:bg-blue-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}
.hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.hover\:bg-gray-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}
.hover\:bg-gray-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(156 163 175 / var(--tw-bg-opacity));
}
.hover\:bg-blue-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}
.hover\:bg-blue-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

5
src/use_event_listener.rs
View file

@ -27,7 +27,7 @@ use wasm_bindgen::JsCast;
/// }
/// ```
///
/// You can also pass a [`leptos::NodeRef`] as the event target, `use_event_listener` will unregister the previous event and register
/// You can also pass a [`NodeRef`](https://docs.rs/leptos/latest/leptos/struct.NodeRef.html) as the event target, [`use_event_listener`] will unregister the previous event and register
/// the new one when you change the target.
///
/// ```
@ -78,7 +78,8 @@ use wasm_bindgen::JsCast;
///
/// Note if your components also run in SSR (Server Side Rendering), you might get errors
/// because DOM APIs like document and window are not available outside of the browser.
/// To avoid that you can put the logic inside a [`leptos::create_effect`] hook
/// To avoid that you can put the logic inside a
/// [`create_effect`](https://docs.rs/leptos/latest/leptos/fn.create_effect.html) hook
/// which only runs client side.
#[allow(unused_must_use)]
pub fn use_event_listener<Ev, El, T, F>(

68
src/use_scroll.rs
View file

@ -1,17 +1,53 @@
use crate::core::EventTargetMaybeSignal;
use crate::use_event_listener;
use leptos::*;
// pub fn use_scroll<El, T, Fx, Fy>(
// cx: Scope,
// element: El,
// options: UseScrollOptions,
// ) -> UseScrollReturn<Fx, Fy>
// where
// (Scope, El): Into<EventTargetMaybeSignal<T>>,
// T: Into<web_sys::EventTarget> + Clone + 'static,
// {
// }
#[allow(unused_variables)]
pub fn use_scroll<El, T, Fx, Fy>(
cx: Scope,
element: El,
options: UseScrollOptions,
) -> UseScrollReturn
where
(Scope, El): Into<EventTargetMaybeSignal<T>>,
T: Into<web_sys::EventTarget> + Clone + 'static,
Fx: Fn(f64),
Fy: Fn(f64),
{
// TODO : implement
let (x, set_x) = create_signal(cx, 0.0);
let (y, set_y) = create_signal(cx, 0.0);
let (is_scrolling, _) = create_signal(cx, false);
let (arrived_state, _) = create_signal(
cx,
Directions {
left: false,
right: false,
top: false,
bottom: false,
},
);
let (directions, _) = create_signal(
cx,
Directions {
left: false,
right: false,
top: false,
bottom: false,
},
);
UseScrollReturn {
x: x.into(),
set_x: Box::new(move |x| set_x.set(x)),
y: y.into(),
set_y: Box::new(move |y| set_y.set(y)),
is_scrolling: is_scrolling.into(),
arrived_state: arrived_state.into(),
directions: directions.into(),
}
}
/// Options for [`use_scroll`].
#[derive(Default)]
@ -47,15 +83,11 @@ pub enum ScrollBehavior {
Smooth,
}
pub struct UseScrollReturn<Fx, Fy>
where
Fx: FnMut(f64),
Fy: FnMut(f64),
{
pub struct UseScrollReturn {
pub x: Signal<f64>,
pub set_x: Fx,
pub set_x: Box<dyn Fn(f64)>,
pub y: Signal<f64>,
pub set_y: Fy,
pub set_y: Box<dyn Fn(f64)>,
pub is_scrolling: Signal<bool>,
pub arrived_state: Signal<Directions>,
pub directions: Signal<Directions>,

2
src/use_throttle_fn.rs
View file

@ -12,7 +12,7 @@ pub use crate::utils::ThrottleOptions;
///
/// ## Demo
///
/// [Link to Demo](https://github.com/synphonyte/leptos-use/tree/main/examples/use_throttle_fn)
/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/master/examples/use_throttle_fn)
///
/// ## Usage
///

4
src/utils/filters.rs
View file

@ -1,6 +1,6 @@
use js_sys::Date;
use leptos::leptos_dom::helpers::TimeoutHandle;
use leptos::{set_timeout_with_handle, MaybeSignal, Scope, SignalGetUntracked};
use leptos::{set_timeout_with_handle, MaybeSignal, SignalGetUntracked};
use std::cell::{Cell, RefCell};
use std::cmp::max;
use std::rc::Rc;
@ -80,7 +80,7 @@ where
let elapsed = Date::now() - last_exec.get();
let last_val = Rc::clone(&last_value);
let mut invoke = move || {
let invoke = move || {
let return_value = _invoke();
let mut val_mut = last_val.borrow_mut();