render() { return ( <Draggable draggableId={this.props.task.id} index={this.props.index}> {provided => ( <Container {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} > {this.props.task.content} </Container> )} </Draggable> ); }
render() { const { imageUrl, index } = this.props; return ( <Draggable draggableId={`draggable-${index}`} index={index}> {(provided) => ( <Container ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} > <ImageContainer src={imageUrl} /> </Container> )} </Draggable> ); }
const renderListViewItems = (list, listElement) => { return ( <ListGroup> {list.map((item, index) => ( <Draggable key={item.id} draggableId={item.id} index={index}> {provided => ( <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}> <div className="list-group-element"> <ListGroupItem key={item.id} tag="a" action> {listElement(item)} </ListGroupItem> </div> </div> )} </Draggable> ))} </ListGroup> ); }
render(){ let {quote,type,index}=this.props; return( <Draggable key={quote.id} draggableId={type} type={type} index={index}> {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} > <p>{type}---;{quote.id}-;{index}</p> </div> )} </Draggable> ) }
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> ); }
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() { return ( <Draggable draggableId={this.props.task.id} index={this.props.index} > {(provided,snapshot) => ( <div className={classes.container} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} > {this.props.task.content} </div>)} </Draggable> ); }
render() { const { column, tasks, index } = this.props; return ( <Draggable draggableId={column.id} index={index} type="column"> {provided => ( <Container ref={provided.innerRef} {...provided.draggableProps}> <Title {...provided.dragHandleProps}>{column.title}</Title> <Droppable droppableId={column.id} type="task"> {(provided, snapshot) => ( <TaskList ref={provided.innerRef} {...provided.droppableProps} isDraggingOver={snapshot.isDraggingOver} > <InnerList tasks={tasks} /> {provided.placeholder} </TaskList> )} </Droppable> </Container> )} </Draggable> ); }
render() { const { item } = this.props; return ( <BoardItemWrapper> <Draggable draggableId={item.id} index={item.id}> {provided => ( <BoardItemWrapper ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} > {item.name} </BoardItemWrapper> )} </Draggable> </BoardItemWrapper> ); }
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.card.id} index={this.props.index}> {provided => ( <div className={classes.container} {...provided.draggableProps} ref={provided.innerRef} > <Backdrop provided={provided} clickedOutside={this.onCardTitleOutsideClicked} > {this.cardTitleWrapper()} </Backdrop> </div> )} </Draggable> ); }
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> ); }
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() { 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) => ( <div className={classes.container} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} > {this.props.task.content} </div>)} </Draggable> ); }