Fork me on GitHub
#reagent
<
2018-03-07
>
camachom03:03:28

Anyone using reagent-forms? Wondering how to dynamically change HTML classes of a component based on state changes.

sonnyto12:03:10

I haven't used reagent-form but changing a class dynamically based on state would be the same as with any other property. what problem are you having?

camachom16:03:38

The two way data binding hides direct access access to state.

sonnyto16:03:43

sorry i dont know enough about reagent-forms ... i did not know reagent even allows two way data biding

sonnyto16:03:17

from my understanding changes only flow in one direction not two

sonnyto16:03:43

maybe my understanding is wrong so i can't help you with this if two way databinding is possible

camachom16:03:13

The only work around I can think of is making the state global, but I think it defeats the purpose of using bind-fields

sonnyto16:03:45

i put my state in a global atom

sonnyto16:03:49

that should not be a problem

sonnyto16:03:05

all my state is in a single global atom

sonnyto16:03:23

i use cursor and reaction to prevent recalculation

camachom16:03:04

Yeah I'll have to give it a try. Thanks!

sonnyto16:03:30

not sure if that helps... i never knew data binding can happen bidirectionally in reagent

sonnyto16:03:52

i always thought changes flow in one direction only

camachom16:03:44

i might be not using the proper term. but checkout the library. i think thats what it implies

sonnyto12:03:00

I'm trying to dynamically load reagent components in bootstrap cljs

justinlee15:03:47

@sonnyto what do you mean you want to load components “dynamically”?

justinlee15:03:06

are you talking about progressive web aps and code splitting and all of that?

sonnyto15:03:24

@lee.justin.m take a look at http://webtop.stigmergy.systems/ . open the cljs shell

sonnyto15:03:51

I want to require a package in that shell and have the cljs code loaded at run time

sonnyto16:03:39

i tried code splitting but it only works within a project. i want to load any abitrary js/cljs code from any URL

sonnyto16:03:48

dynamically

sonnyto16:03:51

either through xhr

sonnyto16:03:01

or by appending script tag

sonnyto16:03:33

but first I want require to dynamically load code

sonnyto16:03:17

for example, in that cljs shell type in (require '[demo.paint])

sonnyto16:03:19

that will fail

sonnyto16:03:25

cuz it depends on reagent code

sonnyto16:03:46

but something that doesnt depend on reagent code like (require '[demo.tiger]) will work

sonnyto16:03:57

the problem is with macros

sonnyto16:03:12

have to rewrite the macros to work in cljs and not in clj

sonnyto16:03:21

was wondering if someone did this already

justinlee16:03:30

you already know more about this than i do. i haven’t messed with self-hosted code and i don’t know what is involved to make it work

justinlee16:03:09

the only reason why i can think of why someone might run reagent on a self-hosted environment already would be for server side rendering. but i haven’t heard anybody talk about doing that here.

sonnyto16:03:15

thanks for asking though

justinlee16:03:25

have you asked a more generic question in #clojurescript yet? if you can ask something specific, mfikes might be able to help.

sonnyto16:03:54

i'll try that next if i dont get any other feedback. thanks!

sonnyto16:03:15

I will check it out later. thanks for the suggestion

joshkh18:03:56

does anyone have any experience with react-transition-group? i'm trying to create a component that fades out its single child and fades in the new one. regardless of :transition-*-timeout properties, both the old and new child appear in the div for whatever period of time i define, and this causes the content to briefly appear stacked rather than 1) fade out the old one and then 2) fade in the new. is this something i can control directly with css-transition-group?

joshkh18:03:40

(backup plan is to give each child absolute positioning to stack them but it's not ideal)

mattboehm20:03:50

I would use absolute positioning. I don't thing transition-groups are designed to accomplish that.

joshkh20:03:49

okie dokie, thanks for confirming that.

joshkh20:03:55

my non-absolute positioning workaround is to delay the rendering of new children:

:component-will-receive-props
       (fn [this]
         (reset! children nil)
         (js/setTimeout (fn [] (reset! children (r/children this))) animation-length))

justinlee20:03:18

@joshkh why not create a container component that handles the transition?

joshkh20:03:34

if i understand what you mean then i think that's what i have:

(defn transition-container []
  (let [children (r/atom nil)]
    (r/create-class
      {:component-will-mount
       (fn [this] (reset! children (r/children this)))
       :component-will-receive-props
       (fn [this]
         (reset! children nil)
         (js/setTimeout (fn [] (reset! children (r/children this))) 1))
       :reagent-render
       (fn []
         (into [css-transition-group
                {:class-name               "transition-container"
                 :component                "div"
                 :transition-name          "some-transition"
                 :transition-enter-timeout 0
                 :transition-leave-timeout 0}]
               (map (fn [c]
                      ^{:key (str "transistor-" (:key (meta c)))}
                      [:div.transistor-item c]) @children)))})))

joshkh20:03:47

the 1ms timeout is because, in the end, i went with absolute positioning 😉

justinlee20:03:32

yea that’s basically where my mind went

joshkh20:03:16

the only problem i can foresee is that i think timeouts and intervals drop resolution when the window is not in focus, so it's possible that the timeout could outrun the leaving transition animation. shrug!

mattboehm20:03:45

It's better than the hack I would have done, fwiw =P.

joshkh20:03:34

i'm open to suggestions 😉

mattboehm20:03:26

I meant that I haven't developed the impulses/experience to make good reusable components, so I probably would have just used css to absolutely position the elements on top of each other and toggle which one has a .hidden class.

joshkh20:03:20

that's basically where i landed. as for reusable components, that's the whole point of react/reagent!

mattboehm20:03:00

Yep, I know, working on it =P. Have still reaped the benefits of figwheel and like expressing dom elements in code rather than html/templates, but still feel like I need to find better things to abstract out of my code

joshkh20:03:29

it's pretty fantastic when you get a hang of it. i went from js to clj without ever touching react and then recently had to build a vanilla react project. it was a nightmare.

mattboehm20:03:25

Right now, my codebase feels a lot like an old C program, with a lot of the state stored globally (in a single ratom) and a bunch of small procedural calls. Almost all the calls are functionally pure, but I'm still slowly coming around to making reusable components that store their own state instead

mattboehm20:03:51

er s/calls/functions

joshkh21:03:20

have you checked out something like re-frame?

mattboehm21:03:26

@joshkh Yeah, really like the ideas in it. Just need to schedule the time and get over the fact that my code will be broken for a while as I rewrite large chunks 😃.