Use a re-com input box for searching

src/day8/re_frame/trace/events.cljs

@@ -29,7 +29,7 @@
 (rf/reg-event-db
   :settings/user-toggle-panel
   (fn [db _]
-    (let [show-panel? (not (get-in db [:settings :show-panel?]))
+    (let [show-panel?     (not (get-in db [:settings :show-panel?]))
           external-panel? (get-in db [:settings :external-window?])]
       (if show-panel?
         (utils.traces/enable-tracing!)
@@ -161,3 +161,23 @@
     (let [new-db (update-in db [:app-db :paths] disj path)]
       (localstorage/save! "app-db-paths" (get-in new-db [:app-db :paths]))
       new-db)))
+
+(rf/reg-event-db
+  :app-db/add-path
+  (fn [db _]
+    (let [search-string (get-in db [:app-db :search-string])
+          path          (try
+                          (when-not (str/blank? search-string)
+                            (cljs.reader/read-string (str "[" search-string "]")))
+                          (catch :default e
+                            nil))]
+      (if (some? path)
+        (-> db
+            (update-in [:app-db :paths] conj path)
+            (assoc-in [:app-db :search-string] ""))
+        db))))
+
+(rf/reg-event-db
+  :app-db/search-string
+  (fn [db [_ search-string]]
+    (assoc-in db [:app-db :search-string] search-string)))

src/day8/re_frame/trace/panels/app_db.cljs

@@ -6,6 +6,7 @@
             [devtools.formatters.core]
             [day8.re-frame.trace.utils.localstorage :as localstorage]
             [day8.re-frame.trace.components.components :as components]
+            [day8.re-frame.trace.utils.re-com :as re-com]
             [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]))
 
 (defn string->css [css-string]
@@ -117,21 +118,19 @@
 (defn render-state [data]
   (let [subtree-input (r/atom "")
         subtree-paths (rf/subscribe [:app-db/paths])
+        search-string (rf/subscribe [:app-db/search-string])
         input-error   (r/atom false)]
     (fn []
       [:div {:style {:flex "1 1 auto" :display "flex" :flex-direction "column"}}
        [:div.panel-content-scrollable {:style {:margin-left "10px"}}
-        [:div.filter-control-input
+        [re-com/input-text
-         [components/search-input {:placeholder ":path :into :app-db"
+         :model search-string
-                                   :on-save     (fn [path]
+         :on-change (fn [input-string] (rf/dispatch [:app-db/search-string input-string]))
-                                                  (if false ;; TODO check if path exists
+         :on-submit #(rf/dispatch [:app-db/add-path %])
-                                                    (reset! input-error true)
+         :change-on-blur? false
-                                                    (do
+         :placeholder ":path :into :app-db"]
-                                                      ; (reset! input-error false)
+
-                                                      ;; TODO check if input already wrapped in braces
+        ;; TODO: check for input errors
-                                                      (rf/dispatch [:app-db/paths (into #{(cljs.reader/read-string (str "[" path "]"))} @subtree-paths)])
-                                                      #_(swap! subtree-paths #(into #{(cljs.reader/read-string (str "[" path "]"))} %)))))
-                                   :on-change   #(reset! subtree-input (.. % -target -value))}]]
         ; (if @input-error
         ;   [:div.input-error {:style {:color "red" :margin-top 5}}
         ;    "Please enter a valid path."])]]

src/day8/re_frame/trace/utils/re_com.cljs

@@ -153,7 +153,7 @@
   (let [external-model (reagent/atom (deref-or-value model))  ;; Holds the last known external value of model, to detect external model changes
         internal-model (reagent/atom (if (nil? @external-model) "" @external-model))] ;; Create a new atom from the model to be used internally (avoid nil)
     (fn
-      [& {:keys [model on-change status status-icon? status-tooltip placeholder width height rows change-on-blur? validation-regex disabled? class style attr]
+      [& {:keys [model on-change on-submit status status-icon? status-tooltip placeholder width height rows change-on-blur? validation-regex disabled? class style attr]
           :or   {change-on-blur? true}
           :as   args}]
       (let [latest-ext-model (deref-or-value model)
@@ -207,11 +207,16 @@
                                                 change-on-blur?
                                                 (not= @internal-model @external-model))
                                           (on-change @internal-model)))
+                         :on-key-down (handler-fn
+                                        (case (.-which event)
+                                          13 (when on-submit
+                                               (on-submit @internal-model))
+                                          true))
                          :on-key-up   (handler-fn
                                         (if disabled?
                                           (.preventDefault event)
                                           (case (.-which event)
-                                            13 (when on-change (on-change @internal-model))
+                                            #_#_13 (when on-change (on-change @internal-model))
                                             27 (reset! internal-model @external-model)
                                             true)))}
                         attr)]]]]))))