| 1 |
import React from 'react'; |
| 2 |
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; |
| 3 |
|
| 4 |
import { __wpupg } from 'Shared/Translations'; |
| 5 |
|
| 6 |
const FieldOrder = (props) => { |
| 7 |
let allOptions = [ ...props.options ]; |
| 8 |
let orderToShow = []; |
| 9 |
|
| 10 |
// First follow the current order, but only include those that are still an option. |
| 11 |
for ( let value of props.value ) { |
| 12 |
const matchIndex = allOptions.findIndex( (option) => option.value === value ); |
| 13 |
|
| 14 |
if ( -1 < matchIndex ) { |
| 15 |
const match = allOptions.splice( matchIndex, 1 )[0]; |
| 16 |
orderToShow.push( match ); |
| 17 |
} |
| 18 |
} |
| 19 |
|
| 20 |
// Next, include the rest of the options that haven't been removed. |
| 21 |
orderToShow = [ |
| 22 |
...orderToShow, |
| 23 |
...allOptions, |
| 24 |
]; |
| 25 |
|
| 26 |
const onDragEnd = ( result ) => { |
| 27 |
if ( result.destination ) { |
| 28 |
let newOrder = JSON.parse( JSON.stringify( orderToShow ) ); |
| 29 |
const sourceIndex = result.source.index; |
| 30 |
const destinationIndex = result.destination.index; |
| 31 |
|
| 32 |
const item = newOrder.splice( sourceIndex, 1 )[0]; |
| 33 |
newOrder.splice( destinationIndex, 0, item ); |
| 34 |
|
| 35 |
// Only need values themselves. |
| 36 |
const newValue = newOrder.map( (item) => item.value ); |
| 37 |
|
| 38 |
props.onChange( newValue ); |
| 39 |
} |
| 40 |
} |
| 41 |
|
| 42 |
return ( |
| 43 |
<div className="wpupg-admin-modal-field-order"> |
| 44 |
<DragDropContext |
| 45 |
onDragEnd={ onDragEnd } |
| 46 |
> |
| 47 |
<Droppable |
| 48 |
droppableId={ props.id } |
| 49 |
> |
| 50 |
{(provided, snapshot) => ( |
| 51 |
<div |
| 52 |
className={`${ snapshot.isDraggingOver ? ' wpupg-admin-modal-field-order-draggingover' : ''}`} |
| 53 |
ref={provided.innerRef} |
| 54 |
{...provided.droppableProps} |
| 55 |
> |
| 56 |
{ |
| 57 |
orderToShow.map((item, index) => ( |
| 58 |
<Draggable |
| 59 |
draggableId={ `${ props.id }-item-${ item.value }` } |
| 60 |
index={ index } |
| 61 |
key={ item.value } |
| 62 |
> |
| 63 |
{(provided, snapshot) => { |
| 64 |
return ( |
| 65 |
<div |
| 66 |
className="wpupg-admin-modal-field-order-item" |
| 67 |
ref={provided.innerRef} |
| 68 |
{...provided.draggableProps} |
| 69 |
{...provided.dragHandleProps} |
| 70 |
> |
| 71 |
{ item.label } |
| 72 |
</div> |
| 73 |
) |
| 74 |
}} |
| 75 |
</Draggable> |
| 76 |
)) |
| 77 |
} |
| 78 |
{provided.placeholder} |
| 79 |
</div> |
| 80 |
)} |
| 81 |
</Droppable> |
| 82 |
</DragDropContext> |
| 83 |
</div> |
| 84 |
); |
| 85 |
} |
| 86 |
export default FieldOrder; |
| 87 |
|
