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

Make search input into a component

This commit is contained in:
chris (daiyi) 2017-09-27 11:14:47 +02:00 committed by Daniel Compton
parent 58cc6bb1e5
commit 4b70c7f5fc
3 changed files with 38 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -120,24 +120,6 @@
[]
(monkey-patch-reagent))
(defn search-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 "text"
:value @val
:auto-focus true
:on-change #(do (reset! val (-> % .-target .-value))
(on-change %))
:on-key-down #(case (.-which %)
13 (do
(save)
(reset! val ""))
nil)}])))
(defn query->fn [query]
(if (= :contains (:filter-type query))
(fn [trace]
@ -263,8 +245,8 @@
[:option {:value "contains"} "contains"]
[:option {:value "slower-than"} "slower than"]]
[:div.filter-control-input {:style {:margin-left 10}}
[search-input {:on-save save-query
:on-change #(reset! filter-input (.. % -target -value))}]
[components/search-input {:on-save save-query
:on-change #(reset! filter-input (.. % -target -value))}]
(if @input-error
[:div.input-error {:style {:color "red" :margin-top 5}}
"Please enter a valid number."])]]]

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

@ -2,28 +2,9 @@
(:require [reagent.core :as r]
[clojure.string :as str]
[devtools.formatters.core :as cljs-devtools]
[day8.re-frame.trace.localstorage :as localstorage]))
[day8.re-frame.trace.localstorage :as localstorage]
[day8.re-frame.trace.components :as components]))
(defn search-input [{:keys [title placeholder 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 "text"
:value @val
:auto-focus true
:placeholder placeholder
:size (if (> 20 (count (str @val)))
25
(count (str @val)))
:on-change #(do (reset! val (-> % .-target .-value))
(on-change %))
:on-key-down #(case (.-which %)
13 (do
(save)
(reset! val ""))
nil)}])))
(defn string->css [css-string]
"This function converts jsonml css-strings to valid css maps for hiccup.
@ -100,18 +81,18 @@
[:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}}
[:div.panel-content-scrollable {:style {:margin 10}}
[:div.filter-control-input
[search-input {:placeholder ":path :into :app-state"
: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
(swap! subtree-paths conj (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."])]]
[components/search-input {:placeholder ":path :into :app-state"
: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
(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."])]]
[:div.subtrees {:style {:margin "20px 0"}}
(doall

36
src/day8/re_frame/trace/components.cljs
View File

@ -1,20 +1,28 @@
(ns day8.re-frame.trace.components
(:require [reagent.core :as r]
[clojure.string :as str]
[goog.fx.dom :as fx]))
(defn icon-add []
[:svg.icon.icon-add
{:viewBox "0 0 32 32"}
[:title "add"]
[:path
{:d "M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z"}]])
(defn icon-remove []
[:svg.icon.icon-remove
{:viewBox "0 0 32 32"}
[:title "remove"]
[:path
{:d "M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"}]])
(defn search-input [{:keys [title placeholder 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 "text"
:value @val
:auto-focus true
:placeholder placeholder
:size (if (> 20 (count (str @val)))
25
(count (str @val)))
:on-change #(do (reset! val (-> % .-target .-value))
(on-change %))
:on-key-down #(case (.-which %)
13 (do
(save)
(reset! val ""))
nil)}])))
(defn scroll! [el start end time]
(.play (fx/Scroll. el (clj->js start) (clj->js end) time)))
@ -47,4 +55,4 @@
(fn [{:keys [class]} child]
[:div {:class class :ref (fn [dom-node]
(reset! node dom-node))}
child])})))
child])})))