Fork me on GitHub
#reagent
<
2018-04-16
>
javi13:04:24

@reefersleep Have you considered wrapping the React comp into a higher level one, or only exposing the necessary props? That way you reduce the complexity of the interop as the children returning functions hurst my head sometimes when interop. I am using it from reagent that way with no problems. [code for component in a snippet below...] and the use it from reagent as usual given i have required the react comp as dnd.. here i show just a sketch of the code to use the above react comp... but it is that simple data is a board made of subBoards.. I am using js camel casing as it is fed into the react comp

(def board-data  {
    :name  "a board for thinking nice thoughts", 
    :subBoards: {
        :one  [{:id 1 :content "some content..."}]}})
then something like this...
[:> dnd {:boardData (clj->js board-data)
:getItemStyle (fn [board-name is-dragging-over] ...)
         :getListStyle (fn [draggable-style is-dragging] ... )
         :itemRenderer (fn [content] ...)}] ;;<<<--------------------------- return the react component there
the class names added are from tachyons to create the board columns... WIP Slack is not letting me upload images ... so no example img of result...

reefersleep20:04:37

Sorry javi, haven’t had time to look at my project. You’re basically talking about refactoring to make things clearer, right?

reefersleep20:04:20

I think what I’m going to do, when I get the time, is to what @U8ES68TGX said - copy a React example line for line, as closely as possible, to see if I can achieve the very effect I’m hoping for (the library’s standard effect). Then, if things work out (or maybe if they don’t, too), I’ll try refactoring, using your advice 🙂

javi21:04:03

no worries... what i meant is that the main parts of the DnD are the data, the function that styles the List, the function that styles the items, and the item renderer that returns the html for each item. So you can just expose those and then you need to interop less... here's all the jsx code... https://gist.github.com/nrfm/fef4d7c4599de5793df294d6a435506e the component on top,take it as it is and just compile it with webpack and then use it in your app.. and the one at the bottom is the one to turn into a reagent component but it is just a matter of translating those 3 functions and the items data structure... this way you don't have to deal with that weirs {() => {...}} style of returning functions for children...

reefersleep14:04:53

@fj.abanses you’re right that the back-and-forth interopping is pretty horrendous to follow. I plan to wrap it in more accessible functions once I’ve got it working 🙂

reefersleep14:04:13

I’m at work currently, so I’ll take a closer look at what you’re saying later tonight. Thanks for chiming in!

carocad16:04:04

hey guys, writing here hoping that one of the maintainers of reagent sees it. Would it be possible to update the docs of the reagent project? The official http://github.io docs still are for 0.8.0-alpha-2 but the latest version on github is 0.8.0-rc1 🙂

juhoteperi16:04:47

@carocad Checking. It should be automatically updated but I guess I broke the script.

juhoteperi17:04:12

@carocad Updated now.

🎉 4
carocad17:04:11

Nice, thanks :)