Fork me on GitHub
#reagent
<
2017-05-31
>
fabrao00:05:09

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

fabrao00:05:24

@gadfly361 Have you used it already?

gadfly36100:05:31

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 :)

fabrao00:05:08

did you used something like grid layout?

fabrao00:05:59

as I see it doesn´t have it

gadfly36100:05:04

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

fabrao00:05:30

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

fabrao00:05:42

*something

gadfly36100:05:10

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

fabrao00:05:27

thanks 4 ur help

fabrao01:05:07

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

gadfly36101:05:09

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.

fabrao01:05:54

ok, understood

pesterhazy07:05:42

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

osmirnov08:05:30

@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

pesterhazy08:05:50

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?

osmirnov08:05:35

[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

osmirnov08:05:03

Dependency tree, I think, it in jar.

osmirnov08:05:52

Version 0.2.39 have react 15.4.2

cl0jurian14:05:39

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

gadfly36115:05:11

@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

shaunxcode17:05:52

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)?

shaunxcode17:05:07

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

emil0r19:05:22

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?

gadfly36119:05:48

@emil0r Can you post code snippet?

emil0r19:05:44

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

emil0r19:05:20

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

emil0r19:05:39

in show-thumbnail2 i set the filepath as the key

emil0r19:05:55

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

emil0r19:05:29

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

gadfly36119:05:15

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

emil0r19:05:15

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

emil0r19:05:26

and you should have the example i’m working with

gadfly36119:05:57

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

emil0r19:05:10

any ideas on the messed up rendering when removing files?

gadfly36119:05:21

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

emil0r19:05:36

actually, you fixed that too it appears

gadfly36119:05:12

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

emil0r19:05:33

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

dimovich21:05:38

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?

gadfly36121:05:41

@dimovich here is an example ☝️

dimovich21:05:00

why different usage of key?

dimovich21:05:27

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

dimovich21:05:13

(looking at code from earlier discussions)

noisesmith22:05:21

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

noisesmith22:05:49

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

gadfly36122:05:22

@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)

gadfly36122:05:30

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

dimovich22:05:48

does this interfere with ratoms somehow?

noisesmith22:05:56

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

gadfly36122:05:04

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

rgdelato22:05:06

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

gadfly36122:05:52

@dimovich shouldn't interfere with ratoms

dimovich22:05:18

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

gadfly36122:05:21

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

dimovich22:05:46

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

dimovich22:05:18

I do deref the ratom inside the component

gadfly36122:05:59

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

noisesmith22:05:19

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

dimovich22:05:57

thanks, having a look

noisesmith22:05:17

@gadfly361 the into ensures that a doall would be redundant

gadfly36122:05:53

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

noisesmith22:05:05

it’s eager with eager types

noisesmith22:05:16

I think it only works with eager types though 😄

noisesmith22:05:35

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

florinbraghis22:05:27

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 ?

dimovich22:05:43

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

gadfly36122:05:36

@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) ")"]

      ]]))

gadfly36122:05:20

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

florinbraghis22:05:45

👍 @gadfly361 . thank you, will try it !