DND event based styling

Author: Neonsy

Task Snap Space/src/atoms/.gitkeep

@@ -0,0 +1,4 @@
+import { atom } from 'jotai';
+import { Task } from '../types/task';
+
+export const activeTaskAtom = atom<Task | null>(null);

Task Snap Space/src/atoms/activeTask.ts

@@ -1,7 +1,22 @@
+import {
+ DndContext,
+ DragEndEvent,
+ DragOverEvent,
+ DragOverlay,
+ DragStartEvent,
+ KeyboardSensor,
+ MouseSensor,
+ PointerSensor,
+ useSensor,
+ useSensors,
+} from '@dnd-kit/core';
+import { useAtom } from 'jotai';
+import { createPortal } from 'react-dom';
 import { useShallow } from 'zustand/shallow';
+import { activeTaskAtom } from '../../../atoms/activeTask';
 import { useBoundStore } from '../../../store/store';
+import TaskCard from '../task/card';
 import TaskCategory from '../task/category';
-import { DndContext, KeyboardSensor, MouseSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 
 export default function Dashboard() {
  const { categories, tasks } = useBoundStore(
@@ -11,6 +26,8 @@ export default function Dashboard() {
  }))
  );
 
+ const [activeTask, setActiveTask] = useAtom(activeTaskAtom);
+
  const sensors = useSensors(
  useSensor(KeyboardSensor),
  useSensor(PointerSensor, { activationConstraint: { distance: 0.1 } }),
@@ -20,13 +37,36 @@ export default function Dashboard() {
  return (
  <section className='bg-white px-12 py-6 flex flex-col gap-y-5 rounded-xl shadow-lg shadow-black/25'>
  <h2 className='font-bold'>Your Task Dashboard</h2>
- <DndContext sensors={sensors}>
+ <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd} onDragOver={onDragOver}>
  <div className='grid grid-cols-3 gap-x-12'>
  {categories.map((category) => (
  <TaskCategory key={category.id} type={category.id} taskList={tasks.filter((task) => task.columnId === category.id)} />
  ))}
  </div>
+ {activeTask &&
+ createPortal(
+ <DragOverlay>
+ <TaskCard task={activeTask} />
+ </DragOverlay>,
+ document.body
+ )}
  </DndContext>
  </section>
  );
+
+ function onDragStart(event: DragStartEvent) {
+ const { active } = event;
+
+ setActiveTask(active.data.current?.task);
+ }
+
+ function onDragOver(event: DragOverEvent) {
+ const { active, over } = event;
+
+ console.log(active, over);
+ }
+
+ function onDragEnd() {
+ setActiveTask(null);
+ }
 }

Task Snap Space/src/pages/app/sections/dashboard.tsx

@@ -6,10 +6,12 @@ import { CSS } from '@dnd-kit/utilities';
 
 type Props = {
  task: Task;
+ bg?: string;
+ transparent?: boolean;
 };
 
-export default function TaskCard({ task }: Props) {
- const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+export default function TaskCard({ task, bg, transparent }: Props) {
+ const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
  id: task.id,
  data: {
  type: 'task',
@@ -22,8 +24,28 @@ export default function TaskCard({ task }: Props) {
  transition,
  };
 
+ if (isDragging) {
+ return (
+ <div
+ ref={setNodeRef}
+ style={style}
+ className={`opacity-75 first:rounded-b-xl rounded-xl w-full min-h-12 max-h-36 ${bg} ring-2 ring-inset ring-slate-950 shadow-lg shadow-black/15 py-2 flex items-center gap-x-2 px-3`}>
+ <button className='invisible'>
+ <IoCloseOutline className='w-7 h-7' />
+ </button>
+ <p className='break-all flex-grow invisible'>{task.content}</p>
+ <button className='invisible' {...listeners} {...attributes}>
+ <MdOutlineDragIndicator />
+ </button>
+ </div>
+ );
+ }
+
  return (
- <div ref={setNodeRef} style={style} className='bg-slate-50 shadow-lg shadow-black/15 py-2 flex items-center gap-x-2 px-3'>
+ <div
+ ref={setNodeRef}
+ style={style}
+ className={`${transparent ? 'opacity-25' : ''} w-full min-h-12 max-h-36 first:rounded-b-xl rounded-xl bg-slate-50 shadow-lg shadow-black/15 py-2 flex items-center gap-x-2 px-3`}>
  <button>
  <IoCloseOutline className='w-7 h-7' />
  </button>

Task Snap Space/src/pages/app/task/card.tsx

@@ -13,7 +13,7 @@ type Props = {
 export default function TaskCategory({ taskList, type }: Props) {
  const taskIds = useMemo(() => taskList.map((task) => task.id), [taskList]);
 
- const { setNodeRef } = useDroppable({
+ const { setNodeRef, over } = useDroppable({
  id: type,
  data: {
  type,
@@ -27,6 +27,31 @@ export default function TaskCategory({ taskList, type }: Props) {
  completed: { heading: 'Completed', bg: 'bg-[#4F46E5]' },
  }[type];
 
+ if (over?.data.current?.task !== undefined) {
+ if (over?.data.current?.task.columnId !== type) {
+ return (
+ <div>
+ <div
+ className={`flex justify-between items-center ${bg} text-white shadow-xl shadow-black/50 font-bold px-3 py-2 rounded-tl-xl rounded-tr-xl`}>
+ <h3>{heading}</h3>
+ <FiCheckSquare className='text-2xl' />
+ </div>
+
+ <div ref={setNodeRef} className={`${bg} relative bg-opacity-25 flex flex-col gap-y-2.5 pb-12`}>
+ <SortableContext items={taskIds} strategy={verticalListSortingStrategy}>
+ {taskList.map((task) => (
+ <TaskCard key={task.id} task={task} bg={bg} transparent />
+ ))}
+ </SortableContext>
+ <p className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-xl text-slate-950'>
+ Move Task Here
+ </p>
+ </div>
+ </div>
+ );
+ }
+ }
+
  return (
  <div>
  <div
@@ -38,7 +63,7 @@ export default function TaskCategory({ taskList, type }: Props) {
  <div ref={setNodeRef} className='bg-slate-100 flex flex-col gap-y-2.5 pb-12'>
  <SortableContext items={taskIds} strategy={verticalListSortingStrategy}>
  {taskList.map((task) => (
- <TaskCard key={task.id} task={task} />
+ <TaskCard key={task.id} task={task} bg={bg} />
  ))}
  </SortableContext>
  </div>