From 0c42aff5329ee18b4e109504225cf8df9abe91ea Mon Sep 17 00:00:00 2001 From: Daniel Compton Date: Tue, 14 Nov 2017 15:52:43 +1300 Subject: [PATCH] Use a re-com input box for searching --- src/day8/re_frame/trace/events.cljs | 22 +++++++++++++++++++++- src/day8/re_frame/trace/panels/app_db.cljs | 21 ++++++++++----------- src/day8/re_frame/trace/utils/re_com.cljs | 9 +++++++-- 3 files changed, 38 insertions(+), 14 deletions(-) diff --git a/src/day8/re_frame/trace/events.cljs b/src/day8/re_frame/trace/events.cljs index a4a7ca8..3b40dbd 100644 --- a/src/day8/re_frame/trace/events.cljs +++ b/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))) diff --git a/src/day8/re_frame/trace/panels/app_db.cljs b/src/day8/re_frame/trace/panels/app_db.cljs index d18624a..4f1d4af 100644 --- a/src/day8/re_frame/trace/panels/app_db.cljs +++ b/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 - [components/search-input {:placeholder ":path :into :app-db" - :on-save (fn [path] - (if false ;; TODO check if path exists - (reset! input-error true) - (do - ; (reset! input-error false) - ;; TODO check if input already wrapped in braces - (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))}]] + [re-com/input-text + :model search-string + :on-change (fn [input-string] (rf/dispatch [:app-db/search-string input-string])) + :on-submit #(rf/dispatch [:app-db/add-path %]) + :change-on-blur? false + :placeholder ":path :into :app-db"] + + ;; TODO: check for input errors ; (if @input-error ; [:div.input-error {:style {:color "red" :margin-top 5}} ; "Please enter a valid path."])]] diff --git a/src/day8/re_frame/trace/utils/re_com.cljs b/src/day8/re_frame/trace/utils/re_com.cljs index b3c6390..243c72d 100644 --- a/src/day8/re_frame/trace/utils/re_com.cljs +++ b/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)]]]]))))