chore: hardened dnd boundary

This commit is contained in:
Anoop M D 2023-02-01 10:05:09 +05:30
parent be49ef5f12
commit 524a59aed4
3 changed files with 5 additions and 5 deletions

View File

@ -36,7 +36,7 @@ const CollectionItem = ({ item, collection, searchText }) => {
const [itemIsCollapsed, setItemisCollapsed] = useState(item.collapsed); const [itemIsCollapsed, setItemisCollapsed] = useState(item.collapsed);
const [{ isDragging }, drag] = useDrag({ const [{ isDragging }, drag] = useDrag({
type: 'COLLECTION_ITEM', type: `COLLECTION_ITEM_${collection.uid}`,
item: item, item: item,
collect: (monitor) => ({ collect: (monitor) => ({
isDragging: monitor.isDragging() isDragging: monitor.isDragging()
@ -44,7 +44,7 @@ const CollectionItem = ({ item, collection, searchText }) => {
}); });
const [{ isOver }, drop] = useDrop({ const [{ isOver }, drop] = useDrop({
accept: 'COLLECTION_ITEM', accept: `COLLECTION_ITEM_${collection.uid}`,
drop: (draggedItem) => { drop: (draggedItem) => {
if (draggedItem.uid !== item.uid) { if (draggedItem.uid !== item.uid) {
dispatch(moveItem(collection.uid, draggedItem.uid, item.uid)); dispatch(moveItem(collection.uid, draggedItem.uid, item.uid));

View File

@ -65,7 +65,7 @@ const Collection = ({ collection, searchText }) => {
}; };
const [{ isOver }, drop] = useDrop({ const [{ isOver }, drop] = useDrop({
accept: 'COLLECTION_ITEM', accept: `COLLECTION_ITEM_${collection.uid}`,
drop: (draggedItem) => { drop: (draggedItem) => {
dispatch(moveItemToRootOfCollection(collection.uid, draggedItem.uid)); dispatch(moveItemToRootOfCollection(collection.uid, draggedItem.uid));
}, },

View File

@ -60,9 +60,9 @@ const Welcome = () => {
Create Collection Create Collection
</span> </span>
</div> </div>
<div className="flex items-center ml-6"> <div className="flex items-center ml-6" onClick={handleOpenCollection}>
<IconFolders size={18} strokeWidth={2} /> <IconFolders size={18} strokeWidth={2} />
<span className="label ml-2" onClick={handleOpenCollection}> <span className="label ml-2">
Open Collection Open Collection
</span> </span>
</div> </div>