This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-03-07
Channels
- # aleph (4)
- # arachne (2)
- # aws (2)
- # beginners (42)
- # boot (4)
- # cider (47)
- # cljs-dev (352)
- # clojure (278)
- # clojure-dusseldorf (6)
- # clojure-italy (6)
- # clojure-russia (1)
- # clojure-spec (15)
- # clojure-uk (94)
- # clojurescript (197)
- # community-development (34)
- # cursive (3)
- # data-science (1)
- # datomic (64)
- # emacs (3)
- # figwheel (16)
- # fulcro (7)
- # hoplon (5)
- # jobs (3)
- # luminus (3)
- # mount (2)
- # nyc (1)
- # off-topic (31)
- # onyx (22)
- # parinfer (1)
- # protorepl (7)
- # re-frame (9)
- # reagent (61)
- # ring-swagger (3)
- # shadow-cljs (149)
- # spacemacs (18)
- # specter (4)
- # timbre (1)
- # unrepl (38)
- # vim (17)
- # yada (14)
Anyone using reagent-forms? Wondering how to dynamically change HTML classes of a component based on state changes.
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?
sorry i dont know enough about reagent-forms ... i did not know reagent even allows two way data biding
maybe my understanding is wrong so i can't help you with this if two way databinding is possible
The only work around I can think of is making the state global, but I think it defeats the purpose of using bind-fields
not sure if that helps... i never knew data binding can happen bidirectionally in reagent
i might be not using the proper term. but checkout the library. i think thats what it implies
can anybody answer this https://groups.google.com/forum/#!topic/reagent-project/VW6BdA8iORE ?
@lee.justin.m take a look at http://webtop.stigmergy.systems/ . open the cljs shell
i tried code splitting but it only works within a project. i want to load any abitrary js/cljs code from any URL
but something that doesnt depend on reagent code like (require '[demo.tiger]) will work
here is the source https://bitbucket.org/sonwh98/stigmergy-webtop/src/c7f3bd65699b92addeae846df7a012c4999c9384/src/cljs/demo/?at=master
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
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.
have you asked a more generic question in #clojurescript yet? if you can ask something specific, mfikes might be able to help.
@sonnyto Have you seen this? https://github.com/anmonteiro/lumo/issues/64
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
?
(backup plan is to give each child absolute positioning to stack them but it's not ideal)
I would use absolute positioning. I don't thing transition-groups are designed to accomplish that.
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))
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)))})))
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!
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.
that's basically where i landed. as for reusable components, that's the whole point of react/reagent!
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
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.
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