Fork me on GitHub
#reagent
<
2016-01-07
>
bostonaholic01:01:43

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"))

bostonaholic01:01:49

with-droppable and droppable-did-mount are in a app.behaviors namespace

mbertheau14:01:28

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?

mccraigmccraig15:01:35

@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

mikethompson15:01:56

@mbertheau: you can register a function to be called after the next UI update

mikethompson15:01:41

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.

mikethompson16:01:02

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

mccraigmccraig16:01:06

ooo i didn't know that @mikethompson - is stuff like that doc'd anywhere or is it UTSL

mikethompson16:01:38

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 :-)).

mbertheau17:01:01

@mikethompson: Thanks! Very useful info.

docent17:01:51

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:

docent17:01:49

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?

docent17:01:51

I was using this trick before: (set! js/React (js/require "react-native/Libraries/react-native/react-native.js"))

akhudek22:01:43

hi all, can reagent and om be mixed?

akhudek22:01:55

e.g. if you have a large legacy om system that you want to move over to reagent?

Tim22:01:37

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?

Tim22:01:50

even though home-page doesn’t have a render function?

ttasterisco23:01:40

@tmtwd: home-page is a component

ttasterisco23:01:58

mount-root not so much

Tim23:01:30

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?

gadfly36123:01:00

Sorry to nitpick, (home-page) would just be a vector (not html), and, yeah, [home-page] would be a component

mikethompson23:01:15

Or, to put that another way, (home-page) returns hiccup. and [home-page] is hiccup.

virmundi23:01:31

this looks promising. Anyone here from re-frame

virmundi23:01:17

cause I can't for the life of me figure out how to put the handlers to work on the server size.

virmundi23:01:41

does lein figwheel not turn on the compojure handlers?

gadfly36123:01:36

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#L26

escherize23:01:57

re-com question: http://take.ms/oXfNN why is this h-box stacking things vertically?

escherize23:01:45

is there something weird with devcards going on?