Sortable or Draggable Components

[Conaws]

Hey there, It took me a while to figure out how to make a sortable list with reagent, but having done so, I felt like it might be useful to other folks as a higher-order component.

I love this library, so figured I'd ask -- if I clean this up a bit, would you be at all interested in a pull request to add this.

code is here

https://gist.github.com/0e8f6860c57be50f5edf7c0c636d478d

[mike-thompson-day8]

Are you suggesting that we add n example page to the re-com demo, showing the technique. (I'm not seeing a general component ... but checking, in case I missed something)

[Conaws]

The example I wrote isn't general, but if you're interested in a general one I can re-write it. I wanted to check in before though so I could A) make sure you were interested and B) hear your preferred API.

What I'm thinking is that a "sortable list" component would have the following

list (atom vector)

on-reorder (fn vector -> nil) The function to fire with the new ordered items

note -- the drag/drop api seems a little wonky, and sometimes dropping with this component doesn't seem to fire -- so might be worth asking for a spec, or at least a predicate for testing that all items in the new vector are the items -- that way this doesn't fire when you still have the placeholder item in the list.

placeholder (opt component) or placeholder-class (opt string)

• The thing that shows where your item will be placed while you're dragging
• Other option would be to have a placeholder css class, then rather than show the text "Placeholder", you'd be showing the value that was going to be dropped there, but with a different class.

item-class (opt string)

list-class (opt string)

during-drag-class (opt string)

• I have no idea what to call this, but with this current setup you aren't changing the item that is being dragged -- you're just using the HTML5 api to get a copy of that image. So instead you would change the display of all the other items --- like by making them a slightly lower opacity.

Does that make sense? JQuery sortable is a thing, so figure we should have some kind of equivalent

On Fri, Oct 28, 2016 at 5:09 PM, Mike Thompson [email protected] wrote:

Are you suggesting that we add n example page to the re-com demo, showing the technique. (I'm not seeing a general component ... but checking, in case I missed something)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Day8/re-com/issues/114#issuecomment-256899440, or mute the thread https://github.com/notifications/unsubscribe-auth/ACljr1o2J5CF9sQfNPXcMhduScHbRWWVks5q4d7ugaJpZM4KiMb- .

Conor White-Sullivan 347-216-0173 @Conaw http://twitter.com/conaw

Good tests kill flawed theories, we remain alive to guess again. ~ Karl Popper

[danielcompton]

I'll leave the decision on whether to include this to others, but I've got a few notes on the current implementation:

• I suspect that a sorted-map might be a better data structure for this than a vector, as this would probably make the code cleaner (no need for .indexOf and the (-> without vec replace-v). Taking and returning a vector/sequence is probably still a good API though, although I'm not 100% sure on that.
• without could probably be replaced with the built-in remove
• It would probably be good to get users to provide a key-fn, so that when items are reordered, the whole list doesn't need to be re-rendered, React will be able to swap the DOM nodes.

I'd recommend waiting to see whether this will make it into re-com before going too much further as I wouldn't want you to do extra work. Thanks! This looks nice 👍.

[CaptainLexington]

Is there any word on whether the maintainers would like to incorporate functionality like this if it were available? I need my app to do this anyway so I have to do it one way or another. I'd be happy to contribute work to this PR if it would be helpful to anyone.