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

Make todomvc a little cleaner

This commit is contained in:
Dan Holmsand 2013-12-17 12:25:48 +01:00
parent f00f6e3334
commit 08d082e365
1 changed files with 21 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
examples/todomvc/src/todomvc.cljs
View File

@ -13,29 +13,30 @@
(if-not (empty? v) (on-save v)) (if-not (empty? v) (on-save v))
(stop)))] (stop)))]
(fn [props] (fn [props]
(let [p {:type "text" :value @val :on-blur save [:input (merge props
{:type "text" :value @val :on-blur save
:on-change #(reset! val (-> % .-target .-value)) :on-change #(reset! val (-> % .-target .-value))
:on-key-up #(case (.-which %) :on-key-up #(case (.-which %)
13 (save) 13 (save)
27 (stop) 27 (stop)
nil)}] nil)})])))
[:input (cloact/merge-props props p)]))))
(def todo-input (with-meta todo-input-render (def todo-input (with-meta todo-input-render
{:component-did-mount #(.focus (:dom-node %))})) {:component-did-mount #(.focus (:dom-node %))}))
(defn todo-item [{:keys [todo editing is-editing (defn todo-item [{:keys [todo on-toggle on-save on-destroy]} this]
on-toggle on-save on-destroy]}] (dbg "Rendering item")
(dbg "rendering item") (let [{:keys [id done title]} todo
(let [{:keys [id done title]} todo] {:keys [editing]} @this]
[:li {:class (str (if done "completed ") (if is-editing "editing"))} [:li {:class (str (if done "completed ")
(if editing "editing"))}
[:div.view [:div.view
[:input.toggle {:type "checkbox" :checked done :on-change on-toggle}] [:input.toggle {:type "checkbox" :checked done :on-change on-toggle}]
[:label {:on-double-click #(reset! editing id)} title] [:label {:on-double-click #(swap! this assoc :editing true)} title]
[:button.destroy {:on-click on-destroy}]] [:button.destroy {:on-click on-destroy}]]
(when is-editing (when editing
[todo-input {:class "edit" :title title :on-save on-save [todo-input {:class "edit" :title title :on-save on-save
:on-stop #(reset! editing nil)}])])) :on-stop #(swap! this assoc :editing false)}])]))
(defn todo-stats [{:keys [filter clear]}] (defn todo-stats [{:keys [filter clear]}]
(let [props-for (fn [name] (let [props-for (fn [name]
@ -67,14 +68,13 @@
(defn complete-all [todos v] (swap! todos mod-map map #(assoc-in % [1 :done] v))) (defn complete-all [todos v] (swap! todos mod-map map #(assoc-in % [1 :done] v)))
(defn clear-done [todos] (swap! todos mod-map remove #(get-in % [1 :done]))) (defn clear-done [todos] (swap! todos mod-map remove #(get-in % [1 :done])))
(defn todo-main [props] (defn todo-app [props]
(let [todos (or (:todos props) (let [todos (or (:todos props)
(let [t (atom (sorted-map))] (let [t (atom (sorted-map))]
(dotimes [x 5] (dotimes [x 5]
(add-todo t (str "Some todo " x))) (add-todo t (str "Some todo " x)))
t)) t))
filt (atom :all) filt (atom :all)]
editing (atom nil)]
(fn [] (fn []
(let [items (vals @todos) (let [items (vals @todos)
done (->> items (filter :done) count) done (->> items (filter :done) count)
@ -82,9 +82,8 @@
pred (case @filt pred (case @filt
:active (complement :done) :active (complement :done)
:done :done :done :done
:all identity) :all identity)]
curedit @editing] (dbg "Rendering main")
(dbg "rendering main")
[:section#todoapp [:section#todoapp
[:header#header [:header#header
[:h1 "todos"] [:h1 "todos"]
@ -97,8 +96,7 @@
[:label {:for "toggle-all"} "Mark all as complete"] [:label {:for "toggle-all"} "Mark all as complete"]
[:ul#todo-list [:ul#todo-list
(for [{id :id :as todo} (filter pred items)] (for [{id :id :as todo} (filter pred items)]
[todo-item {:key id :todo todo :editing editing [todo-item {:key id :todo todo
:is-editing (= curedit id)
:on-save (partial save todos id) :on-save (partial save todos id)
:on-toggle (partial toggle todos id) :on-toggle (partial toggle todos id)
:on-destroy (partial delete todos id)}])]] :on-destroy (partial delete todos id)}])]]
@ -108,8 +106,5 @@
[:footer#info [:footer#info
[:p "Double-click to edit a todo"]]])))) [:p "Double-click to edit a todo"]]]))))
(defn todo-app []
[todo-main])
(defn ^:export run [] (defn ^:export run []
(cloact/render-component [todo-app] (.-body js/document))) (cloact/render-component [todo-app] (.-body js/document)))