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

Data viewer autocompletes in forward direction

This commit is contained in:
chris (daiyi) 2017-09-27 21:12:11 +02:00
parent 970dca81be
commit 8280306758
1 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,6 +25,7 @@
{:class (str/join " " ["re-frame-trace--object" {:class (str/join " " ["re-frame-trace--object"
(when @expanded? "expanded")])} (when @expanded? "expanded")])}
[:span {:class "toggle" [:span {:class "toggle"
:style {:margin-left 1}
:on-click #(swap! expanded? not)} :on-click #(swap! expanded? not)}
[:button (if @expanded? "▼" "▶")]] [:button (if @expanded? "▼" "▶")]]
(jsonml->hiccup (if @expanded? (jsonml->hiccup (if @expanded?
@ -59,6 +60,7 @@
{:class (str/join " " ["re-frame-trace--object" {:class (str/join " " ["re-frame-trace--object"
(when @expanded? "expanded")])} (when @expanded? "expanded")])}
[:span {:class "toggle" [:span {:class "toggle"
:style {:margin-left 1}
:on-click #(swap! expanded? not)} :on-click #(swap! expanded? not)}
[:button (if @expanded? "▼ " "▶ ")]] [:button (if @expanded? "▼ " "▶ ")]]
(or title "data") (or title "data")
@ -71,12 +73,19 @@
(defn render-state [data] (defn render-state [data]
(let [subtree-input (r/atom "") (let [subtree-input (r/atom "")
last-valid-subtree-input (r/atom "")
subtree-paths (r/atom (localstorage/get "subtree-paths" #{})) subtree-paths (r/atom (localstorage/get "subtree-paths" #{}))
input-error (r/atom false)] input-error (r/atom false)]
(add-watch subtree-paths (add-watch subtree-paths
:update-localstorage :update-localstorage
(fn [_ _ _ new-state] (fn [_ _ _ new-state]
(localstorage/save! "subtree-paths" new-state))) (localstorage/save! "subtree-paths" new-state)))
(add-watch subtree-input
:update-subtree-autocomplete
(fn [_ _ prev-state new-state]
(when-let [preview (try (get-in @data (cljs.reader/read-string (str "[" @subtree-input "]")))
(catch js/Error e nil))]
(reset! last-valid-subtree-input @subtree-input))))
(fn [] (fn []
[:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}} [:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}}
[:div.panel-content-scrollable {:style {:margin 10}} [:div.panel-content-scrollable {:style {:margin 10}}
@ -88,12 +97,21 @@
(do (do
; (reset! input-error false) ; (reset! input-error false)
;; TODO check if input already wrapped in braces ;; TODO check if input already wrapped in braces
(reset! subtree-input "")
(swap! subtree-paths #(into #{(cljs.reader/read-string (str "[" path "]"))} %))))) (swap! subtree-paths #(into #{(cljs.reader/read-string (str "[" path "]"))} %)))))
:on-change #(reset! subtree-input (.. % -target -value))}]] :on-change #(reset! subtree-input (.. % -target -value))}]]
; (if @input-error ; (if @input-error
; [:div.input-error {:style {:color "red" :margin-top 5}} ; [:div.input-error {:style {:color "red" :margin-top 5}}
; "Please enter a valid path."])]] ; "Please enter a valid path."])]]
(when (not (zero? (count @subtree-input)))
[:div
[:div {:style {:margin "10px 0"}}
(when (coll? (get-in @data (cljs.reader/read-string (str "[" @last-valid-subtree-input "]"))))
(when-let [keys (keys (get-in @data (cljs.reader/read-string (str "[" @last-valid-subtree-input "]"))))]
(map (fn [key] [:button.label {:key (str key)}
(str key)])
keys)))]
[:div (str (get-in @data (cljs.reader/read-string (str "[" @last-valid-subtree-input "]"))))]])
[:div.subtrees {:style {:margin "20px 0"}} [:div.subtrees {:style {:margin "20px 0"}}
(doall (doall
(map (fn [path] (map (fn [path]
@ -106,4 +124,4 @@
[:span.subtree-button-string [:span.subtree-button-string
(str path)]]]]]) (str path)]]]]])
@subtree-paths))] @subtree-paths))]
[subtree @data [:span.label "app-state"]]]]))) [subtree @data [:button.label "app-state"]]]])))