react-weekly-planning 1.0.40 → 1.0.42

package/README.md

@@ -425,7 +425,41 @@ to create an organization that truly reflects you.
   console.log(hashes.day);   // "0/group-1/2"
   ```
 
+### `getNewTaskForDropOrPaste`
 
----
+- **Description**: Utility function to generate a new task correctly positioned when dropping or pasting it in a custom calendar context. It reads the dragged task information from the browser's `sessionStorage` and calculates the new start/end dates based on the drop target.
+- **Parameters**:
+  - `positionDay` (number): The index of the day where the task is dropped or pasted (0-6).
+  - `dropGroupId` (string): The ID of the group where the task is dropped or pasted.
+  - `getTask` (function): The function `(hash: string, taskId: string) => TaskFeildsType | undefined` (available from `useCalendarTaskContext`) to retrieve the original task being dragged.
+  - `hash` (string): The hash for the current view, representing the destination bucket.
+- **Returns**: An object containing `{ taskDropStart, taskDropEnd, taskDropDate, newTask }` or `undefined` if no task is currently in the session storage.
 
+  **Example**:
+  ```tsx
+  import { getNewTaskForDropOrPaste, useCalendarTaskContext } from "react-weekly-planning";
+
+  const CustomCell = ({ dayIndex, groupId, currentHash }) => {
+    const { getTask, addTask } = useCalendarTaskContext();
+
+    const handleDrop = (e) => {
+      e.preventDefault();
+      
+      const result = getNewTaskForDropOrPaste(
+        dayIndex,
+        groupId,
+        getTask,
+        currentHash
+      );
+
+      if (result && result.newTask) {
+        addTask(result.newTask);
+      }
+    };
+
+    return <div onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>Drop Here</div>;
+  };
+  ```
+
+---
 

package/dist/components/VirtualGroupRow.js

@@ -5,7 +5,7 @@ import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
 import GroupContainer from "./GroupContainer";
 import TaskVirtual from "./TaskContainer/TaskVirtual";
 import AddTask from "./AddTask";
-import { getHash, getSessionStorageRecordForDragAndDrop, getUnqueId, updateOffsetWithDateCalendar, } from "../lib/utils";
+import { getHash, getNewTaskForDropOrPaste, getUnqueId, updateOffsetWithDateCalendar, } from "../lib/utils";
 import { groupTdStyle } from "../lib/slyles";
 const VirtualGroupRow = ({ group, i, props, getTasks, isValidTask, addTask, deleteTask, getTask, dailyHours, hashScope, tasks, sumHoursByGroupsCount }) => {
     const ref = useRef(null);
@@ -30,7 +30,7 @@ const VirtualGroupRow = ({ group, i, props, getTasks, isValidTask, addTask, dele
     }, [isVisible, offset, group.id, dailyHours, hashScope, getTasks, isValidTask, tasks]);
     return (_jsx("div", { ref: ref, className: `planningCalendarRow ${props.rowsClassName}`, style: Object.assign(Object.assign({}, props.rowsStyle), { minHeight: isVisible ? "auto" : "60px" }), children: isVisible ? (_jsxs(_Fragment, { children: [_jsx("div", { className: `groupCol ${props.groupsColsClassName}`, style: Object.assign(Object.assign({}, groupTdStyle), props.groupsColsStyle), children: _jsx(GroupContainer, { style: props.groupContainerStyle, className: props.groupContainerClassName, groupRender: props.groupRender, currentGroup: group, handleClickGroup: props.handleClickGroup }) }, group.id), cellData.map((cell) => {
                     return (_jsx("div", { onDragOver: (e) => e.preventDefault(), onDrop: (event) => {
-                            const dropInfo = getSessionStorageRecordForDragAndDrop(cell.tasks, cell.positionDay, group.id, getTask, cell.hash);
+                            const dropInfo = getNewTaskForDropOrPaste(cell.positionDay, group.id, getTask, cell.hash);
                             if (!dropInfo)
                                 return;
                             if (props.drop === "copy") {

package/dist/components/VirtualGroupRowDay.js

@@ -4,7 +4,7 @@ import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
 import GroupContainer from "./GroupContainer";
 import TaskVirtual from "./TaskContainer/TaskVirtual";
 import AddTask from "./AddTask";
-import { getHash, getSessionStorageRecordForDragAndDrop, getUnqueId, updateOffsetWithDateCalendar, } from "../lib/utils";
+import { getHash, getNewTaskForDropOrPaste, getUnqueId, updateOffsetWithDateCalendar, } from "../lib/utils";
 const VirtualGroupRowDay = ({ group, i, props, getTasks, isValidTask, addTask, deleteTask, updateTask, getTask, dailyHours, dayOffset, hashScope, tasks, }) => {
     const ref = useRef(null);
     const entry = useIntersectionObserver(ref, {
@@ -22,7 +22,7 @@ const VirtualGroupRowDay = ({ group, i, props, getTasks, isValidTask, addTask, d
     return (_jsx("div", { ref: ref, style: Object.assign({ width: "100%", height: "auto", padding: "5px", borderBottom: "1.5px solid #0f52737e", borderRight: "0.74px solid rgba(198, 219, 225, 0.68)", borderLeft: "0.74px solid rgba(198, 219, 225, 0.68)", minHeight: isVisible ? "auto" : "60px" }, props.rowsStyle), className: `CalendarTableForDayRow ${props.rowsClassName}`, children: isVisible ? (_jsxs(_Fragment, { children: [_jsx("div", { style: Object.assign({ width: "auto", height: "auto" }, props.groupsColsStyle), className: props.groupsColsClassName, children: _jsx(GroupContainer, { style: props.groupContainerStyle, className: props.groupContainerClassName, groupRender: props.groupRender, currentGroup: group, handleClickGroup: props.handleClickGroup }) }), _jsxs("div", { className: "CalendarTableForDayGroupTasks", onDragOver: handleDragOver, onDrop: (event) => {
                         if (!cellTasks)
                             return;
-                        const dropInfo = getSessionStorageRecordForDragAndDrop(cellTasks, currentDailyHours.positionDay, group.id, getTask, hash[hashScope]);
+                        const dropInfo = getNewTaskForDropOrPaste(currentDailyHours.positionDay, group.id, getTask, hash[hashScope]);
                         if (!dropInfo)
                             return;
                         if (props.drop === "copy") {

package/dist/components/style.css

@@ -0,0 +1,167 @@
+.addPlanStyle {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  background-color: #f2f8fb;
+  opacity: 0;
+  border-radius: 5px;
+  color: #0f5173;
+  transition: background-color 0.3s, opacity 0.3s;
+}
+
+.addPlanStyle:hover {
+  background-color: #c6dbe159;
+  opacity: 1;
+}
+
+.taskContainer {
+  box-shadow: 0px 7px 18px 0px rgba(15, 105, 115, 0.03),
+    0px 6px 10px 0px rgba(15, 105, 115, 0.04),
+    0px 3px 5px 0px rgba(15, 105, 115, 0.05);
+  display: flex;
+  justify-content: center;
+  column-gap: 10px;
+  flex-direction: column;
+  height: auto;
+  border-left: 5px solid #457993;
+  background-color: #f4ffff;
+  color: #457993;
+  cursor: pointer;
+  border-radius: 5px;
+  margin-bottom: 5px;
+  font-size: 13px;
+  overflow: auto;
+  padding: 2px;
+  z-index: 10;
+}
+
+.tasklabel {
+  color: #55585d;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  margin-left: 5px;
+}
+
+.taskhour {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  margin-left: 5px;
+}
+
+.planningCalendar {
+  width: 100%;
+  border-radius: 0.5rem;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  border: 0.74px solid rgba(198, 219, 225, 0.68);
+
+  background-color: white;
+
+}
+
+.planningCalendarHeader {
+  display: flex;
+  width: 100%;
+  z-index: 200;
+  border-bottom: 1.5px solid #0f52737e;
+  background-color: #fff;
+}
+
+.planningCalendarRow {
+  display: flex;
+  width: 100%;
+  border-bottom: 1.5px solid #0f52737e;
+}
+
+.planningCalendarRow:last-child {
+  border-bottom: none;
+}
+
+.planningCalendar .dayTh,
+.planningCalendar .groupCol {
+  flex: 0 0 150px;
+  color: #0f5173;
+  padding-left: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.planningCalendar .dayCol {
+  flex: 1;
+  border-left: 0.74px solid rgba(198, 219, 225, 0.68);
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.planningCalendar .totalTh,
+.planningCalendar .totalCol {
+  flex: 0 0 50px;
+  color: #0f5173;
+  text-align: right;
+  padding-right: 5px;
+  border-left: 0.74px solid rgba(198, 219, 225, 0.68);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.CalendarTableForDay {
+  display: flex;
+  gap: 10px;
+  width: 100vw;
+  height: auto;
+}
+
+.CalendarTableForDayTasksContainer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  padding: 10px;
+  position: relative;
+}
+
+.CalendarTableForDayRow {
+  display: flex !important;
+  flex-direction: row !important;
+  gap: 15px;
+  align-items: flex-start;
+  padding: 15px !important;
+}
+
+.CalendarTableForDayGroupTasks {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 10px;
+}
+
+.CalendarTableForDayGroupTasks .taskContainer,
+.CalendarTableForDayGroupTasks .addPlanStyle {
+  margin-bottom: 0px;
+  height: 100%;
+  min-height: 80px;
+}
+
+.calendarForWeek {
+  display: flex;
+  width: 100%;
+  flex: 1;
+  overflow: auto;
+  position: relative;
+
+}
+
+.calendarForWeek-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}

package/dist/hooks/useData.js

@@ -1,6 +1,5 @@
 import { useMemo } from "react";
 export const useData = (sliceIndex, itemsByLine, windowLines, tasks, bottomBufferSize, topBufferSize) => {
-    console.log(sliceIndex, itemsByLine, windowLines, tasks, "virtual");
     const visibleTasks = useMemo(() => tasks.slice(Math.max(sliceIndex - topBufferSize, 0) * itemsByLine, Math.min(tasks.length, (windowLines + bottomBufferSize) * itemsByLine +
         sliceIndex * itemsByLine)), [sliceIndex, itemsByLine, windowLines, tasks]);
     return { visibleTasks };

package/dist/lib/utils.js

@@ -186,7 +186,7 @@ export function calculateWeekDifference(dateSelectionnee, timeZone) {
  * @param numeroSemaine - The week number.
  * @returns The number of weeks since the origin date.
  */
-export function getSessionStorageRecordForDragAndDrop(tasks, positionDay, dropGroupId, getTask, hash) {
+export function getNewTaskForDropOrPaste(positionDay, dropGroupId, getTask, hash) {
     const dragtaskId = window.sessionStorage.getItem("calendardragtaskId");
     const dragtaskStart = window.sessionStorage.getItem("calendardragtaskStart");
     const dragtaskEnd = window.sessionStorage.getItem("calendardragtaskEnd");
@@ -194,13 +194,12 @@ export function getSessionStorageRecordForDragAndDrop(tasks, positionDay, dropGr
     const draghash = window.sessionStorage.getItem("calendardraghash");
     let newTask;
     window.sessionStorage.clear();
-    if (!dragdayIndex || !dragtaskStart || !dragtaskEnd || !dragtaskId || !tasks)
+    if (!dragdayIndex || !dragtaskStart || !dragtaskEnd || !dragtaskId)
         return;
     const convertTaskDropStart = new Date(parseInt(dragtaskStart));
     if (draghash === null)
         return;
     const dragTask = getTask(draghash, dragtaskId);
-    console.log('dragTask', dragTask, draghash, hash);
     if (!dragTask)
         return;
     const dayIndex = parseInt(dragdayIndex);

package/dist/types/lib/utils.d.ts

@@ -35,7 +35,7 @@ export declare function calculateWeekDifference(dateSelectionnee: Date, timeZone
  * @param numeroSemaine - The week number.
  * @returns The number of weeks since the origin date.
  */
-export declare function getSessionStorageRecordForDragAndDrop(tasks: TasksType, positionDay: number, dropGroupId: string, getTask: (hash: string, taskId: string) => TaskFeildsType | undefined, hash: string): {
+export declare function getNewTaskForDropOrPaste(positionDay: number, dropGroupId: string, getTask: (hash: string, taskId: string) => TaskFeildsType | undefined, hash: string): {
     taskDropStart: number;
     taskDropEnd: number;
     taskDropDate: Date;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-weekly-planning",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {