React-sortable-hoc: Nested sortable elements cause conflict

[stahlmanDesign]

I have a list of grouped components. I can sort them just fine with the plugin.

But inside my components I have some lists that also use the same plugin. So a sortable inside a sortable. This conflicts with the parent groups. For example, if I have 3 sortable groups, the first 3 list items inside each group conflict with the parents because they share the same index. Once I get to four or five in any list, they sort fine.

I tested setting the index in the nested sortable list to index+10 and it works without conflict, but of course causes other problems because is the wrong index.

Will work on an example showing the problem.

[clauderic]

Hey @stahlmanDesign, if you can share some code, that would be helpful. Also, what do you mean by conflicts? You'll need to implement the onSortEnd logic differently for the nested sections for it to work, but besides that it should work out of the box.

Here's a quick example I put together of how nested sorting _can_ be implemented: https://jsfiddle.net/8tw72bgy/

[stahlmanDesign]

Thank you for the excellent support for this plugin. Your example showed me the way to solve my problem.

[stahlmanDesign]

I fixed it! Your fiddle example now sorts items correctly

https://jsfiddle.net/stahlmandesign/8tw72bgy/10/ https://jsfiddle.net/stahlmandesign/8tw72bgy/10/

Before:
onSectionSortEnd(sectionIndex, {oldIndex, newIndex}) {
const section = this.state.sections[sectionIndex];

arrayMove(section.items, oldIndex, newIndex)

this.setState({
sections: this.state.sections
});
}

After:

onSectionSortEnd(sectionIndex, {oldIndex, newIndex}) {

let copiedSections = Object.assign([],this.state.sections);
let section = copiedSections[sectionIndex];
section.items = arrayMove(section.items, oldIndex, newIndex)

this.setState({
sections: copiedSections
});
}

Le 2016-09-17 à 08:13, Claudéric Demers [email protected] a écrit :

Hey @stahlmanDesign https://github.com/stahlmanDesign, if you can share some code, that would be helpful. Also, what do you mean by conflicts? You'll need to implement the onSortEnd logic differently for the nested sections for it to work, but besides that it should work out of the box.

Here's a quick example I put together of how nested sorting can be implemented: https://jsfiddle.net/8tw72bgy/ https://jsfiddle.net/8tw72bgy/
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/clauderic/react-sortable-hoc/issues/55#issuecomment-247766134, or mute the thread https://github.com/notifications/unsubscribe-auth/AA7YBAQwPxPMKc4s3n7tt6SaI6-b8iv_ks5qq9lQgaJpZM4J_fUa.

[stahlmanDesign]

I was able to get my items to sort without the drag handle (it still always detaches and floats on touch, and I can't figure out why except maybe a dependency on parent like you mention in common problmes)

But my secondary list (items A1, A2, A3 etc.) doesn't sort correctly.

When I went back to your fiddle I noticed it doesn't sort correctly there either (it always reverts to the A1, A2, A3 order no matter what).

I have been trying to figure it out and will continue since I got it to sort correctly with drag handle (except on touch), but wanted to let you know your example has that problem for items, in case you use it as a tutorial for other people.

Thanks and let me know if you see a quick fix. The error is not obvious to me.

Le 2016-09-17 à 08:13, Claudéric Demers [email protected] a écrit :

Hey @stahlmanDesign https://github.com/stahlmanDesign, if you can share some code, that would be helpful. Also, what do you mean by conflicts? You'll need to implement the onSortEnd logic differently for the nested sections for it to work, but besides that it should work out of the box.

Here's a quick example I put together of how nested sorting can be implemented: https://jsfiddle.net/8tw72bgy/ https://jsfiddle.net/8tw72bgy/
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/clauderic/react-sortable-hoc/issues/55#issuecomment-247766134, or mute the thread https://github.com/notifications/unsubscribe-auth/AA7YBAQwPxPMKc4s3n7tt6SaI6-b8iv_ks5qq9lQgaJpZM4J_fUa.

[clauderic]

Yeah sorry, about that, arrayMove no longer mutates the original array as of 0.0.10. See this thread for more details: https://github.com/clauderic/react-sortable-hoc/issues/61

I've updated the fiddle with the new usage https://jsfiddle.net/8tw72bgy/12/
(The only changed line is line 79)

[stahlmanDesign]

I guess I don’t understand const in ES6. This looks like you are mutating state AND a const

const section = this.state.sections[sectionIndex];

section.items = arrayMove(section.items, oldIndex, newIndex); // <— how can section be changed if it is a const, unless that doesn’t apply to objects referenced in dot notation

also it is essentially the same as:
this.state.sections[sectionIndex] = arrayMove(section.items, oldIndex, newIndex); // this seems like mutating react state

I know these comments are out of scope for your component, just curious if you have any insight. Thanks again

Le 27 oct. 2016 à 12:06, Claudéric Demers [email protected] a écrit :

Yeah sorry, about that, arrayMove no longer mutates the original array as of 0.0.10. See this thread for more details: #61 https://github.com/clauderic/react-sortable-hoc/issues/61
I've updated the fiddle with the new usage https://jsfiddle.net/8tw72bgy/12/ https://jsfiddle.net/8tw72bgy/12/
(The only changed line is line 79)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/clauderic/react-sortable-hoc/issues/55#issuecomment-256690805, or mute the thread https://github.com/notifications/unsubscribe-auth/AA7YBCJ7NcIX__1tghvx9qWFyotY-QmZks5q4MwfgaJpZM4J_fUa.

[clauderic]

From MDN:

The const declaration creates a read-only reference to a value. It does _not_ mean the value it holds is immutable, just that the variable identifier cannot be reassigned. For instance, in case the content is an object, this means the object itself can still be altered.

[benbonnet]

@clauderic hello; I was interested in your example but i might lack understanding to take it further

From what i can see,

• index is just not passed as a prop through the components
• this.state can't get reached in onSectionSortEnd

I could solve the state thing i think properly :

onSectionSortEnd = (sectionIndex, {oldIndex, newIndex}) => { const section = this.state.entries[sectionIndex] section.children = arrayMove(section.children, oldIndex, newIndex) this.setState({ entries: this.state.entries }); }

still stuck on the other one,
would a workaround seem obvious to some ?

[bamaarintoko]

sectionIndex is undefined

[tpdineshtp]

sectionIndex is undefined, Can you please look into it? @clauderic

[Ladvace]

I'm trying to do that with an array of arrays but it doesn't work:
https://codesandbox.io/s/vibrant-bas-fr9su

[burnEAx]

sectionIndex is undefined

Replace this parts with code below:

class SectionContainer extends React.Component {
  render() {
    const { section, index, sectionIndex, items, onSortEnd } = this.props;

    return (
      <div className="SortableSection">
        <h5>Section: {section} </h5>

        <SortableItemList
          items={items}
          sectionIndex={sectionIndex}
          onSortEnd={onSortEnd.bind(this, sectionIndex)}
        />
      </div>
    );
  }
}

const SortableSection = SortableElement(
  ({ section, index, sectionIndex, items, onSortEnd }) => (
    <SectionContainer
      section={section}
      index={index}
      sectionIndex={sectionIndex}
      items={items}
      onSortEnd={onSortEnd}
    />
  )
);

const SortableSectionList = SortableContainer(
  ({ sections, onSectionSortEnd }) => (
    <div>
      {sections.map(({ section, items }, index) => (
        <SortableSection
          collection="section"
          key={`item-${section}`}
          section={section}
          index={index}
          sectionIndex={index}
          items={items}
          onSortEnd={onSectionSortEnd}
        />
      ))}
    </div>
  )
);

I add sectionIndex in props in SectionContainer and then pass it on children.