| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import { useDraggable } from '@dnd-kit/core'; |
| 3 |
import { getAllElements } from '../fields/FieldRegistry'; |
| 4 |
|
| 5 |
/** |
| 6 |
* Left sidebar — lists all element types available to drag into the canvas. |
| 7 |
* Each item is a @dnd-kit Draggable (not sortable — the list is fixed). |
| 8 |
*/ |
| 9 |
export default function FieldsPanel() { |
| 10 |
const elements = getAllElements(); |
| 11 |
|
| 12 |
return ( |
| 13 |
<div className="bp-cb-fields-panel"> |
| 14 |
<h3 className="bp-cb-panel-heading">{ __( 'Elements', 'better-payment' ) }</h3> |
| 15 |
<p className="bp-cb-panel-hint">{ __( 'Drag or click to add to a column', 'better-payment' ) }</p> |
| 16 |
<ul className="bp-cb-field-list"> |
| 17 |
{ elements.map( ( el ) => ( |
| 18 |
<DraggableElement key={ el.type } element={ el } /> |
| 19 |
) ) } |
| 20 |
</ul> |
| 21 |
</div> |
| 22 |
); |
| 23 |
} |
| 24 |
|
| 25 |
function DraggableElement( { element } ) { |
| 26 |
const { attributes, listeners, setNodeRef, isDragging } = useDraggable( { |
| 27 |
id: `panel-${ element.type }`, |
| 28 |
data: { |
| 29 |
source: 'panel', |
| 30 |
elementType: element.type, |
| 31 |
defaultSettings: element.defaultSettings, |
| 32 |
}, |
| 33 |
} ); |
| 34 |
|
| 35 |
return ( |
| 36 |
<li |
| 37 |
ref={ setNodeRef } |
| 38 |
className={ `bp-cb-field-item${ isDragging ? ' is-dragging' : '' }` } |
| 39 |
title={ element.label } |
| 40 |
{ ...listeners } |
| 41 |
{ ...attributes } |
| 42 |
> |
| 43 |
<span className={ `dashicons dashicons-${ element.icon }` }></span> |
| 44 |
<span className="bp-cb-field-label">{ element.label }</span> |
| 45 |
</li> |
| 46 |
); |
| 47 |
} |
| 48 |
|
