jdbence / react-sortable-hoc Goto Github PK

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>
            )
        }
}

Uncaught TypeError: Cannot read property 'slice' of null
    at arrayInsert 
    at onSortSwap 
    at _class._this.handleSortSwap 
    at onSortEnd 
    at _class._this.handleSortEnd 
    at DragLayer.updateTargetContainer 
    at DragLayer.handleSortMove 

Uncaught TypeError: Cannot read property 'item' of null
    at DragLayer.updateTargetContainer 
    at DragLayer.handleSortMove