Get `SortableContainer` usage straight

[jasonslyvia]

Currently it seems SortableContainer is not working as desired

[chinesedfan]

Yes, the className and style are not set correctly.

[lusyn]

I have alse found this problem, please fix it...

[Darmody]

@jasonslyvia Hey, I check the issues associated with SortableContainer. I think the problem is that when you use React Component as your sortable item, you have to construct it manually.

[Darmody]

That means SortableContainer not work when:

  class SortItem { 
    ...
    render() {
      return (
         <SortableContainer>
           <MyOwnComponent />
         </SortableContainer>
      )
    }
  }

And @sortable is required for SortItem Component

[Darmody]

And this is why custom component don't work. https://github.com/jasonslyvia/react-anything-sortable/blob/master/src/index.js#L509-L512

Because If we pass props to a custom component, the component need to handle these props manually, that make no sense.

I think we can just always create a new <div> to accept sortable props.

[Darmody]

Or pass a component into SortableContainer to determine what element should SortableContainer be.

[chinesedfan]

@Darmody Can you explain why SortableContainer is exported directly as DemoContainerItem? I don't think your test usage is the same with the README in #77.

[Darmody]

@chinesedfan I think it is the same. What confuse you?

[Darmody]

@chinesedfan Oh I got your point, you are right.

[Darmody]

Sorry, I confused SortableContainer myself too...
Actually it already wrapped by sortable mixin.

So we should put SortableContainer directly as Sortable's children, not inside the SortableItem.

[jasonslyvia]

This whole SortableContainer thing is designed for avoiding React's warning since 15.2.0 IIRC.

[jasonslyvia]

#58 for reference