export default function({ task, index }) { return ( <Draggable draggableId={task.id} index={index} type="task"> {(provided, snapshot) => ( <Container {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} isDragging={snapshot.isDragging} > {task.content} </Container> )} </Draggable> ); }
render(){ // const isDragDisabled = this.props.task.id === 'task-1'; return( <Draggable draggableId={this.props.task.id} index={this.props.index}> {(provided, snapshot) => ( <Container {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} isDragging= {snapshot.isDragging} > <Handle /> {this.props.task.content}</Container> )} </Draggable>); }
render() { let {name, data} = this.props; //let name = this.props.name; //let data = this.props.data; return ( <Droppable droppableId={name} > {(provided, snapshot) => ( <div className='col' ref={provided.innerRef} style={this.getListStyle(snapshot.isDraggingOver)}> {data.map((item, index) => ( <Draggable key={item.id} draggableId={item.id} index={index}> {(provided, snapshot) => ( <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} style={this.getItemStyle( snapshot.isDragging, provided.draggableProps.style)}> {item.content} </div> )} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> ); }
render() { const isDragDisabled = this.props.task.id === 'task-1'; return ( <Draggable draggableId={this.props.task.id} index={this.props.index} isDragDisabled={this.props.task.id === 'task-1'} > {(provided, snapshot) => ( <Container ref={provided.innerRef} isDragging={snapshot.isDragging} isDragDisabled={this.props.task.id === 'task-1'} {...provided.draggableProps} {...provided.dragHandleProps} > <Handle {...provided.dragHandleProps} /> {this.props.task.content} </Container> )} </Draggable> ); }
list.children.map( (item: Quote | NestedQuoteList, index: number) => !item.children ? ( this.renderQuote((item: any), list.id, index) ) : ( <Draggable draggableId={item.id} type={list.id} key={item.id} index={index} > {( dragProvided: DraggableProvided, dragSnapshot: DraggableStateSnapshot, ) => ( <NestedContainer innerRef={dragProvided.innerRef} isDragging={dragSnapshot.isDragging} {...dragProvided.draggableProps} {...dragProvided.dragHandleProps} > {this.renderList((item: any), level + 1)} </NestedContainer> )} </Draggable> ), )
render() { const { task, index } = this.props const isDragDisabled = task.id === 'task-1' return ( <Draggable draggableId={task.id} index={index} isDragDisabled={isDragDisabled} > { (provided, snapshot) => ( <Container {...provided.draggableProps} {...provided.dragHandleProps} innerRef={provided.innerRef} isDragging={snapshot.isDragging} isDragDisabled={isDragDisabled} > {/* <Handle {...provided.dragHandleProps} /> */} {task.content} </Container> ) } </Draggable> ) }
{...provided.draggableProps} style={getItemStyle( snapshot.isDragging, provided.draggableProps.style )}
<div ref={dragProvided.innerRef} isDragging={dragSnapshot.isDragging} {...dragProvided.draggableProps} {...dragProvided.dragHandleProps}
{...provided.draggableProps} style={getItemStyle( snapshot.isDragging, provided.draggableProps.style )}
{...provided.draggableProps} style={getItemStyle( snapshot.isDragging, provided.draggableProps.style )}
{...dropProvided.dragHandleProps} style={getItemStyle( dropSnapshot.isDragging, dropProvided.draggableProps.style )}> {...dropProvided.dragHandleProps} style={getItemStyle( dropSnapshot.isDragging, dropProvided.draggableProps.style )}>
render() { return ( <Draggable draggableId={this.props.task.id} index={this.props.index}> {(provided, snapshot) => ( <Container innerRef={provided.innerRef} isDragging={snapshot.isDragging} aria-roledescription="Press space bar to lift the task" {...provided.draggableProps} {...provided.dragHandleProps} > {this.props.task.content} </Container> )} </Draggable> ); }
list.children.map( (item , index: number) => !item.children ? ( this.renderQuote((item: any), list.id, index) ) : ( <div key={item.id}> <Draggable draggableId={item.id} type={list.id} key={item.id} index={index} > {( dragProvided: DraggableProvided, dragSnapshot: DraggableStateSnapshot, ) => ( <div ref={dragProvided.innerRef} isDragging={dragSnapshot.isDragging} {...dragProvided.draggableProps} {...dragProvided.dragHandleProps} > {this.renderList((item), level + 1)} </div> )} </Draggable> </div> ), )
render() { return ( <Draggable draggableId={this.props.task.id} index={this.props.index}> {(provided, snapshot) => ( <Container {...provided.draggableProps} innerRef={provided.innerRef} isDragging={snapshot.isDragging} > <Handle {...provided.dragHandleProps} /> {this.props.task.content} </Container> )} </Draggable> ) }
render() { return ( <Draggable draggableId={this.props.task.id} index={this.props.index}> {(provided, snapshot) => ( <Container {...provided.draggableProps} innerRef={provided.innerRef} isDragging={snapshot.isDragging} > <Handle {...provided.dragHandleProps} /> {this.props.task.content} </Container> )} </Draggable> ) }