Hello all, do you know a good Material-ui reagent components?

@fabrao https://github.com/madvas/cljs-react-material-ui

@gadfly361 Have you used it already?

I have used it in production and enjoyed it. It does take control of your react version which is annoying, but outside of that it works well :)

did you used something like grid layout?

as I see it doesn´t have it

I didnt use it for anything related to layout, i managed that separately

how do you use something like side by side elements or somethink responsive?

*something

I predominantly use flexbox for things like that: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

HUMMMMM

thanks 4 ur help

Np

but doesn´t flexbox too new? IE 10 does not support it

Really depends on your target audience and if you want to support old versions of IE .. if you do, then using a grid layout from a css framework may be more up your alley. Ive found if i avoid using flexbox to stretch things vertically, i dont get bitten by ie too bad...but i also am not trying to explicitly support ie10 and below either for most things i work on.

ok, understood

@gadfly361 what do you mean by "takes control of your react version"?

@pesterhazy As I noticed, cljs-react-material-ui carries its own version of the react, that loads when I require it in ns, for example, in deps I have reagent 0.6.1 with react 15.4.2 and cljs-react-material-ui 0.2.44 (this version have own react 15.5.4), if I exclude cljsjs.react in reagent, react will be loaded throw mui and have 15.5.4 version, simple check with React.version

so the issue is that cljs-react-material-ui has its own dependency on cljsjs.react? Or does it actually include it in the jar?

[INFO] +- cljs-react-material-ui:cljs-react-material-ui:jar:0.2.39:compile
[INFO] |  +- (org.clojure:clojure:jar:1.8.0:compile - omitted for conflict with 1.9.0-alpha14)
[INFO] |  +- (org.clojure:clojurescript:jar:1.8.40:compile - omitted for conflict with 1.9.518)
[INFO] |  +- cljsjs:material-ui:jar:0.17.1-0:compile
[INFO] |  \- camel-snake-kebab:camel-snake-kebab:jar:0.4.0:compile

Dependency tree, I think, it in jar.

Version 0.2.39 have react 15.4.2

Hi do you know any library or sample project which I can refer to implement reagent to fetch "GraphQL" ? Let me know please.

@pesterhazy im not sure which, i just remember trying to change the react version from whatever cljs-react-material-ui comes with and not having any luck at the time

anyone using reagent and dealing with perf issues for larger transactions (say transacting facts about 50+ entities which do indeed all correspond to a posh pull and subsequent reagent component)?

Just wondering if this is considered outside the wheelhouse of what it is intended for

I’m getting react errors complaining about a missing :key prop when mapping over a number of components. The components in question all have unique keys. Any idea of what’s going on?

@emil0r Can you post code snippet?

at line 108 i map over show-file. in this case it’s just a list of strings pointing to images already pre-loaded

so i will get a lazy sequence back composed of [show-thumbnail2 field form-options c file]

in show-thumbnail2 i set the filepath as the key

I also have a weird bug where removing files with the callback messes with the rendering. the ratom is properly updated, but the pictures are not

if it rings a bell for anyone i’d be happy to see some pointers 🙂. otherwise i’ll continue to wrestle with it

gunna see if i can strip this down to a smaller example and maybe give some thoughts

https://github.com/emil0r/ez-form is the repo

lein figwheel and surf locally from the resources/public/index.html

and you should have the example i’m working with

@emil0r this will remove the error (but i am using gensym to make arbitary keys ... so instead replace that with your own)

(defmulti show-file (fn [field form-options c file]
                      (cond
                        (string? file) :image
                        :else (.-type file))))
(defmethod show-file "image/jpeg" [field form-options c file]
  ^{:key (gensym)} [show-thumbnail field form-options c file])
(defmethod show-file "image/png" [field form-options c file]
  ^{:key (gensym)} [show-thumbnail field form-options c file])
(defmethod show-file "image/gif" [field form-options c file]
  ^{:key (gensym)} [show-thumbnail field form-options c file])
(defmethod show-file :image [field form-options c file]
  ^{:key (gensym)} [show-thumbnail2 field form-options c file])
