Custom styling for labels for Tabs about re-com HOT 10 CLOSED

This case is different from places where you are expecting label to a string or valid hiccup markup because in this you are expected to store that data inside an atom or a map.

from re-com.

How about this compromise?

Create a new parameter called :label-fn which defaults to :label. This function will be called with one parameter: a tab spec and it is expected to "extract" the appropriate string of hiccup for showing in the tab.

That would allow you to supply a label-fn which looked up the :id of the tab and then used it to generate necessary hiccup (etc). This approach is flexible but 100% backwards compatible (given this function defaults to :label)

While we are at it, should we also create an :id-fn parameter which defaults to :id.

from re-com.

Thats exactly what I had in mind. So the changes would be something like:

(let [id-fn       (or (:id-fn t)
                      (fn [x] (:id x)))
      label-fn    (or (:label-fn t) 
                      (fn [x] (:label x)))
      id          (id-fn t)
      label       (label-fn t)]
....

from re-com.

The nice thing about "named parameters" is that you can provide defaults.

So the default values for :label-fn would be :label

from re-com.

So this code:
https://github.com/Day8/re-com/blob/master/src/re_com/tabs.cljs#L20-L42

Would change to look like this (untested):

(defn horizontal-tabs
  [& {:keys [model tabs on-change label-fn id-fn]       ;;  <---   two added 
    :or   {label-fn :label id-fn :id}                      ;;  <---  added  defaults
      :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 %)) 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)                              ;; <--   change 
             label     (label-fn  t)                         ;; <---    change 
             selected? (= id current)]                   ;; must use current instead of @model to avoid reagent warnings
         [:li
          {:class  (if selected? "active")
           :key    (str id)}
          [:a
           {:style     {:cursor "pointer"}
            :on-click  (when on-change (handler-fn (on-change id)))
            }
           label]]))]))

from re-com.

ah of course. I was obviously doing the wrong thing.

Thanks!

from re-com.

I got the propsed changes working in my branch. Further changes:

1. Use id-fn in assert on Line 26.
2. Add the two arguments to tabs-args-desc.

I haven't modified the other tab styles but they would also be impacted by 2).

from re-com.

Thanks! We'll push a new version later today.

from re-com.

Thats great. Thanks @mike-thompson-day8!

from re-com.

Works in v0.5.0.

Thanks a lot!

from re-com.