fix(cmdk): missing file

pull/11311/head
charlie 2024-05-06 22:18:40 +08:00
parent 9495177a33
commit 60a8cea1fa
1 changed files with 113 additions and 0 deletions

View File

@ -0,0 +1,113 @@
(ns frontend.components.cmdk-list-item
(:require
["remove-accents" :as remove-accents]
[rum.core :as rum]
[clojure.string :as string]
[goog.string :as gstring]
[logseq.shui.icon.v2 :as icon]
[logseq.shui.shortcut.v1 :as shortcut]))
(def to-string shortcut/to-string)
(defn- normalize-text [app-config text]
(cond-> (to-string text)
;; :lower-case (string/lower-case)
:normalize (.normalize "NFKC")
(:feature/enable-search-remove-accents? app-config) (remove-accents)))
(defn highlight-query* [app-config query text]
(cond
(or (vector? text) (object? text)) ; hiccup
text
(string/blank? query)
[:span (to-string text)]
:else
(when-let [text-string (not-empty (to-string text))]
(let [normal-text (normalize-text app-config text-string)
normal-query (normalize-text app-config query)
query-terms (string/replace (gstring/regExpEscape normal-query) #"\s+" "|")
query-re (js/RegExp. (str "(" query-terms ")") "i")
highlighted-text (string/replace normal-text query-re "<:hlmarker>$1<:hlmarker>")
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))
[:span normal-text])))))
(rum/defc root [{:keys [group icon icon-theme query text info shortcut value-label value
title highlighted on-highlight on-highlight-dep header on-click hls-page?
hoverable compact rounded on-mouse-enter component-opts source-page] :as _props
:or {hoverable true rounded true}}
{:keys [app-config] :as context}]
(let [ref (rum/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])
[: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)
;; header
(when header
[:div.text-xs.pl-8.font-light {:class "-mt-1"
:style {:color "var(--lx-gray-11)"}}
(highlight-query header)])
;; main row
[:div.flex.items-center.gap-3
[:div.w-5.h-5.rounded.flex.items-center.justify-center
{:style {:background (when (#{:gradient} icon-theme) "linear-gradient(-65deg, #8AE8FF, #5373E7, #369EFF, #00B1CC)")
: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")
(= icon-theme :gray) (str " bg-gray-05 dark:text-white"))}
(icon/root icon {:size "14"
:class ""})]
[:div.flex.flex-1.flex-col
(when title
[:div.text-sm.pb-2.font-bold.text-gray-11 (highlight-query title)])
[:div {:class "text-sm font-medium text-gray-12"}
(if (and (= group :pages) (not= text source-page)) ;; alias
[:div.flex.flex-row.items-center.gap-2
(highlight-query text)
(if-not hls-page?
[:<> [:div.opacity-50.font-normal "alias of"] source-page]
[:div.opacity-50.font-normal.text-xs " — Highlights page"])]
(highlight-query text))
(when info
[:span.text-xs.text-gray-11 " — " (highlight-query info)])]]
(when (or value-label value)
[:div {:class "text-xs"}
(when (and value-label value)
[:span.text-gray-11 (str (to-string value-label) ": ")])
(when (and value-label (not value))
[:span.text-gray-11 (str (to-string value-label))])
(when value
[:span.text-gray-11 (to-string value)])])
(when shortcut
[:div {:class "flex gap-1"
:style {:opacity (if (or highlighted hover?) 1 0.9)}}
(shortcut/root shortcut)])]]))