| 1 |
import { memo, useRef, useState } from "@wordpress/element"; |
| 2 |
import Toggle from "../toggle/toggle"; |
| 3 |
import { DndTitleIcon } from "../../icons/icons"; |
| 4 |
import { DndContext, PointerSensor, useSensor, useSensors } from "@dnd-kit/core"; |
| 5 |
import { restrictToVerticalAxis, restrictToParentElement } from "@dnd-kit/modifiers"; |
| 6 |
import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable"; |
| 7 |
import { CSS } from "@dnd-kit/utilities"; |
| 8 |
import "./dnd-select.scss"; |
| 9 |
|
| 10 |
const SortableItem = memo((props) => { |
| 11 |
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ |
| 12 |
id: props.id, |
| 13 |
disabled: true, |
| 14 |
}); |
| 15 |
|
| 16 |
const { item, toggleBtn, onChange, disabledItem } = props; |
| 17 |
const style = { |
| 18 |
transform: CSS.Transform.toString(transform), |
| 19 |
transition: transition, |
| 20 |
}; |
| 21 |
|
| 22 |
return ( |
| 23 |
<> |
| 24 |
<div |
| 25 |
ref={setNodeRef} |
| 26 |
style={style} |
| 27 |
{...attributes} |
| 28 |
{...listeners} |
| 29 |
className={`${isDragging ? "sp-grabbing" : "sp-grab"}${disabledItem ? " sp-disabled" : ""}`} |
| 30 |
> |
| 31 |
<div className={`sp-selected-option${item?.pro ? " sp-smart-pro-item" : ""}`}> |
| 32 |
{/* Display the label of the item */} |
| 33 |
<span className={`sp-select-label`}> |
| 34 |
<DndTitleIcon /> {item?.label} |
| 35 |
{item?.pro && <a target="_blank" href="https://wpsmartpost.com/pricing/?ref=1" className="sp-smart-pro-text"> (Pro) </a>} |
| 36 |
</span> |
| 37 |
|
| 38 |
{/* Delete button */} |
| 39 |
{toggleBtn && ( |
| 40 |
<span className="sp-select-toggle-button"> |
| 41 |
<Toggle attributes={item.show} onChange={() => onChange(item)}/> |
| 42 |
</span> |
| 43 |
)} |
| 44 |
</div> |
| 45 |
</div> |
| 46 |
</> |
| 47 |
); |
| 48 |
}); |
| 49 |
|
| 50 |
const DragAndDropDnd = ({ label = "", items, toggleBtn = false, onChange, catTabCategoryPosition = "" }) => { |
| 51 |
const [allOptions, setAllOptions] = useState(items); |
| 52 |
const dndRef = useRef(null); |
| 53 |
const containerRef = useRef(null); |
| 54 |
|
| 55 |
const sensors = useSensors( |
| 56 |
useSensor(PointerSensor, { |
| 57 |
activationConstraint: { distance: 5 }, |
| 58 |
}) |
| 59 |
); |
| 60 |
|
| 61 |
const handleDragEnd = (event) => { |
| 62 |
const { active, over } = event; |
| 63 |
if (active.id !== over.id) { |
| 64 |
const oldIndex = allOptions.findIndex((i) => `${i.id}` === `${active.id}`); |
| 65 |
const newIndex = allOptions.findIndex((i) => `${i.id}` === `${over.id}`); |
| 66 |
const updateValues = arrayMove(allOptions, oldIndex, newIndex); |
| 67 |
onChange(updateValues); |
| 68 |
setAllOptions(updateValues); |
| 69 |
|
| 70 |
// const taxonomyIndex = updateValues?.findIndex( |
| 71 |
// ( item ) => item.value === 'taxonomy' |
| 72 |
// ); |
| 73 |
// const titleIndex = updateValues.findIndex( |
| 74 |
// ( item ) => item.value === 'title' |
| 75 |
// ); |
| 76 |
// if ( |
| 77 |
// taxonomyIndex !== -1 && |
| 78 |
// titleIndex !== -1 && |
| 79 |
// taxonomyIndex !== titleIndex - 1 && |
| 80 |
// setAttributes |
| 81 |
// ) { |
| 82 |
// setAttributes( { catTabCategoryPosition: '' } ); |
| 83 |
// } |
| 84 |
} |
| 85 |
}; |
| 86 |
|
| 87 |
const onToggleControl = (item) => { |
| 88 |
const updatedValues = allOptions?.map((val) => { |
| 89 |
if (val.id === item.id) { |
| 90 |
return { ...val, show: !val.show }; |
| 91 |
} |
| 92 |
return val; |
| 93 |
}); |
| 94 |
setAllOptions(updatedValues); |
| 95 |
onChange(updatedValues); |
| 96 |
}; |
| 97 |
|
| 98 |
return ( |
| 99 |
<div className="shaped-plugin-multiple-select sp-smart-post-component-mb" ref={dndRef}> |
| 100 |
{label && ( |
| 101 |
<div className="sp-multiple-select-dnd-label"> |
| 102 |
<p> {label}</p> |
| 103 |
</div> |
| 104 |
)} |
| 105 |
<div className="sp-drag-and-drop-dnd-container" ref={containerRef}> |
| 106 |
{!["", "above-title"].includes(catTabCategoryPosition) && ( |
| 107 |
<SortableItem |
| 108 |
key={"0"} |
| 109 |
id={`item-id-sp-0`} |
| 110 |
index={"0"} |
| 111 |
item={{ label: "Taxonomy (Category)" }} |
| 112 |
disabledItem={true} |
| 113 |
/> |
| 114 |
)} |
| 115 |
<div className="sp-selected-options"> |
| 116 |
<DndContext |
| 117 |
sensors={sensors} |
| 118 |
onDragEnd={handleDragEnd} |
| 119 |
modifiers={[restrictToVerticalAxis, restrictToParentElement]} |
| 120 |
> |
| 121 |
<SortableContext |
| 122 |
items={allOptions?.map((item) => `${item.id}`)} |
| 123 |
strategy={verticalListSortingStrategy} |
| 124 |
> |
| 125 |
{["", "above-title"].includes(catTabCategoryPosition) |
| 126 |
? allOptions?.map((item, index) => ( |
| 127 |
<SortableItem |
| 128 |
key={item.id} |
| 129 |
id={`${item.id}`} |
| 130 |
index={index} |
| 131 |
item={item} |
| 132 |
toggleBtn={toggleBtn} |
| 133 |
onChange={onToggleControl} |
| 134 |
/> |
| 135 |
)) |
| 136 |
: allOptions |
| 137 |
?.filter((t) => t.value !== "taxonomy") |
| 138 |
.map((item, index) => ( |
| 139 |
<SortableItem |
| 140 |
key={item.id} |
| 141 |
id={`${item.id}`} |
| 142 |
index={index} |
| 143 |
item={item} |
| 144 |
toggleBtn={toggleBtn} |
| 145 |
onChange={onToggleControl} |
| 146 |
/> |
| 147 |
))} |
| 148 |
</SortableContext> |
| 149 |
</DndContext> |
| 150 |
</div> |
| 151 |
</div> |
| 152 |
</div> |
| 153 |
); |
| 154 |
}; |
| 155 |
|
| 156 |
export default memo(DragAndDropDnd); |
| 157 |
|
