Skip to content
This repository has been archived by the owner on Jul 24, 2020. It is now read-only.

Elements set to visibility: 'hidden', opactiy: 0 and index is not being updated when dragged #4

Closed
TraceyK14 opened this issue Jul 13, 2017 · 3 comments

Comments

@TraceyK14
Copy link

TraceyK14 commented Jul 13, 2017

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>
            )
        }
}
@jdbence
Copy link
Owner

jdbence commented Jul 17, 2017

@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.

@TraceyK14
Copy link
Author

No I have not, I think I will try starting from scratch to see it working and then see why mine isn't working.

@TraceyK14
Copy link
Author

TraceyK14 commented Jul 17, 2017

@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

DimitarNestorov pushed a commit to codemotionapps/react-sortable-hoc that referenced this issue Feb 4, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants