| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import { useDroppable } from '@dnd-kit/core'; |
| 3 |
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'; |
| 4 |
import ElementCard from './ElementCard'; |
| 5 |
|
| 6 |
/** |
| 7 |
* A single droppable column in the campaign canvas. |
| 8 |
* |
| 9 |
* Accepts elements dragged from the FieldsPanel (via useDroppable) and |
| 10 |
* supports sortable reordering of its own elements (via SortableContext). |
| 11 |
*/ |
| 12 |
export default function Column( { column, meta, campaignId, selectedElementId, dispatch, isActiveDropTarget, dropTargetElementId } ) { |
| 13 |
const { setNodeRef, isOver } = useDroppable( { |
| 14 |
id: `col-${ column.id }`, |
| 15 |
data: { columnId: column.id }, |
| 16 |
} ); |
| 17 |
|
| 18 |
const elementIds = column.elements.map( ( el ) => el.id ); |
| 19 |
const isEmpty = column.elements.length === 0; |
| 20 |
const isHighlighted = isOver || isActiveDropTarget; |
| 21 |
|
| 22 |
return ( |
| 23 |
<div |
| 24 |
className={ [ |
| 25 |
'bp-canvas-column', |
| 26 |
isEmpty ? 'bp-canvas-column--empty' : '', |
| 27 |
isHighlighted ? 'bp-canvas-column--over' : '', |
| 28 |
].filter( Boolean ).join( ' ' ) } |
| 29 |
style={ { flex: `${ parseFloat( column.width ) || 1 } 1 0`, minWidth: 0 } } |
| 30 |
> |
| 31 |
<div className="bp-canvas-column__label"> |
| 32 |
{ column.label } |
| 33 |
</div> |
| 34 |
|
| 35 |
<SortableContext items={ elementIds } strategy={ verticalListSortingStrategy }> |
| 36 |
<div ref={ setNodeRef } className="bp-canvas-column__drop-area"> |
| 37 |
{ isEmpty ? ( |
| 38 |
<div className="bp-canvas-column__placeholder"> |
| 39 |
<span className="dashicons dashicons-plus-alt2"></span> |
| 40 |
<p>{ __( 'Drop elements here', 'better-payment' ) }</p> |
| 41 |
</div> |
| 42 |
) : ( |
| 43 |
column.elements.map( ( element, index ) => ( |
| 44 |
<ElementCard |
| 45 |
key={ element.id } |
| 46 |
element={ element } |
| 47 |
columnId={ column.id } |
| 48 |
index={ index } |
| 49 |
totalElements={ column.elements.length } |
| 50 |
meta={ meta } |
| 51 |
campaignId={ campaignId } |
| 52 |
isSelected={ element.id === selectedElementId } |
| 53 |
dispatch={ dispatch } |
| 54 |
isDropTarget={ element.id === dropTargetElementId } |
| 55 |
/> |
| 56 |
) ) |
| 57 |
) } |
| 58 |
</div> |
| 59 |
</SortableContext> |
| 60 |
</div> |
| 61 |
); |
| 62 |
} |
| 63 |
|
