You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Jul 24, 2020. It is now read-only.
When I drag an item within the same list it will save it on the first drag but since the index didn't update, on the following dragging events it will move all of the items at once and there are empty spaces because it thinks its moving it as if it were still in its last position.
When moving to another list it hides the sortable element with the same index and since the indexes are not updating the element with the same index stays hidden.
Below is my component ( I removed alot of code but this is the main sorting part of the code)
ListWrapper is the same as the ListWrapper component from your src/stories/index.js file.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import List from '../List';
import { default as Item } from '../Item';
import { SortableContainer, SortableElement, DragLayer } from 'react-sortable-hoc';
import ListWrapper from './ListWrapper';
const SortableItem = SortableElement(Item)
const SortableList = SortableContainer(List, { withRef: true })
class Container extends Component {
constructor(props) {
this.createLists = this.createLists.bind(this)
this.state = { lists: [] }
}
createLists() {
const createItems = (data) => {
let items= []
let i = 0
for(let prop in data) {
items.push(
<SortableItem
key={ `task-${prop}-${data[prop].name}` }
index={ i }
pressDelay={ 100 }
title={ data[prop].name }
description={ data[prop].description } />
)
i++
}
return items
}
let lists= [];
const dragLayer = new DragLayer();
for (let key in data) {
lsits.push(<ListWrapper
component={SortableList}
key={ key }
pressDelay={ 100 }
title={ humanize(key) }
items={ createItems(data[key].items) }
dragLayer={ dragLayer }
getContainer={ wrappedInstance => ReactDOM.findDOMNode(wrappedInstance).children[1] }
/>
)
}
this.setState({ lists: lists})
}
componentWillMount() {
this.createLists()
}
render() {
return (
<div>
<h1>{ this.props.name }</h1>
<div>
{ this.state.lists}
</div>
</div>
)
}
}
The text was updated successfully, but these errors were encountered:
@TraceyK14 Have you come up with a resolution on this? If not, might be best to start with the working demo and move towards how you are trying to use it.
@jdbence So it looks like it doesn't like the fact that I am creating my List and Items by looping through and putting them into an array and then displaying them. I got It to work by mapping through an array of objects and creating the components that way. Not sure exactly why it only works that way, I'm assuming its something to do with state.
I was creating the sortable elements, putting them into an array and then using the array of components as the sortable list items. Now I am giving the sortable list an array of plain objects and then within the child component of the soratable list (Lane in my case) I am mapping through them and creating the sortable elements there
I was also creating the multiple ListWrapper components and storing them in state and then displaying them, and now I am just mapping through my data and creating the ListWrapper components within the render function instead of how I was doing it in the createLanes function
When I drag an item within the same list it will save it on the first drag but since the index didn't update, on the following dragging events it will move all of the items at once and there are empty spaces because it thinks its moving it as if it were still in its last position.
When moving to another list it hides the sortable element with the same index and since the indexes are not updating the element with the same index stays hidden.
Below is my component ( I removed alot of code but this is the main sorting part of the code)
ListWrapper is the same as the ListWrapper component from your src/stories/index.js file.
The text was updated successfully, but these errors were encountered: