dragging styling

This commit is contained in:
2024-09-20 08:57:33 -06:00
parent 65cdb15e1c
commit 2b6b345f88
5 changed files with 74 additions and 37 deletions

View File

@@ -1,5 +1,5 @@
"use client";
import { ReactNode, useCallback, DragEvent } from "react";
import { ReactNode, useCallback, DragEvent, useState } from "react";
import { DraggingContext } from "./draggingContext";
import { useUpdateQuizMutation } from "@/hooks/localCourse/quizHooks";
import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
@@ -22,11 +22,13 @@ export default function DraggingContextProvider({
const updateAssignmentMutation = useUpdateAssignmentMutation();
const updatePageMutation = useUpdatePageMutation();
const { data: settings } = useLocalCourseSettingsQuery();
const [isDragging, setIsDragging] = useState(false);
const dragStart = useCallback(() => setIsDragging(true), []);
const itemDrop = useCallback(
(e: DragEvent<HTMLDivElement>, day: string | undefined) => {
const rawData = e.dataTransfer.getData("draggableItem");
// console.log(rawData);
const itemBeingDragged = JSON.parse(rawData);
if (itemBeingDragged && day) {
@@ -66,6 +68,7 @@ export default function DraggingContextProvider({
});
}
}
setIsDragging(false);
function updateAssignment(dayAsDate: Date) {
const previousAssignment = itemBeingDragged.item as LocalAssignment;
@@ -101,6 +104,8 @@ export default function DraggingContextProvider({
<DraggingContext.Provider
value={{
itemDrop,
isDragging,
dragStart,
}}
>
{children}

View File

@@ -9,12 +9,17 @@ export interface DraggableItem {
}
export interface DraggingContextInterface {
itemDrop: (e: DragEvent<HTMLDivElement>,droppedOnDay?: string) => void;
itemDrop: (e: DragEvent<HTMLDivElement>, droppedOnDay?: string) => void;
isDragging: boolean;
dragStart: () => void;
}
const defaultDraggingValue: DraggingContextInterface = {
itemDrop: () => { },
itemDrop: () => {},
isDragging: false,
dragStart: () => {},
};
export const DraggingContext = createContext<DraggingContextInterface>(defaultDraggingValue);
export const DraggingContext =
createContext<DraggingContextInterface>(defaultDraggingValue);
export function useDraggingContext() {
return useContext(DraggingContext);