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> </> ); }
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> ); }
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() { 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 {...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() { 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 { 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 { 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 ( <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() { 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() { 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 ( <Draggable draggableId={this.props.column.id} index={this.props.index} > {(provided)=>( <div className={'Columncontainer'} {...provided.draggableProps} ref={provided.innerRef}> <h3 className={'title'} {...provided.dragHandleProps}>{this.props.column.title}</h3> <Droppable droppableId={this.props.column.id} type={"tasks"} > {(provided) => ( <div className={'tasklist'} ref={provided.innerRef} {...provided.droppableProps} > <InnerList tasks={this.props.tasks}/> {provided.placeholder} </div>) } </Droppable> </div>)} </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> ); }
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> ); }