Clojurians Log v2

I’m playing with reagent and have tried implementing a simple tabs component which receives a specification of tabs to render and manages the display of the appropriate pane, as you’d expect. For the most part it works fine; but I’ve now made the tab labels components, and noticed that they’re not reactively re-rendering.

The implementation looks like this:

(defn tab-control [{:keys [id label] :as tab-opts}]
  [:<> [:input (assoc tab-opts
                      :type :radio)]
   [:label {:for id} label]])

(defn tabs [{:keys [name default-tab tabs]} tab-panes]
  (let [selected-tab (r/atom default-tab)]
    (fn [{:keys [name default-tab tabs]} tabs-panes]
      (let [tab-controls (vec (cons :span.tab-controls
                                    (mapv (fn [tab-id]
                                            (let [{:keys [label]} (get tab-panes tab-id)]
                                              [tab-control {:id tab-id
                                                            :name name
                                                            :label label
                                                            :value tab-id
                                                            :checked (= tab-id @selected-tab)
                                                            :on-change #(reset! selected-tab tab-id)}]))
                                          tabs)))
            selected-tab-pane (:pane (get tab-panes @selected-tab))]
        [:div.tabs
         tab-controls
         [:div.tab-pane {}
          selected-tab-pane]]))))

(let [{:keys [errors appends deletes corrections]} @state]
  [tabs {:default-tab :errors
         :name :change-type
         :tabs [:errors :appends :deletes :corrections]}
   {:errors {:label [:<> "Errors (" (count errors) ")"]
             :pane [:h1 "Errors"]}
    :appends {:label [:<> "Appends"]
              :pane [:h1 "Appends"]}
    :deletes {:label [:<> "Deletes"]
              :pane [:h1 "Deletes"]}
    :corrections {:label [:<> "Corrections"]
                  :pane [:h1 "Corrections"]}}])