day8 / re-com

A ClojureScript library of reusable components for Reagent
https://re-com.day8.com.au
MIT License
796 stars 147 forks source link

Tabs and :class #184

Closed Dangercoder closed 5 years ago

Dangercoder commented 5 years ago

Hello,

Been using re-com for quite a lot of things on my website. Great stuff.

Having some issues with the "tabs"-component. the :class field is not working for me, it gives me an error in console.

(defn tabs
  []
  (let [selected-tab-id (reagent/atom (:id (first tabs-definition)))     ;; holds the id of the selected tab
        change-tab      #(reset! selected-tab-id %)
        fn-name-width   "240px"]
    [re-com/horizontal-tabs
     :model     selected-tab-id
     :tabs      tabs-definition
     :class "overview-tab"
     :on-change change-tab]))

validate.cljs?rel=1529844148409:22 Invalid argument(s): (:class)

Not really sure what im doing wrong..

Gregg8 commented 5 years ago

There's nothing wrong with that syntax. Are you sure the message is referring to this component? My gut feeling is that it's not.

Dangercoder commented 5 years ago

This is the code it's trying to run in my browser (Chrome), It's wierd because the class and attr parameters are missing. (From all methods in tabs.cljs). I am using [re-com "2.1.0"]

(defn horizontal-tabs
  [& {:keys [model tabs on-change id-fn label-fn style]
      :or   {id-fn :id label-fn :label}
      :as   args}]
  {:pre [(validate-args-macro tabs-args-desc args "tabs")]}
  (let [current  (deref-or-value model)
        tabs     (deref-or-value tabs)
        _        (assert (not-empty (filter #(= current (id-fn %)) tabs)) "model not found in tabs vector")]
    [:ul
     {:class "rc-tabs nav nav-tabs noselect"
      :style (flex-child-style "none")}
     (for [t tabs]
       (let [id        (id-fn  t)
             label     (label-fn  t)
             selected? (= id current)]                   ;; must use current instead of @model to avoid reagent warnings
         [:li
          {:class (if selected? "active")
           :key   (str id)}
          [:a
           {:style    (merge {:cursor "pointer"}
                             style)
            :on-click (when on-change (handler-fn (on-change id)))}
           label]]))]))
Gregg8 commented 5 years ago

Well that explains it. Version 2.1.0 didn't support :class...

https://github.com/Day8/re-com/blob/2.1.0/src/re_com/tabs.cljs#L18

but latest does...

https://github.com/Day8/re-com/blob/master/src/re_com/tabs.cljs#L18-L20