This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-02-20
Channels
- # announcements (42)
- # babashka (70)
- # beginners (152)
- # chlorine-clover (19)
- # cider (14)
- # clj-kondo (23)
- # clojars (15)
- # clojure (86)
- # clojure-denmark (1)
- # clojure-dev (5)
- # clojure-europe (57)
- # clojure-france (145)
- # clojure-hungary (2)
- # clojure-italy (5)
- # clojure-nl (7)
- # clojure-spec (35)
- # clojure-sweden (2)
- # clojure-uk (58)
- # clojurebridge (1)
- # clojured (1)
- # clojurescript (50)
- # core-typed (9)
- # cursive (10)
- # data-science (11)
- # datascript (4)
- # datomic (25)
- # emacs (8)
- # fulcro (49)
- # graalvm (7)
- # graphql (6)
- # joker (1)
- # juxt (2)
- # kaocha (1)
- # off-topic (22)
- # other-lisps (1)
- # pathom (20)
- # re-frame (3)
- # reagent (11)
- # reitit (2)
- # remote-jobs (1)
- # shadow-cljs (44)
- # spacemacs (2)
- # sql (17)
- # tree-sitter (2)
- # vim (8)
- # vrac (2)
to answer my own question (for the archives):
[popper/manager
[popper/reference
{:children
#js [(fn [obj]
(r/as-element
[:div
{:ref (.-ref obj)}
[your-component ... ]]))]}]
[popper/popper
{:placement "left"
:children
#js [(fn [obj]
(r/as-element
[:div {:ref (.-ref obj) :style (.-style obj) :data-placement (.-placement obj)}
[:<> "Popper element" [:div {:ref (.. obj -arrowProps -ref)
:style (.. obj -arrowProps -style)}]]]))]}]]
Has anyone wrapped MaterialUI components successfully? I am looking at this https://material-ui.com/guides/composition/#wrapping-components and I can't seem to get it to work...
(defn WrappedBottomNavigationAction [props]
[:> BottomNavigationAction props])
(defn BottomNavigationTest []
[:> BottomNavigation {:show-labels true}
[:> BottomNavigationAction {:label "hello" :icon "x"}] ;; Works
[WrappedBottomNavigationAction {:label "hello2" :icon "y"}] ;; Doesn't
])
For my example, BottomNavigation's :show-labels
is passed down as :show-label true
for the first action but not the second.Thanks for the response! I've tried doing that similar to this: https://clojurians-log.clojureverse.org/reagent/2017-01-31 but I wasn't able to get it to work
yeah I guess the problem here is that Reagent creates an intermediary class that wraps the hiccup-returning-function
That's what I'm guessing too going through the reagent code. Luckily it's not a must have for what I am doing but looking at some of the material ui wrappers it doesn't seem like any of them have an example of this problem unlike the TextField cursor stuff that was a pain to figure out. Anyway, thanks!
sure thing. FWIW you could probably get away with calling the function directly (WrappedBottomNavigationAction {:label "hello2" :icon "y"})
as long as you’re not derefing any ratoms inside of it.
Oh yeah that does work. Does that have any broader implications other than ratoms not working?
basically, anything that integrates with a component lifecycle won’t work how you would expect. it is essentially the same thing as inlining the body of the function in whatever component you call it in.