Fork me on GitHub
#reagent
<
2017-06-01
>
jtth00:06:09

Has anyone done a reagent/react wrapper around Google’s Material Design components? https://github.com/material-components/material-components-web/tree/master/framework-examples/react?

cl0jurian05:06:44

Do you know any library or sample project which I can refer to implement reagent to fetch GraphQL ?

mihaelkonjevic06:06:03

@cl0jurian I wrote a GraphQL library for ClojureScript - https://github.com/retro/graphql-builder/ . We use it successfully with our Keechma / Reagent apps. Yesterday I’ve published a demo that shows how to use it with some advanced features like query composition. You can find the source code here https://github.com/keechma/example-dataloader-graphql and the walkthrough video here https://www.youtube.com/watch?v=dZaY1kZwpmw .

cl0jurian06:06:17

mihaelkonjevic: Awesome, I will take a look. Thank you !

danielgrosse06:06:23

I'm using react-bootstrap-table with reagent and currently trying to realize the expanding columns. This is done with an function which returns an component. That function is provided as a prop to the BootStrapTable Compontent. But this don't work with reagent, as the component isn't converted into a react class. So react complains about the invalid react child. How can I manually create the react class from the hiccup structure?

gadfly36107:06:39

Take a look at Simple React Integration

florinbraghis10:06:40

Hi ! When I do a swap! on a ratom, does that immediately lead to the component which dereferences that ratom being re-rendered? Or is it done on the next 'tick' (if that's a thing in the browser/react) ? In other words, if I do several swap! operations on the same ratom one after another in the same function, does that lead to my component being re-rendered multiple times ?

florinbraghis10:06:35

👍 @mihaelkonjevic: Thank you, exactly what I needed !

dimovich13:06:48

is this the right way of creating re-frame subs to access some inner data?

gadfly36123:06:35

@cl0jurian Hmm, I am no experiencing that... I updated the code to some dummy strings (since I don't have access to one-map) and the modal looks normal

[sa/Modal
    {:trigger (reagent/as-element [sa/Header "Trigger"])}
    [sa/ModalHeader "Modal Header"]
    [sa/ModalContent
     {:image true}
     [sa/Image {;:wrapped true
                :size "large"
                :src  ""}]
     [sa/ModalDescription
      [sa/Header "Modal Title"]
      [:p "Modal Body"]
      ]]]

gadfly36123:06:55

I am on linux using chrome Version 57.0.2987.133 (64-bit)

cl0jurian23:06:52

@gadfly361 oops sorry I forgot to mention this section of code is running within a for function. (for [one-map news] [ ... ] ) Would that be the reason to cause this behavior, do you think?

gadfly36123:06:35

@cl0jurian I just tried it, and didn't experience it. Though I am iterating over a seq of numbers. I am curious if one-map being a javascript / mutable object matters .. i wouldn't think so, but that is a difference. When you say the modal bounces, it seems like multiple triggers of the modal are firing...or perhaps multiple modals? I am not sure tho.

(for [i (range 10)]
     ^{:key i}
     [sa/Modal
      {:trigger (reagent/as-element [sa/Header (str "Trigger" i)])}
      [sa/ModalHeader (str "Modal Header" i)]
      [sa/ModalContent
       {:image true}
       [sa/Image {;:wrapped true
                  :size "large"
                  :src  ""}]
       [sa/ModalDescription
        [sa/Header (str "Modal Title" i)]
        [:p (str "Modal Body" i)]
        ]]])

cl0jurian00:06:52

@gadfly361 I get this weird behavior on chrome and firefox both on win 10 (64bit).

gadfly36100:06:27

@cl0jurian Just curious, but if you replace your for loop with the one i provided, does the bouncing still happen?