Fork me on GitHub
#reagent
<
2020-02-20
>
johanatan18:02:35

is anybody using react-popper in cljs ? can post a short example?

johanatan19:02:34

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)}]]]))]}]]

pcj22:02:25

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.

lilactown23:02:02

@pcj did you try setting the “muiName” property on WrappedBottomNavigationAction?

pcj23:02:17

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

lilactown23:02:24

yeah I guess the problem here is that Reagent creates an intermediary class that wraps the hiccup-returning-function

pcj23:02:37

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!

lilactown23:02:05

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.

pcj23:02:00

Oh yeah that does work. Does that have any broader implications other than ratoms not working?

lilactown23:02:54

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.

pcj23:02:22

Ahh that makes sense. Thank you!

lilactown23:02:05

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.