Comments (10)
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:
- Use
id-fn
in assert on Line 26. - 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.
Related Issues (20)
- Filter issue when using hiccup for labels in multi-select
- Check-box styling is overridden by browser instead of bootstrap HOT 2
- disabled list should not show on hover background HOT 2
- Conflicting documentation in splits HOT 1
- Datepicker header height increases when a disabled next or previous year button is displayed HOT 1
- Missing icons? HOT 1
- Pass event to popover :on-cancel
- status icon :error has incorrect zmdi-spinner in class
- v-table scrollbar thumb colors are hardcoded (potential PR)
- reagent 1.2.0 reagent.dom/dom-node is deprecated HOT 1
- Bizarre issue with the typeahead component HOT 1
- enhancement: Support :enabled? prop on tab components HOT 1
- horizontal-bar-tabs: Suppress redundant on-click handler calls HOT 3
- Unknown parameter: :parts in tree-select
- Re-com won't build with figwheel-main fig:min HOT 4
- v-table reset! on hover? fails in 2.21.0 but ok in 2.19.0
- simple-v-table: rendering issue/breakage in 2.21.3
- recent changes to v-table still has rendering issues in 2.21.4 HOT 1
- Disabled background colour should be grey in single-dropdown
- Tree Select Dropdown doesn't allow outside clicks HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from re-com.