gistfile1.txt

(ns css.components.tab
  (:require
   [cljs.test :refer-macros [is async]]
   [om.next :as om :refer-macros [defui]]
   [sablono.core :as sab :include-macros true]
   [reagent.core :as r])
  (:require-macros
   [devcards.core :as dc :refer [defcard deftest defcard-rg]]))

(defui Menu1
  Object
  (render
   [this]
   (sab/html
    [:div.menu1 "Menu1"])))

(defui Menu2
  Object
  (render
   [this]
   (sab/html
    [:div.menu2 "Menu2"])))

(def menu1 (om/factory Menu1))

(defui Tab
  static om/IQuery
  (query
   [this]
   '[:menus :active])

  Object
  (render
   [this]
   (sab/html
    (let [{:keys [menus active]} (om/props this)
          active-tab-content (-> menus active :content)]
      (prn active)
      [:div.tab
       ;; tab-header
       [:ul.tab-menu.list.list--horizontal
        (for [[k v] menus]
          ^{:key k}
          (let [active? (= k active)
                header-title (:header v)]
            [:li.tab-menu-item
             {:class (when active? "active")
              :on-click (fn [e]
                          (when (not active?)
                            (om/transact! this
                                          '[(change-active {:active :menu2})])
                            (.stopPropagation e)))}
             [:div.content
              [:div.title header-title]]]))]

       ;; tab-content
       [:div.tab-content
        {:style {:min-height "10rem"}}
        (active-tab-content)]]))))

(def state-clean {:active :menu1
                  :menus {:menu1 {:key :menu1
                                  :header "Menu1"
                                  :content (om/factory Menu1)}
                          :menu2 {:key :menu2
                                  :header "Menu2"
                                  :content (om/factory Menu2)}}})
(def state (atom state-clean))
(def om-tab (om/factory Tab))

(defn read
  [{:keys [state] :as env} key params]
  (let [st @state]
    (if-let [[_ value] (find st key)]
      {:value value}
      {:value :not-found})))

(defmulti tabs-mutate om/dispatch)
(defmethod tabs-mutate 'change-active
  [{:keys [state]} _ {:keys [active]}]
  {:value {:keys [:active]}
   :action (fn []
             (swap! state assoc :active active))})


(def parser (om/parser {:read read
                        :mutate tabs-mutate}))

(def r (om/reconciler
        {:state state
         :parser parser}))

;; testing
(deftest test-mutate-change-active
  "Test mutate change"
  (let [state (atom {:active :menu1})]
    (parser {:state state}
            '[(change-active {:active :menu2})])
    (is (= @state {:active :menu2}))))

;; devcard
(defcard om-tab
  (om/mock-root r Tab))