From 9805e7fe1d2dcdfd75b7e761406031b96db4a4e5 Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Mon, 13 Nov 2023 17:31:37 +0800 Subject: [PATCH] fix: search title bar not changed in sidebar --- src/main/frontend/components/cmdk.cljs | 34 ++++++++----------- .../frontend/components/right_sidebar.cljs | 28 +++++++++++---- 2 files changed, 36 insertions(+), 26 deletions(-) diff --git a/src/main/frontend/components/cmdk.cljs b/src/main/frontend/components/cmdk.cljs index 365729c6d1..e5f8bde6b4 100644 --- a/src/main/frontend/components/cmdk.cljs +++ b/src/main/frontend/components/cmdk.cljs @@ -595,7 +595,7 @@ "What are you looking for?"))) (rum/defc input-row - [state all-items] + [state all-items opts] (let [highlighted-item @(::highlighted-item state) input @(::input state) input-ref (::input-ref state)] @@ -606,19 +606,21 @@ (when (and highlighted-item (= -1 (.indexOf all-items (dissoc highlighted-item :mouse-enter-triggered-highlight)))) (reset! (::highlighted-item state) nil))) [all-items]) - (rum/use-effect! (fn [] - (load-results :default state)) - []) - (rum/use-effect! (fn [] - (js/setTimeout #(when (some-> input-ref deref) (.focus @input-ref)) 0)) - []) + (rum/use-effect! (fn [] (load-results :default state)) []) [:div {:class "bg-gray-02 border-b border-1 border-gray-07"} [:input#search {:class "text-xl bg-transparent border-none w-full outline-none px-3 py-3" + :auto-focus true :autoComplete "off" :placeholder (input-placeholder false) :ref #(when-not @input-ref (reset! input-ref %)) - :on-change (fn [e] (handle-input-change state e)) + :on-change (fn [e] + (handle-input-change state e) + (when-let [on-change (:on-input-change opts)] + (on-change (.-value (.-target e))))) + :on-blur (fn [e] + (when-let [on-blur (:on-input-blur opts)] + (on-blur input))) :on-composition-end (fn [e] (handle-input-change state e)) :on-key-down (fn [e] (let [value (.-value @input-ref) @@ -715,7 +717,8 @@ :on-click (fn [] (reset! (::filter state) nil))} (make-shui-context))]) -(rum/defcs cmdk < + +(rum/defcs cmdk < rum/static rum/reactive {:will-mount (fn [state] @@ -741,14 +744,7 @@ ::input (atom (or (:initial-input opts) ""))))) :will-unmount (fn [state] (state/set-state! :search/mode nil) - state) - :did-mount (fn [state] - (let [opts (last (:rum/args state))] - (when (and (:sidebar? opts) - (not (string/blank? @(::input state)))) - ;; trigger search - (load-results :default state))) - state)} + state)} (mixins/event-mixin (fn [state] (let [ref @(::ref state)] @@ -767,7 +763,7 @@ (rum/local nil ::load-results-throttled) (rum/local nil ::scroll-container-ref) (rum/local nil ::input-ref) - [state {:keys [sidebar?]}] + [state {:keys [sidebar?] :as opts}] (let [*input (::input state) _input (rum/react *input) search-mode (:search/mode @state/state) @@ -778,7 +774,7 @@ [:div.cp__cmdk {:ref #(when-not @(::ref state) (reset! (::ref state) %)) :class (cond-> "w-full h-full relative flex flex-col justify-start" (not sidebar?) (str " rounded-lg"))} - (input-row state all-items) + (input-row state all-items opts) [:div {:class (cond-> "w-full flex-1 overflow-y-auto min-h-[65dvh] max-h-[65dvh]" (not sidebar?) (str " pb-14")) :ref #(let [*ref (::scroll-container-ref state)] diff --git a/src/main/frontend/components/right_sidebar.cljs b/src/main/frontend/components/right_sidebar.cljs index 946e82369a..8f58fced02 100644 --- a/src/main/frontend/components/right_sidebar.cljs +++ b/src/main/frontend/components/right_sidebar.cljs @@ -113,7 +113,7 @@ (history-stack (t :right-side-bar/history-redos) (rum/react (:redo-stack state)))]]])) (defn build-sidebar-item - [repo idx db-id block-type] + [repo idx db-id block-type *db-id init-key] (case (keyword block-type) :contents [[:.flex.items-center (ui/icon "list-details" {:class "text-md mr-2"}) (t :right-side-bar/contents)] @@ -157,9 +157,18 @@ :search [[:.flex.items-center.page-title (ui/icon "search" {:class "text-md mr-2"}) - [:span.overflow-hidden.text-ellipsis db-id]] - (cmdk/cmdk-block {:initial-input db-id - :sidebar? true})] + (let [input (rum/react *db-id) + input' (if (string/blank? input) "Blank input" input)] + [:span.overflow-hidden.text-ellipsis input'])] + (rum/with-key + (cmdk/cmdk-block {:initial-input db-id + :sidebar? true + :on-input-change (fn [new-value] + (reset! *db-id new-value)) + :on-input-blur (fn [new-value] + (state/sidebar-replace-block! [repo db-id block-type] + [repo new-value block-type]))}) + (str init-key))] :page-slide-view (let [page-name (:block/name (db/entity db-id))] @@ -223,11 +232,16 @@ [component _should-update?] component) -(rum/defc sidebar-item < rum/reactive - [repo idx db-id block-type block-count] +(rum/defcs sidebar-item < rum/reactive + {:init (fn [state] (assoc state + ::db-id (atom (nth (:rum/args state) 2)) + ::init-key (random-uuid)))} + [state repo idx db-id block-type block-count] (let [drag-from (rum/react *drag-from) drag-to (rum/react *drag-to) - item (build-sidebar-item repo idx db-id block-type)] + item (build-sidebar-item repo idx db-id block-type + (::db-id state) + (::init-key state))] (when item (let [collapsed? (state/sub [:ui/sidebar-collapsed-blocks db-id])] [:<>