clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-06-01 19:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify highlight handling in list item component

Browse Source
This commit is contained in:
Mega Yu
2026-02-28 21:24:42 +08:00
parent 24be28f647
commit 30c52f9907
2 changed files with 15 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/main/frontend/components/cmdk/core.cljs
View File

@@ -776,9 +776,6 @@
:rounded true
:hoverable mouse-mode?
:highlighted highlighted?
;; Pass the item itself when highlighted so the effect re-fires
;; if the list reloads while this item stays highlighted.
:on-highlight-dep (when highlighted? item)
:on-click (fn [e]
(util/stop-propagation e)
(reset! (::highlighted-item state) item)
@@ -798,13 +795,7 @@
(when-not (= :mouse @(::focus-source state))
(reset! (::focus-source state) :mouse))
(when (not= item @(::highlighted-item state))
(reset! (::highlighted-item state) item)))))
:on-highlight (fn [ref]
(when (and ref (.-current ref))
(let [row-el (.-current ref)]
(when (and (= :keyboard @(::focus-source state))
(= item @(::highlighted-item state)))
(scroll-to-highlight! state row-el))))))
(reset! (::highlighted-item state) item))))))
nil)]
[:div {:data-item-index item-idx}
(if (= group :nodes)
@@ -1092,6 +1083,16 @@
(js/clearTimeout timeout-id)))))
[])
(hooks/use-effect! (fn [] (load-results :default state)) [])
;; fired when highlighted item changes (normal keyboard navigation)
(hooks/use-effect!
(fn []
(when (and highlighted-item (= :keyboard @(::focus-source state)))
(when-let [container @(::scroll-container-ref state)]
(when-let [idx (:item-index highlighted-item)]
(when-let [el (.querySelector container (str "[data-item-index='" idx "']"))]
(scroll-to-highlight! state el)))))
nil)
[highlighted-item])
[:div {:class "bg-gray-02 border-b border-1 border-gray-07"}
[:input.cp__cmdk-search-input
{:class "text-xl bg-transparent border-none w-full outline-none px-3 py-3"

16
src/main/frontend/components/cmdk/list_item.cljs
View File

@@ -65,13 +65,11 @@
(when-not (string/blank? label)
[:span.cp__cmdk-current-page-badge label]))
(rum/defc root [{:keys [icon icon-theme query text info shortcut value-label value
title highlighted on-highlight on-highlight-dep header on-click
hoverable compact rounded on-mouse-enter on-mouse-move source-block] :as props
(rum/defc root [{:keys [icon icon-theme query text info shortcut value-label value title highlighted
header on-click hoverable compact rounded on-mouse-enter on-mouse-move source-block] :as props
:or {hoverable true rounded true}}
{:keys [app-config]}]
(let [ref (hooks/create-ref)
highlight-query (partial highlight-query* app-config query)
(let [highlight-query (partial highlight-query* app-config query)
badge-placement (current-page-badge-placement props)
text-badge (current-page-badge-node (:text-badge badge-placement))
header-badge (current-page-badge-node (:header-badge badge-placement))
@@ -83,11 +81,6 @@
mouse-selected-border "var(--ls-border-color, var(--lx-gray-09, rgba(0,0,0,0.32)))"
keyboard-ring "var(--lx-accent-09, #3b82f6)"
keyboard-overlay "rgba(0,0,0,0.07)"]
(hooks/use-effect!
(fn []
(when (and highlighted on-highlight)
(on-highlight ref)))
[highlighted on-highlight-dep])
[:div (merge
{:style (cond-> {:opacity 1
:background-color "transparent"
@@ -108,7 +101,6 @@
rounded (str " rounded-lg")
(not compact) (str " py-4 px-6 gap-1")
compact (str " py-1.5 px-3 gap-0.5"))
:ref ref
:on-click (when on-click on-click)
:on-mouse-enter (fn [e]
(set-hover? true)
@@ -119,7 +111,7 @@
;; header
(when header
[:div.text-xs.pl-8.font-light.flex.items-center.gap-2.flex-wrap {:class "-mt-1"
:style {:color "var(--lx-gray-11)"}}
:style {:color "var(--lx-gray-11)"}}
(highlight-query header)
header-badge])
;; main row