Hover style for om

hover.cljs

(def app-state {:boxes (vec (take 10 (repeat {:value 0})))})

(defn box [n owner]
  (reify
    om/IInitState
      (init-state [_] {:hovered false})
    om/IRenderState
      (render-state [_ {:keys [hovered]}]
        (dom/p #js {:onClick     (fn [e]
                                   (.preventDefault e)
                                   (om/transact! n :value inc))
                    :onMouseOver #(om/set-state! owner :hovered true)
                    :onMouseOut  #(om/set-state! owner :hovered false)
                    :style       #js {:padding  "10px 6px"
                                      :fontSize "18px"
                                      :margin   "1px 0"
                                      :backgroundColor (if hovered "#ff33aa" "#e2e2e2")}}
               (:value n)))))

(om/root
  (fn [app-state owner]
    (reify
      om/IRender
      (render [_]
        (apply dom/div {}
               (dom/h1 {} (str "Total: "
                               (reduce + (map :value (:boxes app-state)))))
               (om/build-all box (:boxes app-state))))))
  app-state
  {:target (. js/document (getElementById "app"))})