Created
September 19, 2019 14:33
-
-
Save GiselaMD/c5efb8336d251196dce7a8a8ca829e2a to your computer and use it in GitHub Desktop.
react-beautiful-dnd
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div className="dragDropContainer"> | |
<DragDropContext onDragEnd={this.onDragEnd}> | |
<DroppableZone | |
items={this.state.include} | |
segId={'segmentation-list_include'} | |
droppableId={'droppable_include'} | |
title={'Include'} | |
/> | |
<div className="segmentation-list container-drag flex-grow"> | |
<div className="header-container"> | |
<span className="header-title">Ultra Segmentações</span> | |
<span className="line" /> | |
</div> | |
<div id="segmentation-list"> | |
<Droppable droppableId="droppable"> | |
{(provided, snapshot) => ( | |
<div | |
ref={provided.innerRef} | |
style={getListStyle(snapshot.isDraggingOver)} | |
> | |
{size(ultrasegList) >= 1 ? ( | |
map(this.state.items, (seg, index) => ( | |
<DraggableCard | |
key={seg.id} | |
seg={seg} | |
index={index} | |
dragDisabled={seg.status === 'processing'} | |
/> | |
)) | |
) : ( | |
<div className="no-segmentations"> | |
<p>No cards</p> | |
</div> | |
)} | |
{provided.placeholder} | |
</div> | |
)} | |
</Droppable> | |
</div> | |
</div> | |
<DroppableZone | |
items={this.state.exclude} | |
segId={'segmentation-list_exclude'} | |
droppableId={'droppable_exclude'} | |
title={'Remove'} | |
/> | |
</DragDropContext> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Draggable } from 'react-beautiful-dnd'; | |
import DraggableCard from './draggableCard'; | |
const DraggableCard = ({ seg, index, dragDisabled }) => ( | |
<Draggable | |
key={seg.id} | |
draggableId={seg.id} | |
index={index} | |
isDragDisabled={dragDisabled} | |
> | |
{(provided, snapshot) => ( | |
<div | |
ref={provided.innerRef} | |
{...provided.draggableProps} | |
{...provided.dragHandleProps} | |
style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)} | |
className="draggable" | |
> | |
<div | |
className="segmentation-card" | |
key={index} | |
style={{ cursor: dragDisabled ? 'not-allowed' : 'grab' }} | |
> | |
<div | |
className="image" | |
style={{ | |
backgroundColor: dragDisabled ? 'rgb(132, 132, 132)' : seg.color, | |
}} | |
> | |
{(() => { | |
if (!isEmpty(seg.icon) && !dragDisabled) { | |
return parseIconModule(seg.icon, '#ffffff'); | |
} else if (dragDisabled) { | |
return <img src="/img/icons/load_segmentation.svg" />; | |
} else { | |
return <img src="/img/segmentations/bell.svg" />; | |
} | |
})()} | |
</div> | |
<div className="name"> | |
<a title={seg.name}>{seg.name}</a> | |
<span /> | |
</div> | |
</div> | |
</div> | |
)} | |
</Draggable> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Droppable } from 'react-beautiful-dnd'; | |
const DroppableZone = ({ items, segId, droppableId, title, dataTip }) => { | |
return ( | |
<div id={segId} className="segmentation-list container-drag"> | |
<div className="header-container"> | |
<span className="header-title">{title}</span> | |
<a id={droppableId} className="info-icon" data-tip={dataTip}> | |
<Icon icon="question-circle-o" /> | |
</a> | |
<span className="line" /> | |
</div> | |
<Droppable droppableId={droppableId}> | |
{(provided, snapshot) => ( | |
<div | |
ref={provided.innerRef} | |
style={getListStyle(snapshot.isDraggingOver)} | |
> | |
{map(items, (seg, index) => ( | |
<DraggableCard | |
key={seg.id} | |
seg={seg} | |
index={index} | |
dragDisabled={false} | |
/> | |
))} | |
{provided.placeholder} | |
</div> | |
)} | |
</Droppable> | |
</div> | |
); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment