mirror of
https://github.com/penpot/penpot.git
synced 2025-06-09 16:21:40 +02:00
✨ Add minor improvements to use-visible hook
This commit is contained in:
parent
937d3b4954
commit
1e2603f1f5
1 changed files with 14 additions and 10 deletions
|
@ -302,11 +302,14 @@
|
||||||
(fn [entries _]
|
(fn [entries _]
|
||||||
(run! (partial rx/push! intersection-subject) (seq entries)))
|
(run! (partial rx/push! intersection-subject) (seq entries)))
|
||||||
#js {:rootMargin "0px"
|
#js {:rootMargin "0px"
|
||||||
:threshold 1.0})))
|
:threshold #js [0 1.0]})))
|
||||||
|
|
||||||
(defn use-visible
|
(defn use-visible
|
||||||
[ref & {:keys [once?]}]
|
[ref & {:keys [once?]}]
|
||||||
(let [[state update-state!] (mf/useState false)]
|
(let [state (mf/useState false)
|
||||||
|
update-state! (aget state 1)
|
||||||
|
state (aget state 0)]
|
||||||
|
|
||||||
(mf/with-effect [once?]
|
(mf/with-effect [once?]
|
||||||
(let [node (mf/ref-val ref)
|
(let [node (mf/ref-val ref)
|
||||||
stream (->> intersection-subject
|
stream (->> intersection-subject
|
||||||
|
@ -315,14 +318,15 @@
|
||||||
(identical? target node))))
|
(identical? target node))))
|
||||||
(rx/map (fn [entry]
|
(rx/map (fn [entry]
|
||||||
(let [ratio (unchecked-get entry "intersectionRatio")
|
(let [ratio (unchecked-get entry "intersectionRatio")
|
||||||
intersecting? (unchecked-get entry "isIntersecting")]
|
intersecting? (unchecked-get entry "isIntersecting")
|
||||||
(or intersecting? (> ratio 0.5)))))
|
intersecting? (or ^boolean intersecting?
|
||||||
|
^boolean (> ratio 0.5))]
|
||||||
|
(when (and (true? intersecting?) (true? once?))
|
||||||
|
(.unobserve ^js @intersection-observer node))
|
||||||
|
|
||||||
|
intersecting?)))
|
||||||
|
|
||||||
(rx/dedupe))
|
(rx/dedupe))
|
||||||
stream (if once?
|
|
||||||
(->> stream
|
|
||||||
(rx/filter identity)
|
|
||||||
(rx/take 1))
|
|
||||||
stream)
|
|
||||||
subs (rx/subscribe stream update-state!)]
|
subs (rx/subscribe stream update-state!)]
|
||||||
(.observe ^js @intersection-observer node)
|
(.observe ^js @intersection-observer node)
|
||||||
(fn []
|
(fn []
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue