| 1 |
import { useSortable } from '@dnd-kit/sortable'; |
| 2 |
import { CSS } from '@dnd-kit/utilities'; |
| 3 |
|
| 4 |
const SortableItem = (props) => { |
| 5 |
const { attributes, listeners, setNodeRef, transform, transition } = |
| 6 |
useSortable({ id: props.id }); |
| 7 |
|
| 8 |
const itemStyle = { |
| 9 |
transform: CSS.Transform.toString(transform), |
| 10 |
transition, |
| 11 |
}; |
| 12 |
|
| 13 |
return ( |
| 14 |
<div style={itemStyle} ref={setNodeRef} className="dnd-fields-wrapper"> |
| 15 |
{props.children} |
| 16 |
<button {...attributes} {...listeners} className="float-btn"> |
| 17 |
<svg |
| 18 |
width="24" |
| 19 |
height="24" |
| 20 |
viewBox="0 0 24 24" |
| 21 |
fill="none" |
| 22 |
xmlns="http://www.w3.org/2000/svg" |
| 23 |
> |
| 24 |
<path |
| 25 |
d="M9 12.5C9.55228 12.5 10 12.0523 10 11.5C10 10.9477 9.55228 10.5 9 10.5C8.44772 10.5 8 10.9477 8 11.5C8 12.0523 8.44772 12.5 9 12.5Z" |
| 26 |
fill="#4D4D4D" |
| 27 |
/> |
| 28 |
<path |
| 29 |
d="M9 12.5C9.55228 12.5 10 12.0523 10 11.5C10 10.9477 9.55228 10.5 9 10.5C8.44772 10.5 8 10.9477 8 11.5C8 12.0523 8.44772 12.5 9 12.5Z" |
| 30 |
fill="#39394D" |
| 31 |
/> |
| 32 |
<path |
| 33 |
d="M9 7C9.55228 7 10 6.55228 10 6C10 5.44772 9.55228 5 9 5C8.44772 5 8 5.44772 8 6C8 6.55228 8.44772 7 9 7Z" |
| 34 |
fill="#4D4D4D" |
| 35 |
/> |
| 36 |
<path |
| 37 |
d="M9 7C9.55228 7 10 6.55228 10 6C10 5.44772 9.55228 5 9 5C8.44772 5 8 5.44772 8 6C8 6.55228 8.44772 7 9 7Z" |
| 38 |
fill="#39394D" |
| 39 |
/> |
| 40 |
<path |
| 41 |
d="M9 18C9.55228 18 10 17.5523 10 17C10 16.4477 9.55228 16 9 16C8.44772 16 8 16.4477 8 17C8 17.5523 8.44772 18 9 18Z" |
| 42 |
fill="#4D4D4D" |
| 43 |
/> |
| 44 |
<path |
| 45 |
d="M9 18C9.55228 18 10 17.5523 10 17C10 16.4477 9.55228 16 9 16C8.44772 16 8 16.4477 8 17C8 17.5523 8.44772 18 9 18Z" |
| 46 |
fill="#39394D" |
| 47 |
/> |
| 48 |
<path |
| 49 |
d="M15 12.5C15.5523 12.5 16 12.0523 16 11.5C16 10.9477 15.5523 10.5 15 10.5C14.4477 10.5 14 10.9477 14 11.5C14 12.0523 14.4477 12.5 15 12.5Z" |
| 50 |
fill="#4D4D4D" |
| 51 |
/> |
| 52 |
<path |
| 53 |
d="M15 12.5C15.5523 12.5 16 12.0523 16 11.5C16 10.9477 15.5523 10.5 15 10.5C14.4477 10.5 14 10.9477 14 11.5C14 12.0523 14.4477 12.5 15 12.5Z" |
| 54 |
fill="#39394D" |
| 55 |
/> |
| 56 |
<path |
| 57 |
d="M15 7C15.5523 7 16 6.55228 16 6C16 5.44772 15.5523 5 15 5C14.4477 5 14 5.44772 14 6C14 6.55228 14.4477 7 15 7Z" |
| 58 |
fill="#4D4D4D" |
| 59 |
/> |
| 60 |
<path |
| 61 |
d="M15 7C15.5523 7 16 6.55228 16 6C16 5.44772 15.5523 5 15 5C14.4477 5 14 5.44772 14 6C14 6.55228 14.4477 7 15 7Z" |
| 62 |
fill="#39394D" |
| 63 |
/> |
| 64 |
<path |
| 65 |
d="M15 18C15.5523 18 16 17.5523 16 17C16 16.4477 15.5523 16 15 16C14.4477 16 14 16.4477 14 17C14 17.5523 14.4477 18 15 18Z" |
| 66 |
fill="#4D4D4D" |
| 67 |
/> |
| 68 |
<path |
| 69 |
d="M15 18C15.5523 18 16 17.5523 16 17C16 16.4477 15.5523 16 15 16C14.4477 16 14 16.4477 14 17C14 17.5523 14.4477 18 15 18Z" |
| 70 |
fill="#39394D" |
| 71 |
/> |
| 72 |
</svg> |
| 73 |
</button> |
| 74 |
</div> |
| 75 |
); |
| 76 |
}; |
| 77 |
|
| 78 |
export default SortableItem; |
| 79 |
|
