diff --git a/src/main/frontend/components/block.cljs b/src/main/frontend/components/block.cljs index ac72ddf55d..ef2f2a3a41 100644 --- a/src/main/frontend/components/block.cljs +++ b/src/main/frontend/components/block.cljs @@ -274,13 +274,13 @@ (let [handle-props {} add-resizing-class! #(dom/add-class! js/document.documentElement "is-resizing-buf") remove-resizing-class! #(dom/remove-class! js/document.documentElement "is-resizing-buf") - *handle-left (rum/use-ref nil) - *handle-right (rum/use-ref nil)] + *handle-left (hooks/use-ref nil) + *handle-right (hooks/use-ref nil)] (rum/use-effect! (fn [] - (doseq [el [(rum/deref *handle-left) - (rum/deref *handle-right)]] + (doseq [el [(hooks/deref *handle-left) + (hooks/deref *handle-right)]] (-> (js/interact el) (.draggable (bean/->js @@ -768,12 +768,12 @@ (rum/defc popup-preview-impl [children {:keys [*timer *timer1 visible? set-visible! render *el-popup]}] - (let [*el-trigger (rum/use-ref nil)] + (let [*el-trigger (hooks/use-ref nil)] (rum/use-effect! (fn [] (when (true? visible?) (shui/popup-show! - (rum/deref *el-trigger) render + (hooks/deref *el-trigger) render {:root-props {:onOpenChange (fn [v] (set-visible! v)) :modal false} :content-props {:class "ls-preview-popup" @@ -781,15 +781,15 @@ :onEscapeKeyDown (fn [^js e] (when (state/editing?) (.preventDefault e) - (some-> (rum/deref *el-popup) (.focus))))} + (some-> (hooks/deref *el-popup) (.focus))))} :as-dropdown? false})) (when (false? visible?) (shui/popup-hide!) (when (state/get-edit-block) (state/clear-edit!))) - (rum/set-ref! *timer nil) - (rum/set-ref! *timer1 nil) + (hooks/set-ref! *timer nil) + (hooks/set-ref! *timer1 nil) ;; teardown (fn [] (when visible? @@ -800,33 +800,33 @@ {:ref *el-trigger :on-mouse-enter (fn [^js e] (when (= (some-> (.-target e) (.closest ".preview-ref-link")) - (rum/deref *el-trigger)) - (let [timer (rum/deref *timer) - timer1 (rum/deref *timer1)] + (hooks/deref *el-trigger)) + (let [timer (hooks/deref *timer) + timer1 (hooks/deref *timer1)] (when-not timer - (rum/set-ref! *timer - (js/setTimeout #(set-visible! true) 1000))) + (hooks/set-ref! *timer + (js/setTimeout #(set-visible! true) 1000))) (when timer1 (js/clearTimeout timer1) - (rum/set-ref! *timer1 nil))))) + (hooks/set-ref! *timer1 nil))))) :on-mouse-leave (fn [] - (let [timer (rum/deref *timer) - timer1 (rum/deref *timer1)] + (let [timer (hooks/deref *timer) + timer1 (hooks/deref *timer1)] (when (or (number? timer) (number? timer1)) (when timer (js/clearTimeout timer) - (rum/set-ref! *timer nil)) + (hooks/set-ref! *timer nil)) (when-not timer1 - (rum/set-ref! *timer1 - (js/setTimeout #(set-visible! false) 300))))))} + (hooks/set-ref! *timer1 + (js/setTimeout #(set-visible! false) 300))))))} children])) (rum/defc page-preview-trigger [{:keys [children sidebar? open? manual?] :as config} page-entity] - (let [*timer (rum/use-ref nil) ;; show - *timer1 (rum/use-ref nil) ;; hide - *el-popup (rum/use-ref nil) - *el-wrap (rum/use-ref nil) + (let [*timer (hooks/use-ref nil) ;; show + *timer1 (hooks/use-ref nil) ;; hide + *el-popup (hooks/use-ref nil) + *el-wrap (hooks/use-ref nil) [in-popup? set-in-popup!] (rum/use-state nil) [visible? set-visible!] (rum/use-state nil) ;; set-visible! (fn debug-visible [v] (js/console.warn "debug: visible" v) (set-visible! v)) @@ -835,7 +835,7 @@ (rum/use-effect! (fn [] - (let [el-popup (rum/deref *el-popup) + (let [el-popup (hooks/deref *el-popup) focus! #(js/setTimeout (fn [] (.focus el-popup)))] (set-ready! true) (focus!) @@ -852,23 +852,23 @@ :font-weight 500 :padding-bottom 64} :on-mouse-enter (fn [] - (when-let [timer1 (rum/deref *timer1)] + (when-let [timer1 (hooks/deref *timer1)] (js/clearTimeout timer1))) :on-mouse-leave (fn [] ;; check the top popup whether is the preview popup (when (ui/last-shui-preview-popup?) - (rum/set-ref! *timer1 - (js/setTimeout #(set-visible! false) 500))))} + (hooks/set-ref! *timer1 + (js/setTimeout #(set-visible! false) 500))))} (when-let [page-cp (and ready? (state/get-page-blocks-cp))] (page-cp {:repo (state/get-current-repo) :page-name (str (:block/uuid source)) :sidebar? sidebar? - :scroll-container (some-> (rum/deref *el-popup) (.closest ".ls-preview-popup")) + :scroll-container (some-> (hooks/deref *el-popup) (.closest ".ls-preview-popup")) :preview? true}))])))] (rum/use-effect! (fn [] - (if (some-> (rum/deref *el-wrap) (.closest "[data-radix-popper-content-wrapper]")) + (if (some-> (hooks/deref *el-wrap) (.closest "[data-radix-popper-content-wrapper]")) (set-in-popup! true) (set-in-popup! false))) []) @@ -1194,8 +1194,8 @@ (rum/defc block-reference-preview [children {:keys [repo config id]}] - (let [*timer (rum/use-ref nil) ;; show - *timer1 (rum/use-ref nil) ;; hide + (let [*timer (hooks/use-ref nil) ;; show + *timer1 (hooks/use-ref nil) ;; hide [visible? set-visible!] (rum/use-state nil) _ #_:clj-kondo/ignore (rum/defc render [] [:div.tippy-wrapper.as-block @@ -1203,13 +1203,13 @@ :font-weight 500 :text-align "left"} :on-mouse-enter (fn [] - (when-let [timer1 (rum/deref *timer1)] + (when-let [timer1 (hooks/deref *timer1)] (js/clearTimeout timer1))) :on-mouse-leave (fn [] (when (ui/last-shui-preview-popup?) - (rum/set-ref! *timer1 - (js/setTimeout #(set-visible! false) 500))))} + (hooks/set-ref! *timer1 + (js/setTimeout #(set-visible! false) 500))))} [(breadcrumb config repo id {:indent? true}) (blocks-container (assoc config :id (str id) :preview? true) @@ -3821,8 +3821,8 @@ [config options] (let [block (or (:code-block config) (:block config)) container-id (:container-id config) - *mode-ref (rum/use-ref nil) - *actions-ref (rum/use-ref nil)] + *mode-ref (hooks/use-ref nil) + *actions-ref (hooks/use-ref nil)] (when options (let [html-export? (:html-export? config) @@ -3840,10 +3840,10 @@ [:div.ui-fenced-code-editor.flex.w-full {:ref (fn [el] (set-inside-portal? (and el (whiteboard-handler/inside-portal? el)))) - :on-mouse-over #(dom/add-class! (rum/deref *actions-ref) "opacity-100") + :on-mouse-over #(dom/add-class! (hooks/deref *actions-ref) "opacity-100") :on-mouse-leave (fn [e] (when (dom/has-class? (.-target e) "code-editor") - (dom/remove-class! (rum/deref *actions-ref) "opacity-100")))} + (dom/remove-class! (hooks/deref *actions-ref) "opacity-100")))} (cond (nil? inside-portal?) nil @@ -4124,7 +4124,7 @@ {:top? top? :bottom? bottom?}))) virtualized? (and virtualized? (seq blocks)) - *virtualized-ref (rum/use-ref nil) + *virtualized-ref (hooks/use-ref nil) virtual-opts (when virtualized? {:ref *virtualized-ref :custom-scroll-parent (or (:scroll-container config) @@ -4144,7 +4144,7 @@ block {:top? top? :bottom? bottom?})))}) - *wrap-ref (rum/use-ref nil)] + *wrap-ref (hooks/use-ref nil)] (rum/use-effect! (fn [] (when virtualized? @@ -4157,13 +4157,13 @@ (let [^js *ob (volatile! nil)] (js/setTimeout (fn [] - (when-let [_inst (rum/deref *virtualized-ref)] - (when-let [^js target (.-firstElementChild (rum/deref *wrap-ref))] - (let [set-wrap-h! #(when-let [ref (rum/deref *wrap-ref)] (set! (.-height (.-style ref)) %)) + (when-let [_inst (hooks/deref *virtualized-ref)] + (when-let [^js target (.-firstElementChild (hooks/deref *wrap-ref))] + (let [set-wrap-h! #(when-let [ref (hooks/deref *wrap-ref)] (set! (.-height (.-style ref)) %)) set-wrap-h! (debounce set-wrap-h! 16) ob (js/ResizeObserver. (fn [] - (when-let [h (and (rum/deref *wrap-ref) + (when-let [h (and (hooks/deref *wrap-ref) (.-height (.-style target)))] ;(prn "==>> debug: " h) (set-wrap-h! h))))] diff --git a/src/main/frontend/components/cmdk/list_item.cljs b/src/main/frontend/components/cmdk/list_item.cljs index f6a2a64abd..aacc26e5d6 100644 --- a/src/main/frontend/components/cmdk/list_item.cljs +++ b/src/main/frontend/components/cmdk/list_item.cljs @@ -1,10 +1,11 @@ (ns frontend.components.cmdk.list-item (:require ["remove-accents" :as remove-accents] - [rum.core :as rum] [clojure.string :as string] + [frontend.hooks :as hooks] [goog.string :as gstring] - [logseq.shui.ui :as shui])) + [logseq.shui.ui :as shui] + [rum.core :as rum])) (defn- to-string [input] (cond @@ -40,11 +41,11 @@ segs (string/split highlighted-text #"<:hlmarker>")] (if (seq segs) (into [:span] - (map-indexed (fn [i seg] - (if (even? i) - [:span seg] - [:span {:class "ui__list-item-highlighted-span"} seg])) - segs)) + (map-indexed (fn [i seg] + (if (even? i) + [:span seg] + [:span {:class "ui__list-item-highlighted-span"} seg])) + segs)) [:span normal-text]))))) (rum/defc root [{:keys [group icon icon-theme query text info shortcut value-label value @@ -52,29 +53,29 @@ hoverable compact rounded on-mouse-enter component-opts source-page] :as _props :or {hoverable true rounded true}} {:keys [app-config]}] - (let [ref (rum/create-ref) + (let [ref (hooks/create-ref) highlight-query (partial highlight-query* app-config query) [hover? set-hover?] (rum/use-state false)] (rum/use-effect! - (fn [] - (when (and highlighted on-highlight) - (on-highlight ref))) - [highlighted on-highlight-dep]) + (fn [] + (when (and highlighted on-highlight) + (on-highlight ref))) + [highlighted on-highlight-dep]) [:div (merge - {:style {:opacity (if highlighted 1 0.8)} - :class (cond-> "flex flex-col transition-opacity" - highlighted (str " !opacity-100 bg-gray-03-alpha dark:bg-gray-04-alpha") - hoverable (str " transition-all duration-50 ease-in !opacity-75 hover:!opacity-100 hover:cursor-pointer hover:bg-gradient-to-r hover:from-gray-03-alpha hover:to-gray-01-alpha from-0% to-100%") - (and hoverable rounded) (str " !rounded-lg") - (not compact) (str " py-4 px-6 gap-1") - compact (str " py-1.5 px-3 gap-0.5") - (not highlighted) (str " ")) - :ref ref - :on-click (when on-click on-click) - :on-mouse-over #(set-hover? true) - :on-mouse-out #(set-hover? false) - :on-mouse-enter (when on-mouse-enter on-mouse-enter)} - component-opts) + {:style {:opacity (if highlighted 1 0.8)} + :class (cond-> "flex flex-col transition-opacity" + highlighted (str " !opacity-100 bg-gray-03-alpha dark:bg-gray-04-alpha") + hoverable (str " transition-all duration-50 ease-in !opacity-75 hover:!opacity-100 hover:cursor-pointer hover:bg-gradient-to-r hover:from-gray-03-alpha hover:to-gray-01-alpha from-0% to-100%") + (and hoverable rounded) (str " !rounded-lg") + (not compact) (str " py-4 px-6 gap-1") + compact (str " py-1.5 px-3 gap-0.5") + (not highlighted) (str " ")) + :ref ref + :on-click (when on-click on-click) + :on-mouse-over #(set-hover? true) + :on-mouse-out #(set-hover? false) + :on-mouse-enter (when on-mouse-enter on-mouse-enter)} + component-opts) ;; header (when header [:div.text-xs.pl-8.font-light {:class "-mt-1" @@ -87,9 +88,9 @@ :box-shadow (when (#{:gradient} icon-theme) "inset 0 0 0 1px rgba(255,255,255,0.3) ")} :class (cond-> "w-5 h-5 rounded flex items-center justify-center" (= icon-theme :color) (str - " " - (if highlighted "bg-accent-07-alpha" "bg-gray-05") - " dark:text-white") + " " + (if highlighted "bg-accent-07-alpha" "bg-gray-05") + " dark:text-white") (= icon-theme :gray) (str " bg-gray-05 dark:text-white"))} (shui/tabler-icon icon {:size "14" :class ""})] [:div.flex.flex-1.flex-col diff --git a/src/main/frontend/hooks.cljs b/src/main/frontend/hooks.cljs index 20bc893fd9..1742fa1f24 100644 --- a/src/main/frontend/hooks.cljs +++ b/src/main/frontend/hooks.cljs @@ -49,9 +49,9 @@ (def create-ref rum/create-ref) (def deref rum/deref) (def set-ref! rum/set-ref!) - (def use-state rum/use-state) -(def use-reducer rum/use-reducer) +(comment + (def use-reducer rum/use-reducer)) ;;; other custom hooks