export default function Item({ id, index }) { return ( <Draggable draggableId={id} index={index}> {({ draggableProps, dragHandleProps, innerRef }) => ( <div ref={innerRef} {...draggableProps} {...dragHandleProps} style={{ ...draggableProps.style, }} > <Typography.Text ellipsis style={{ maxWidth: '100%' }}> <DragOutlined style={{ marginRight: 8 }} /> {id} </Typography.Text> </div> )} </Draggable> ); }
<Draggable draggableId={id} index={index}> {({ draggableProps, dragHandleProps, innerRef }) => ( <div
render() { const { task, index } = this.props; return ( <Draggable draggableId={`draggable-${task.status}-${index}`} index={index}> {(provided) => this.renderWithProvided(provided)} </Draggable> ); }
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> ); }
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> ); }
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(){ 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() { 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 { 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> ); }
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.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> ); }