minimal repro

minimal_repro.cljs

(ns data-analytics-web.views
    (:require [re-frame.core :as re-frame]
              [clojure.set :refer [rename-keys]]
              [reagent.core :as reagent]
              [reagent.ratom :as ratom]
              [clojure.string :refer [upper-case lower-case]]
              [goog.string :as gstring]
              [re-frame.db :refer [app-db]]
              [re-com.core :as re-com]))

;; home

(defn home-title []
  (let [name (re-frame/subscribe [:name])]
    (fn []
      [re-com/title
       :label (str "Hello from " @name ". This is the Home Page.")
       :level :level1])))

(defn link-to-about-page []
  [re-com/hyperlink-href
   :label "go to About Page"
   :href "#/about"])

(defn wk [styles]
  (let [attrs [:flex :flex-flow :align-items :align-self :justify-content :user-select]
        mapping (zipmap attrs (map (fn [a] (keyword (str "-webkit-" (name a)))) attrs))]
    (merge styles (rename-keys (select-keys styles attrs) mapping))))

(defn inner [label on-click]
  (let [hovered? (reagent/atom false)]
    (fn []
      [re-com/label :label label
       :style {:background-color (if @hovered? "#ffffff" "rgb(0,0,0,0)")}
       :attr {:on-mouse-over #(reset! hovered? true)
              :on-mouse-leave #(do (js/console.log "left") (reset! hovered? false))
              :on-click on-click}])))

(defn lower [name]
  (let [selected (reagent/cursor app-db [:selected])
        added? (ratom/reaction (contains? @selected name))]
    (fn []
      [inner ((if @added? upper-case lower-case) name)
       #(swap! selected (if @added? disj conj) name)])))

(defn middle [name content]
  (let [hovered? (reagent/atom false)]
    (fn []
      [re-com/v-box
       :attr {:on-mouse-over #(reset! hovered? true)
              :on-mouse-leave #(reset! hovered? false)}
       :style {:width "308px" :height "353px" :margin-right "13px" :margin-bottom "13px"
               :background-color (if @hovered? "#aaffaa" "#ffaaaa") :padding "20px 20px 10px" :overflow "hidden"}
       :children [[re-com/label :label name]
                  [re-com/h-box
                   :style (wk {:align-self "center"})
                   :children content]]])))

(defn format
  "Formats a string using goog.string/format."
  [fmt & args]
  (apply gstring/format fmt args))

(defn outer []
  [re-com/h-box
   :style (wk {:width "1150px" :height "100%" :flex-flow "row wrap" :justify-content "center"})
   :children (mapv (fn [kwd]
                     ^{:key (format "comp-%s" (name kwd))}
                     [middle (name kwd)
                      [[lower (name kwd)]]]) [:blah :blaz :blahz :blahhhz])])

(defn home-panel []
  [re-com/v-box
   :gap "1em"
   :children [[home-title] [link-to-about-page]
              [outer]]])

;; about

(defn about-title []
  [re-com/title
   :label "This is the About Page."
   :level :level1])

(defn link-to-home-page []
  [re-com/hyperlink-href
   :label "go to Home Page"
   :href "#/"])

(defn about-panel []
  [re-com/v-box
   :gap "1em"
   :children [[about-title] [link-to-home-page]]])


;; main

(defmulti panels identity)
(defmethod panels :home-panel [] [home-panel])
(defmethod panels :about-panel [] [about-panel])
(defmethod panels :default [] [:div])

(defn show-panel
  [panel-name]
  [panels panel-name])

(defn main-panel []
  (let [active-panel (re-frame/subscribe [:active-panel])]
    (fn []
      [re-com/v-box
       :height "100%"
       :children [[panels @active-panel]]])))