enhance: flicker cursor when editing

This commit is contained in:
Tienson Qin
2023-06-07 02:09:44 +08:00
parent 444a8cf446
commit 88496ac8f5
3 changed files with 23 additions and 13 deletions

View File

@@ -2764,7 +2764,7 @@
(str (:block/uuid block)))))
(rum/defc ^:large-vars/cleanup-todo block-container-inner < rum/reactive db-mixins/query
[state repo config block]
[state repo config block {:keys [edit? edit-input-id]}]
(let [ref? (:ref? config)
custom-query? (boolean (:custom-query? config))
ref-or-custom-query? (or ref? custom-query?)
@@ -2808,8 +2808,6 @@
children-refs (get-children-refs block)
data-refs (build-refs-data-value children-refs)
data-refs-self (build-refs-data-value refs)
edit-input-id (str "edit-block-" blocks-container-id "-" uuid)
edit? (state/sub [:editor/editing? edit-input-id])
card? (string/includes? data-refs-self "\"card\"")
review-cards? (:review-cards? config)
selected? (when-not slide?
@@ -2950,11 +2948,17 @@
(state/set-collapsed-block! block-id nil)))
state)}
[state config block]
(let [repo (state/get-current-repo)]
(let [repo (state/get-current-repo)
blocks-container-id (:blocks-container-id config)
edit-input-id (str "edit-block-" blocks-container-id "-" (:block/uuid block))
edit? (state/sub [:editor/editing? edit-input-id])
opts {:edit? edit?
:edit-input-id edit-input-id}]
(ui/lazy-visible
(fn [] (block-container-inner state repo config block))
(fn [] (block-container-inner state repo config block opts))
{:debug-id (str "block-container-ref " (:db/id block))
:fade-in? false})))
:fade-in? false
:initial-state edit?})))
(defn divide-lists
[[f & l]]

View File

@@ -26,9 +26,9 @@
;; lazy loading
(def initial-blocks-length 50000)
(def initial-blocks-length 100)
(def step-loading-blocks 250)
(def step-loading-blocks 50)
;; TODO: extract to specific models and move data transform logic to the

View File

@@ -1096,18 +1096,24 @@
(rum/defc lazy-visible
([content-fn]
(lazy-visible content-fn nil))
([content-fn {:keys [trigger-once? fade-in? _debug-id]
:or {trigger-once? false
([content-fn {:keys [initial-state trigger-once? fade-in? debug-id]
:or {initial-state false
trigger-once? false
fade-in? true}}]
(let [[visible? set-visible!] (rum/use-state false)
(let [[visible? set-visible!] (rum/use-state initial-state)
root-margin 100
inViewState (useInView #js {:rootMargin (str root-margin "px")
inViewState (useInView #js {:initialInView initial-state
:rootMargin (str root-margin "px")
:triggerOnce trigger-once?
:onChange (fn [in-view? entry]
(when in-view?
(prn :debug "render: " debug-id))
(let [self-top (.-top (.-boundingClientRect entry))]
(when (or (and (not visible?) in-view?)
;; hide only the components below the current top for better ux
(and visible? (not in-view?) (> self-top root-margin)))
;; visible?
(and visible? (not in-view?) (> self-top root-margin))
)
(set-visible! in-view?))))})
ref (.-ref inViewState)]
(lazy-visible-inner visible? content-fn ref fade-in?))))