Fork me on GitHub
#reagent
<
2017-07-20
>
ag00:07:22

this is probably noob question, how do I simplify following construct:

[:div.my-list
     (map (fn [i] [ui-item i]) ["foo" "bar" "zap"])]
Why simply doing:
[:div.my-list
     (map ui-item ["foo" "bar" "zap"])]
Doesn't work?

gadfly36101:07:39

@ag as written, that should work. The only reason it wouldn't is because of the difference between ( ... ) and [ ... ] calls in reagent. For example:

;; Option A (Fails)

(defn foo [i]
  ^{:key i}
  [:div i])

(defn page []
  (map foo (range 10)))

(reagent/render [page]
                (.getElementById js/document "app"))


;; Option B (Works)

(defn foo [i]
  ^{:key i}
  [:div i])

(defn page []
  [:div ;; <-- wrapped in a div, which means page will return a reagent component instead of just a list
  (map foo (range 10))])

(reagent/render [page]
                (.getElementById js/document "app"))

gadfly36101:07:23

so i would guess if your example isn't working, the problem is elsewhere, perhaps in ui-item itself?

ag01:07:21

ui-item looks like this:

(defn ui-text-input-field
  [props]
  (let [local-state (reagent/atom {})]
    (fn [props]
          [:label ,,,, ;etc])))

ag01:07:23

oh wait... it seems working.. hmmm. I guess I had problem somewhere else upd: turn out it didn't ;( so I couldn't solve it without wrapping it in a vector inside a fn

minikomi04:07:48

What are people using for enter/exit animations on elements? reanimated ? react-motion ?

mikethompson04:07:54

We use react-flip-move

minikomi04:07:32

ooh another contender

mikethompson04:07:14

I can tell you: 1. react-flip-move is crazy easy to use 2. I haven't looked at the others (because of 1)

minikomi04:07:25

I’m just looking to have a side-menu slide in/out.. maybe react-transition-group is enough

genec12:07:32

before I spend time on this; could anyone provide feedback on this template for reagent / electron projects? Thanks! https://github.com/karad/lein_template_descjop

gonewest81816:07:17

I’m experimenting with cljs in a project generated by the martinklepsch/tenzing template. I’ve added in reagent and reactstrap via gadfly361/baking-soda.

gonewest81816:07:22

My question is about workflow.

gonewest81816:07:33

If I edit a component in emacs and save, then the boot pipeline recompiles and the browser reloads as expected.

gonewest81816:07:24

But if I edit the component in a buffer and re-evaluate in the repl ( cider-eval-last-sexp) there’s no reload, I imagine because boot-cljs has no idea anything changed.

gonewest81816:07:40

It looks like I can force a re-render in the repl by evaluating (init) in the namespace where the component is defined, which essentially does a (reagent/render-component [my-component] (.getElementById js/document "container"))… Is that what people do?

gonewest81816:07:42

Or is the typical practice just to save the buffer and let the build/reload machinery do the thing?

mattly16:07:47

@gonewest818 I think it depends on how you prefer to work; I personally prefer to let the build/reload machinery do its thing

mattly16:07:26

and you're right basically about boot not knowing that anything has changed; it watches files, and from its perspective, nothing has changed

mattly16:07:00

even if you could hook it up to an editor's buffers somehow, I'm not sure that's a good idea

gonewest81817:07:48

Gotcha. Is there a more subtle/sophisticated way to force a ‘redraw’ manually from the repl besides what I’m doing with reagent/render-component?