(defmethod show-file :default [_ _ c file]
  (let [[size suffix] (get-size file)]
    ^{:key (gensym)}[:div.preview {:key (.-name file)}
     [:div.details
      [:div.size [:span [:strong size] " " suffix]]
      [:div.name [:span (.-name file)]]]
     [:div.remove {:on-click (cb-remove-file c file)}
      (*t* *locale* ::remove-file)]]))

right

thanks

np

any ideas on the messed up rendering when removing files?

unfortunately i gotta run for now, but hopefully someone will take a peak 🙂

actually, you fixed that too it appears

ha well that's a fortunate side effect, guess react needed to know the key to track the item

yeah

big thanks. spent a day on trying to fix that >_>

no problem!

hello all

if I want to create a react Dimmer (from soda-ash for example) from inside a :on-click event of some div, how would I do it?

@dimovich here is an example ☝️

@gadfly361 thanks!

np!

why different usage of key?

^{:key id) as meta vs. {:key id} as prop

(looking at code from earlier discussions)

metadata isn’t data that drives rendering, in this context it’s used so that react can keep track of which element is which even as contents are updated

(so it can differentiate “this thing moved” from “this thing is completely different now”)

@dimovich

(def some-list (range 10))

   ;; Get warning: Every element in a seq should have a unique key
   (map (fn [i]
          [:div i]) some-list)

   ;; No warning
   (map (fn [i]
          [:div {:key i} i]) some-list)

   ;; No warning
   (map (fn [i]
          ^{:key i}
          [:div i]) some-list)

either should work, often times it is just a matter of incorrect placement when using the key attribute (i always use metadata ... just habit)

@noisesmith @gadfly361 thanks

does this interfere with ratoms somehow?

@gadfly361 oh, nice, I didn’t realize putting a :key in the props worked like that

@noisesmith I didn't really either, just had seen it in other's code ... so just tested it out and works

in normal JS React, you have to pass key as a prop, so I just kind of assumed that it worked here too

@dimovich shouldn't interfere with ratoms

@gadfly361 👍 good

using devcards now, and sometimes a change in ratom doesn't trigger an update, was thinking maybe somehow related

Shot in the dark, but are you derefing the ratom in the component?

https://github.com/dimovich/coverton/blob/master/src/devcards/coverton/devcards.cljs

sometimes font-picker won't update, even though inspect-data is showing the change

I do deref the ratom inside the component

another shot in the dark (likely wont matter), but try wrapping the for in your component with a doall instead of wrapping the stuff inside the for with a do

https://github.com/dimovich/coverton/blob/master/src/cljs/coverton/components.cljs#L175-L176

yeah - all do inside for does is let you do things for side effects and throw away the values

thanks, having a look

@gadfly361 the into ensures that a doall would be redundant

ah so into is eager then? i wasn't sure

it’s eager with eager types

I think it only works with eager types though 😄

gotcha

eg. in this case there’s no such thing as a lazy vector, so the into can’t be lazy

Hello everyone ! So I have a bunch of ratoms, which contain boolean values. I'd like to create a new ratom which will contain true when all of the ratoms are true and false when either is false ? Should I look into reaction ?

maybe add watch on ratoms to update a set in the second ratom

https://clojuredocs.org/clojure.core/add-watch

@florinbraghis try track

(defonce ratom1
  (reagent/atom false))

(defonce ratom2
  (reagent/atom false))


(defn all-true? []
  (and @ratom1
       @ratom2))

(defn page []
  (let []
    [:div

     [:h1
      "All true? " (str @(reagent/track all-true?))]

     [:div
      [:button
       {:on-click #(reset! ratom1 (not @ratom1))}
       "Toggle ratom1 (" (str @ratom1) ")"]

      [:button
       {:on-click #(reset! ratom2 (not @ratom2))}
       "Toggle ratom2 (" (str @ratom2) ")"]

      ]]))

Here are some more notes on track: https://reagent-project.github.io/news/news060-alpha.html

I have never used it tho, so perhaps it is the wrong tool for the job

wow nice

👍 @gadfly361 . thank you, will try it !