render(){ return ( <Container> <Title> {this.props.column.title} </Title> <Droppable droppableId={this.props.column.id}> {(provided, snapshot) => ( <Tasklist // Needed for styled components?? innerRef = {provided.innerRef} isDraggingOver = {snapshot.isDraggingOver} {...provided.droppableProps} > {this.props.tasks.map((task, index) => <Task key={task.id} task={task} index={index} /> )} {provided.placeholder} </Tasklist> )} </Droppable> </Container> ); }
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() { return ( <Draggable draggableId={this.props.column.id} index={this.props.index}> {provided => ( <Container innerRef={provided.innerRef} {...provided.draggableProps}> <Title {...provided.dragHandleProps}> {this.props.column.title} </Title> <Droppable droppableId={this.props.column.id} type="task"> {(provided, snapshot) => ( <TaskList innerRef={provided.innerRef} isDraggingOver={snapshot.isDraggingOver} {...provided.droppableProps} > <InnerList tasks={this.props.tasks} /> {provided.placeholder} </TaskList> )} </Droppable> </Container> )} </Draggable> ); }
const Trash = ({ isMobile }) => isMobile ? ( <Droppable droppableId={'Trash'} type={DragTypes.COURSE}> {(provided, snapshot) => ( <div ref={provided.innerRef} style={mobileStyles.droppableContainer}> <Paper zDepth={1} style={mobileStyles.trashContainer(snapshot.isDraggingOver)}> <FontIcon className="material-icons" style={styles.trashIcon}> {snapshot.isDraggingOver ? 'delete_forever' : 'delete'} </FontIcon> </Paper> </div> )} </Droppable> ) : ( <Paper zDepth={1} style={styles.trashContainer}> <Droppable droppableId={'Trash'} type={DragTypes.COURSE}> {(provided, snapshot) => ( <div ref={provided.innerRef} style={styles.droppableContainer(snapshot.isDraggingOver)}> <FontIcon className="material-icons" style={styles.trashIcon}> {snapshot.isDraggingOver ? 'delete_forever' : 'delete'} </FontIcon> </div> )} </Droppable> </Paper> )
render() { const { column, tasks, isDropDisabled } = this.props return ( <Container> <Title>{column.title}</Title> <Droppable droppableId={column.id} isDropDisabled={isDropDisabled} > { (provided, snapshot) => ( <TaskList innerRef={provided.innerRef} {...provided.droppableProps} isDraggingOver={snapshot.isDraggingOver} > { tasks.map((task, index) => <Task key={task.id} index={index} task={task} />) } { provided.placeholder } </TaskList> ) } </Droppable> </Container> ) }
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> ); }
{(provided, snapshot) => { return ( <div {...provided.droppableProps} style={getListStyle(snapshot.isDraggingOver)} ref={provided.innerRef} className="col bg-color-secondary h-auto ml-3 mr-3 pt-2 rounded no-padding">
<div ref={provided.innerRef} style={getQuestionListStyle(snapshot.isDraggingOver)}
<div ref={provided.innerRef} style={getAnswerListStyle(snapshot.isDraggingOver)}
<div ref={provided.innerRef} style={getListStyle(snapshot.isDraggingOver)}
render() { return ( <Container> <Title>{this.props.column.title}</Title> <Droppable droppableId={this.props.column.id} isDropDisabled={this.props.isDropDisabled} > {(provided, snapshot) => ( <TaskList ref={provided.innerRef} isDraggingOver={snapshot.isDraggingOver} {...provided.droppableProps} > {this.props.tasks.map((task, index) => ( <Task key={task.id} task={task} index={index} /> ))} {provided.placeholder} </TaskList> )} </Droppable> </Container> ); }
ref={provided.innerRef} style={{ background: snapshot.isDraggingOver ? "#616161" : "lightgrey",
<div ref={provided.innerRef} style={getAnswerListStyle(snapshot.isDraggingOver)}
<div ref={dropProvided.innerRef} style={getListStyle(dropSnapshot.isDraggingOver)}> {this.state.items.map((item, index) => ( <Draggable <div ref={dropProvided.innerRef} style={getListStyle(dropSnapshot.isDraggingOver)}> {this.state.selected.map((item, index) => ( <Draggable
render() { return ( <Draggable draggableId={this.props.column.id} index={this.props.index}> {provided => ( <Container {...provided.draggableProps} ref={provided.innerRef}> <Title {...provided.dragHandleProps}> {this.props.column.title} </Title> <Droppable droppableId={this.props.column.id} type="task" direction="horizontal"> {(provided, snapshot) => ( <TaskList ref={provided.innerRef} {...provided.droppableProps} isDraggingOver={snapshot.isDraggingOver} > <InnerList tasks={this.props.tasks} /> {provided.placeholder} </TaskList> )} </Droppable> </Container> )} </Draggable> ); }