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

App state strings and integers as editable fields

This commit is contained in:
chris (daiyi) 2017-09-20 09:03:45 +02:00
parent 65b0115c35
commit e26c5ff255
3 changed files with 52 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
resources/day8/re_frame/trace/main.css
View File

@ -464,3 +464,16 @@
#--re-frame-trace-- .re-frame-trace--object > span {
vertical-align: text-top;
}
#--re-frame-trace-- .data-structure-editable.string:before {
color: #8f8f8f;
content: "\"";
}
#--re-frame-trace-- .data-structure-editable.string:after {
color: #8f8f8f;
content: "\"";
}
#--re-frame-trace-- .data-structure-editable input {
border: none;
border-bottom: 1px #333 dotted;
padding: 0;
}

6
resources/day8/re_frame/trace/main.less
View File

@ -596,8 +596,10 @@
}
}
&>span {
vertical-align: text-top;
input {
border: none;
border-bottom: 1px #333 dotted;
padding: 0;
}
}
}

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

@ -11,11 +11,40 @@
(reduce (fn [acc [property value]]
(assoc acc (keyword property) value)) {})))
(defn data-input [{:keys [title on-save on-change on-stop]}]
(let [val (r/atom title)
save #(let [v (-> @val str str/trim)]
(when (pos? (count v))
(on-save v)))]
(fn []
[:input {:type (cond (integer? "number")
(string? "text"))
:value @val
:size (if (zero? (count (str @val)))
1
(count (str @val)))
:on-change #(do (reset! val (-> % .-target .-value))
(on-change %))
:on-key-down #(case (.-which %)
13 (save)
nil)}])))
(defn editable
[raw]
(let [val (r/atom raw)]
[:span {:class (str/join " " ["data-structure-editable"
(when (string? raw) "string")])}
[data-input {:title raw
:on-save #(js/console.log %)
:on-change #(reset! val (.. % -target -value))}]]))
(defn str->hiccup
[string]
(cond (= string "span") :span
(= string "style") :style
(= string ", ") " "
(str/starts-with? string "\"") [editable (str/replace string "\"" "")]
:else string))
(declare jsonml->hiccup)
@ -45,8 +74,8 @@
(= "object" (first jsonml))) [data-structure jsonml]
(array? jsonml) (mapv jsonml->hiccup jsonml)
(object? jsonml) {:style (string->css (js->clj jsonml))}
(or (string? jsonml)
(integer? jsonml)) (str->hiccup jsonml)))
(string? jsonml) (str->hiccup jsonml)
(integer? jsonml) [editable jsonml]))
(defn tab [data]
[:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}}