export default function OrderGroup({ orderMembers, onOrderChange, onReorder }) { return ( <DragDropContext onDragEnd={({ source, destination }) => { onReorder(source && source.index, destination && destination.index); }} > <Droppable droppableId="droppable"> {(provided) => ( <div ref={provided.innerRef} {...provided.droppableProps}> {orderMembers.map(({ id, title, order }, index) => ( <DraggableItem key={id} id={id} index={index} order={order} onOrderChange={onOrderChange} > {title} </DraggableItem> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> ); }
export default function DroppableArea({ pivotConfig, axis }) { return ( <> <Typography.Text strong style={{ display: 'flex', justifyContent: 'center', }} > {axis} </Typography.Text> <Droppable droppableId={axis}> {(provided) => ( <div ref={provided.innerRef} {...provided.droppableProps} style={{ height: '100%' }} > {pivotConfig[axis].map((id, index) => ( <Item key={id} id={id} index={index} /> ))} {provided.placeholder} </div> )} </Droppable> </> ); }
render() { const { taskType } = this.props; return ( <Droppable droppableId={`droppable-${taskType}`}> {(provided) => this.renderWithDragProvider(provided)} </Droppable> ); }
const DragDropList = ({ list, listElement, updateList }) => { return ( <DragDropContext onDragEnd={result => onDragEnd(result, list, updateList)}> <Droppable droppableId="droppable"> {provided => ( <div {...provided.droppableProps} ref={provided.innerRef}> {renderListViewItems(list, listElement)} {provided.placeholder} </div> )} </Droppable> </DragDropContext> ); }
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() { 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> ); }
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 { 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() { const { listId, listType, internalScroll } = this.props; return ( <Droppable droppableId={listId} type={listType} direction="horizontal"> {(dropProvided: DroppableProvided, dropSnapshot: DroppableStateSnapshot) => ( <Wrapper isDraggingOver={dropSnapshot.isDraggingOver} {...dropProvided.droppableProps}> {internalScroll ? ( <ScrollContainer> {this.renderBoard(dropProvided)} </ScrollContainer> ) : ( this.renderBoard(dropProvided) )} </Wrapper> )} </Droppable> ); }
render() { return ( <Container> <Title>{this.props.column.title}</Title> <Droppable droppableId={this.props.column.id}> {provided => ( <TaskList ref={provided.innerRef} {...provided.droppableProps} > {this.props.tasks.map((task, index) => ( <Task key={task.id} task={task} index={index} /> ))} {provided.placeholder} </TaskList> )} </Droppable> </Container> ) }
render() { const { column } = this.props; return ( <ColumnWrapper> <ColumnHeader>{column.name}</ColumnHeader> <Droppable droppableId={column.id}> {provided => ( <div ref={provided.innerRef}> {column.items.map(columnItem => { return ( <BoardItem key={columnItem.id} item={columnItem} /> ); })} {provided.placeholder} </div> )} </Droppable> </ColumnWrapper> ); }
render() { return ( <DragDropContext onDragEnd={this.onDragEnd} > <Droppable droppableId='all-columns' direction={"horizontal"} type={"column"} > {(provided)=>(<div className={"reactdndcontainer"} {...provided.droppableProps} ref={provided.innerRef}> {this.state.columnOrder.map((columnId,index) => { const column = this.state.columns[columnId]; return <InnerList key={column.id} column={column} taskMap={this.state.tasks} index={index}/> })} {provided.placeholder} </div>)} </Droppable> </DragDropContext> ); }
render(){ let {type}=this.props; return( <Droppable droppableId={type} type={type} key={type}> {( dropProvided: DroppableProvided, dropSnapshot: DroppableStateSnapshot, ) => ( <div ref={dropProvided.innerRef} {...dropProvided.droppableProps} > <h3>{`list.title----${type}`}</h3> <div>{this.props.children}</div> </div> )} </Droppable> ) }
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> ); }
render() { return ( <DragDropContext onDragEnd={this.onDragEnd} > <Droppable droppableId='all-columns' direction={"horizontal"} type={"column"} > {(provided)=>(<div className={"reactdndcontainer"} {...provided.droppableProps} ref={provided.innerRef}> {this.state.columnOrder.map((columnId,index) => { const column = this.state.columns[columnId]; return <InnerList key={column.id} column={column} taskMap={this.state.tasks} index={index}/> })} {provided.placeholder} </div>)} </Droppable> </DragDropContext> ); }