V3 Alpha Issues

[JakeSidSmith]

If you've been testing out the V3 alpha, please post your issues here.

It'd also be good to know if V3 has fixed any existing issues you've had.

Reported issues

• Remove engines from package.json (stupid yarn)
• Unknown reorderId error when unmounting a group
• Dragging to a space between items in another group should still place the item in this group
• Auto-scroll toGroup when dragging to another group (not fromGroup)
• Do not drag to new group if outside visible area (check root node collision)
• Serious performance issues with 30+ reorder components
• Inputs do not retain DOM state when dragging between lists
• Gatsby window is not defined (move listeners to componentDidMount)
• Avoid use of deprecated methods

Requested features

• Option to start reorder only after movement
• Handle / draggable area

[wmertens]

Seems to work great - just one annoyance, the click/drag behavior doesn't seem very natural when you use a hold time, and if you use a short hold time, it intercepts clicks on internal targets.

For it to feel natural, it should only start reordering once you actually touch/click + drag a few pixels. Then the hold time doesn't matter…

In any case, this was super easy to implement 👍

[wmertens]

I wonder if it would be better to get the onClick from React, and the rest from document, so that the normal event bubbling works in React?

Also, would it be possible to have a drag handle instead of the whole element?

[wmertens]

For supporting a handle, perhaps allow specifying a handle classname and only if the click target has the handle class, proceed with the reorder?

[wmertens]

BTW, I did have one problem: Yarn doesn't like to install the npm package because the Node version is capped at v6. I don't see that line in package.json on the rework branch, so could you push a new version?

[JakeSidSmith]

You can't install the alpha, or do you mean to push a new major version?

[wmertens]

@JakeSidSmith If I run yarn add react-reorder, it will complain that my Node is too new to work with the package, because of the version limit on engine. I think there shouldn't be a version limit at all, seeing as how this is meant for the browser?

As you can see in https://unpkg.com/react-reorder@3.0.0-alpha.0/package.json, the package has

"engines": {
  "node": "6.9.1",
  "npm": "3.10.8"
}

[JakeSidSmith]

@wmertens didn't realise that was in the alpha package.json.

I will remove.

[Insert giant rant about yarn here]

[JakeSidSmith]

@wmertens published alpha.1.

[niftykins]

In v3 children are no longer wrapped in a div which has the event handlers applied to it, but instead have the event handlers applied to the child directly. This results in children that are custom components being passed the event handlers as props that have to manually be applied to the resulting DOM element.

Now: (child Item component isn't wrapped)

Before: (child Task component was wrapped in a div)

(I realise they're images of different examples :( )

Am I meant to manually pass down style, className, onMouseDown, onTouchDown, and data-dragged to the resulting DOM element or am I doing something wrong to not be getting the old "wrapped" element behaviour?

[niftykins]

When a Reorder component with a reorderGroup prop is unmounted an Unknown reorderId error is thrown.

This block of code is where the error is thrown as a result of registering a component with a reorderGroup not adding the id to the reorderComponents object.

[JakeSidSmith]

@niftykins thanks for your feedback.

The new version works by cloning any children of the Reorder component, and adds the listeners it needs to handle the reordering at this point. There is no wrapper. Is the problem that your events are not being fired?

As for the reorderId thing, I'll try to take a look when I have a chance, that definitely sounds like a bug.

[niftykins]

(Note: code is typed out from memory so I could be forgetting to include some things)

If I change a set of children from

this.state.list.map(function (item) {
  return (
    <li
      key={item.name}
      className={[classNames.listItem, classNames.listItem2].join(' ')}
      style={{color: item.color}}
    >
      {item.name}
    </li>
  );
}.bind(this)).toArray()

to

this.state.list.map(function (item) {
  return <Item key={item.name} item={item} />;
}.bind(this)).toArray()

I have to manually apply all the props that react-reorder adds in order to achieve the same functionality, thus the resulting component becomes:

function Item(props) {
  return (
    <li
      onMouseDown={props.onMouseDown}
      onTouchStart={props.onTouchStart}
      className={[classNames.listItem, classNames.listItem2, props.className].join(' ')}
      style={Object.assign({}, props.style, {color: props.item.color})}
      data-placeholder={props['data-placeholder']}
      data-dragged={props['data-dragged']}
    >
      {props.item.name}
    </li>
  );
}

Having to manually apply the props isn't much of an issue. It just took me awhile to figure out why my reorderable items weren't able to be "picked up" anymore after factoring them out and turning them into stateless components - so there could probably be some mention of the requirement in the README.

[JakeSidSmith]

Oh, that is hella weird. At the point that Reorder adds the props, the element should have already been resolved. https://facebook.github.io/react/docs/react-api.html#cloneelement

Will do some investigation at some point. @niftykins, if you want to tweak the examples to demonstrate this, as you did for the unmount issue, that'd be really helpful. :)