status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Use a re-com input box for searching

This commit is contained in:
Daniel Compton 2017-11-14 15:52:43 +13:00
parent dabd165295
commit 0c42aff532
3 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/day8/re_frame/trace/events.cljs
View File

@ -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)))

21
src/day8/re_frame/trace/panels/app_db.cljs
View File

@ -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."])]]

9
src/day8/re_frame/trace/utils/re_com.cljs
View File

@ -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)]]]]))))