This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-08-12
Channels
- # announcements (5)
- # babashka (1)
- # beginners (193)
- # calva (79)
- # cider (18)
- # clara (4)
- # clojure (38)
- # clojure-europe (12)
- # clojure-france (8)
- # clojure-nl (12)
- # clojure-sweden (1)
- # clojure-uk (50)
- # clojurescript (37)
- # conjure (30)
- # cursive (3)
- # data-science (2)
- # datalog (7)
- # datomic (12)
- # events (2)
- # expound (3)
- # figwheel-main (1)
- # fulcro (45)
- # graalvm (1)
- # jobs (1)
- # jobs-discuss (11)
- # luminus (1)
- # malli (5)
- # off-topic (32)
- # reagent (6)
- # reitit (32)
- # shadow-cljs (25)
- # spacemacs (2)
- # sql (22)
- # vim (6)
Hi all - is there a fulcro study group planned for today at 4pm BST?
Okay now I am really scratching my head over here... How do I trigger a root re-render? And why does an m/set-value!
inside a :onMouseEnter
event not trigger a component re-render?
@zilti refresh of component will only happen if props change. Is the thing you’re doing set-value on in the query? Does the component have an ident? To your question: schedule-render!
can be used to schedule a new render, but it depends on what renderer you have installed as to what that does. There is a force-root option. See app ns.
run a log stmt on the value of props as first stmt of body…if that prints, you’re definitely re-rendering
Hmm. I am using this element like normal, I created a (comp/factory SidebarItem {:keyfn :ui/text})
for it and use it using (ui-sidebar-item {:ui/text "TestItem" :ui/target TargetElement})
Also, (app/schedule-render! (comp/any->app this) {:force-root? true})
does not actually render the entire tree for at least a multiple-roots-renderer
.
If I pass in :ui/mouseover?
it just gets ignored. It never shows up in the normalized database.
I guess I'm going to use local state then
You’re clearly doing something very strange that is counter to the design. Writing a query and then passing a literal map has nothing to do with Fulcro, period.
and I do not think you are correct…though root’s shouldComponentUpdate almost certainly short-circuits it all if no props have changed
or you can add an SCU true
to your root..which I commonly recommend (the props check in SCU at root is mostly a waste of time, since most renders are due to a change of something in the app)
In a defsc component, how should I do something like (js/setTimeout #(set! (.-transition (.-style **this**)) "fade") 2500)
? How do I get the necessary javascript object from this
which is a fulcro component? Or should I take a different approach?
you can use react refs: http://book.fulcrologic.com/#_focusing_an_input
Do you mean like this? https://github.com/reagent-project/reagent/blob/master/doc/FAQ/UsingRefs.md Use an atom to store the javascript object, set the atom somehow using :ref
, and then dereference the atom to set the timeout?
yup, i'm pretty sure reagent and fulcro are both using the same react machinery under the hood
I don't understand the example in the fulcro book, but I think I understand the concept. Thanks!
basically what's happening is that the component's local state is initialized with a function that saves a reference to the real dom element you're interested in, then in your markup you feed that function to its :ref prop, so that when the component is mounted the ref saving function is fired and this
now has a ref to the dom element
which you can then use to do whatever you like with it either in componentDidMount or in response to some user action
I'm not sure if it's absolutely necessary to use gobj/set
on this
like the example in the fulcro book does... i feel like using component local state would be fine too
Yeah, I was hoping for something simpler. This is all I need to do:
(defsc Toast
[this {:keys [toast/status toast/short toast/message] :as props}]
{:query [:toast/status :toast/short :toast/message]
:ident (fn [] [:component/id :toast])}
(js/setTimeout #(set! (.-transition (.-style this)) "fade") 2500)
(dom/div :.ui.floating.message
{:classes [(name status)]}
(dom/div :.header
short)
(dom/p message)))
I just need to get the right this
to set the timeoutseparately, i'm a little afraid of whether having the timeout in the rendering function is OK... might it be enough to put it in componentDidUpdate?
(defsc Toast
[this {:keys [toast/status toast/short toast/message] :as props}]
{:query [:toast/status :toast/short :toast/message]
:ident (fn [] [:component/id :toast])
:initLocalState (fn [this _]
{:save-ref (fn [r] (gobj/set this "message-element" r))})
:componentDidUpdate (fn [this _ _]
(js/setTimeout #(set! (.-transition (.-style (gobj/get this "message-element"))) "fade") 2500))}
(let [save-ref (comp/get-state this :save-ref)]
(dom/div :.ui.floating.message
{:classes [(name status)]
:ref save-ref}
(dom/div :.header
short)
(dom/p message))))