This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-01-07
Channels
- # admin-announcements (69)
- # alda (8)
- # beginners (6)
- # boot (182)
- # cider (10)
- # cljs-dev (24)
- # cljsrn (17)
- # clojars (70)
- # clojure (142)
- # clojure-brasil (5)
- # clojure-czech (1)
- # clojure-poland (4)
- # clojure-russia (96)
- # clojurescript (115)
- # community-development (37)
- # component (6)
- # cursive (11)
- # datomic (32)
- # events (4)
- # funcool (6)
- # hoplon (17)
- # ldnclj (10)
- # lein-figwheel (24)
- # mount (12)
- # om (141)
- # onyx (7)
- # parinfer (48)
- # re-frame (24)
- # reagent (31)
first pass:
(defn droppable-did-mount [el handler]
(.addEventListener el "dragover" (fn [evt] (.preventDefault evt)) false) ; allows us to drop
(.addEventListener el "drop" handler false))
(defn with-droppable [component handler]
(with-meta component
{:component-did-mount (fn [this] (droppable-did-mount (reagent/dom-node this) handler))}))
(defn handle-drop [evt]
(.stopPropagation evt)
(.preventDefault evt)
(let [file (gobject/get (-> evt .-dataTransfer .-files) 0)]
(upload-file file)))
(defn section []
[:section])
(def droppable-section
(with-droppable section handle-drop))
(reagent/render-component [droppable-section] (.getElementById js/document "droppable"))
with-droppable
and droppable-did-mount
are in a app.behaviors
namespace
I want to scroll down after an event added stuff to the DOM. How do I know when reagent is done and the DOM has updated, i.e. that I can scroll now?
@mbertheau: i grab a ref to the dom-node in :component-did-mount
, after which it's ok to scroll that node... sometimes i send events (re-frame) when nested content gets updated to let the scrollable container know it has to scroll
@mbertheau: you can register a function to be called after the next UI update
the function to call depends on the version of reagent: https://github.com/Day8/re-frame/blob/master/src/re_frame/router.cljs#L63-L65
So either: - reagent.core.after-render - reagent.impl.batching.do-later They take a function as parameter. They call it after the next update cycle.
But apart from that, perhaps you should be using component-did-update
? Except of course, that won't work if the update happens via a r/atom
update
ooo i didn't know that @mikethompson - is stuff like that doc'd anywhere or is it UTSL
Well, prior to v0.6.0 is was UTSL. But with v0.6.0 it officially becomes a part of the API (which does not mean it is really documented :-)).
@mikethompson: Thanks! Very useful info.
Is anyone sucessfully using reagent 6.0.0-alpha with react-native yet? My react-native app (https://github.com/docent/qwerty-app-reagent) breaks when upgrading to the new reagent, reason being I think such statements:
So seems to me now that reagent 6.x uses react dom's render function, how is this supposed to work in react native environment?
I was using this trick before: (set! js/React (js/require "react-native/Libraries/react-native/react-native.js"))
is both
(defn mount-root []
(reagent/render [current-page] (.getElementById js/document "app")))
and
(defn home-page []
[:div [:h2 "Welcome to {{name}}"]
[:div [:a {:href "/about"} "go to about page"]]])
considered components?@tmtwd: home-page is a component
mount-root not so much
@tmtwd this should help clarify what a component is: https://github.com/reagent-project/reagent-cookbook/blob/master/basics/basic-component/README.md
wouldn’t it depend how it is called? ie (home-page)
would just be html and [home-page]
would be more of a classic component?
Sorry to nitpick, (home-page)
would just be a vector (not html), and, yeah, [home-page]
would be a component
Or, to put that another way, (home-page)
returns hiccup. and [home-page]
is hiccup.
@tmtwd as well as the link provided above, also be sure to read https://github.com/Day8/re-frame/wiki/Creating%20Reagent%20Components
cause I can't for the life of me figure out how to put the handlers to work on the server size.
This is from the fighweel readme:
The inclusion of a static file server allows you to get a decent ClojureScript development environment up and running quickly. For convenience there is a :ring-handler option so you can load a ring handler into the figwheel server.
And i dont use ring, but there is a +handler
options in the re-frame-template that adds the above: https://github.com/Day8/re-frame-template/blob/master/src/leiningen/new/re_frame/project.clj#L26re-com question: http://take.ms/oXfNN why is this h-box stacking things vertically?