react-weekly-planning 1.0.27 → 1.0.29

package/components/TaskContainer/index.tsx

@@ -0,0 +1,86 @@
+import { memo } from "react";
+import { TaskContainerPropsType } from "../../definitions";
+import { millisecondsToDate } from "../../lib/utils";
+
+const TaskContainer = ({
+  handleDragTask,
+  taskRender,
+  handleDragTaskEnd,
+  style,
+  className,
+  currentTask,
+  handleClickTask,
+
+}: TaskContainerPropsType) => {
+  
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    if (!handleDragTask) return;
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", currentTask.taskId);
+    window.sessionStorage.setItem("calendardragtaskId", currentTask.taskId);
+    window.sessionStorage.setItem(
+      "calendardragtaskStart",
+      `${currentTask.taskStart}`
+    );
+    window.sessionStorage.setItem(
+      "calendardragtaskEnd",
+      `${currentTask.taskEnd}`
+    );
+    window.sessionStorage.setItem(
+      "calendardragdayIndex",
+      `${currentTask.dayIndex}`
+    );
+    handleDragTask(event, currentTask);
+  };
+
+  const handleDragEnd = (event: React.DragEvent<HTMLDivElement>) => {
+    if (!handleDragTaskEnd) return;
+    handleDragTaskEnd(event);
+  };
+
+  const handleClick = () => {
+    if (!handleClickTask) return;
+    handleClickTask(currentTask);
+  };
+
+  if (taskRender) {
+    return (
+      <div
+        onClick={handleClick}
+        id={currentTask.taskId}
+        className={`taskContainer ${className}`}
+        style={{ ...style }}
+        draggable
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        {taskRender({
+          currentTask,
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      onClick={handleClick}
+      id={currentTask.taskId}
+      className={`taskContainer  ${className}`}
+      style={{ ...style }}
+      draggable
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <p className="tasklabel">{currentTask.task && currentTask.task}</p>
+      <p className="taskhour">
+        {currentTask.taskStart &&
+          currentTask.taskEnd &&
+          `${millisecondsToDate(currentTask.taskStart).formattedDate} - ${
+            millisecondsToDate(currentTask.taskEnd).formattedDate
+          }`}
+      </p>
+    </div>
+  );
+};
+
+export default memo(TaskContainer);

package/definitions/index.ts

@@ -33,7 +33,7 @@ type GroupRiquiredFieldsType = {
 /**
  * Additional fields for a group.
  */
-type GroupAdditionalFieldsType = Record<any,any>;
+type GroupAdditionalFieldsType = Record<any, any>;
 
 /**
  * Fields for a group, including both required and additional fields.
@@ -310,8 +310,8 @@ export type TaskType = {
   dayIndex: number;
   /** Unique identifier for the task. */
   taskId: string;
-   /** This is a prop to save the date in local storage until a date of your choice */
-  taskExpiryDate?:Date
+  /** This is a prop to save the date in local storage until a date of your choice */
+  taskExpiryDate?: Date;
 };
 
 /**
@@ -420,3 +420,24 @@ export type SumHoursContainerPropsType = {
   /** Additional class names for the sum hours container. */
   className?: string;
 };
+export type weekDaysType = {
+  day: string;
+  dayMonth: string;
+  dayYear: number;
+  dayOfTheMonth: number;
+}[];
+
+export type dailyHoursType = {
+  positionDay: number;
+  day: Date;
+  start: number;
+  end: number;
+}[];
+
+type AdditionalCalandarTableType = {
+  weekDays: weekDaysType;
+  dailyHours: dailyHoursType;
+  handleDragOver: (event: React.DragEvent<HTMLTableDataCellElement>) => void;
+};
+
+export type CalendarTablePropsType = CalendarPropsType;

package/hooks/useCalendarDateState.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+import { calculerEcartSemaine, getDayHourly, getWeekDays } from "../lib/utils";
+function useCalendarDateState(date, weekOffset) {
+    const [calendarDateState, setCalendarDateState] = useState({ dailyHours: [], weekDays: [] });
+    useEffect(() => {
+        const weekOffsetByDate = calculerEcartSemaine(date);
+        const weekDays = getWeekDays(weekOffsetByDate || weekOffset || 0);
+        const dailyHours = getDayHourly(weekOffsetByDate || weekOffset || 0);
+        setCalendarDateState({ dailyHours: dailyHours, weekDays });
+    }, [date, weekOffset]);
+    return Object.assign({}, calendarDateState);
+}
+export default useCalendarDateState;

package/hooks/useCalendarDateState.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { calculerEcartSemaine, getDayHourly, getWeekDays } from "../lib/utils";
+import { dailyHoursType, weekDaysType } from "../definitions";
+
+function useCalendarDateState(date: Date, weekOffset: number | undefined) {
+  const [calendarDateState, setCalendarDateState] = useState<{
+    weekDays: weekDaysType;
+    dailyHours: dailyHoursType;
+  }>({ dailyHours: [], weekDays: [] });
+
+  useEffect(() => {
+  
+    const weekOffsetByDate = calculerEcartSemaine(date);
+    const weekDays = getWeekDays(weekOffsetByDate || weekOffset || 0);
+    const dailyHours = getDayHourly(weekOffsetByDate || weekOffset || 0);
+    setCalendarDateState({ dailyHours: dailyHours, weekDays });
+    
+  }, [date, weekOffset]);
+
+  return { ...calendarDateState };
+}
+
+export default useCalendarDateState;
+

package/index.js

@@ -1,38 +1,6 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import "./style.css";
-import { getWeekDays, getDayHourly, calculerEcartSemaine, getSessionStorageRecordForDragAndDrop, sumHoursByGroups, millisecondsToDate, compareWeekOffset, saveTasksToLocalStorage, } from "./lib/utils";
-const theadTrStyle = {
-    color: "#0f5173",
-    fontWeight: "300",
-    position: "sticky",
-    top: 0,
-};
-const groupTdStyle = {
-    height: "auto",
-    width: "150px",
-};
-const groupContainerStyle = {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "0.75rem", // Correspond à gap-3
-    padding: "0.75rem", // Correspond à p-3
-    color: "#0f5173",
-    cursor: "pointer",
-};
+import CalendarTable from "./components/CalendarTable";
 /**
  * Calendar component to display tasks and groups in a weekly view.
  *
@@ -78,171 +46,7 @@ const groupContainerStyle = {
  * @param {Function} [props.handleClickTask] - Handler function for clicking a task.
  * @returns {JSX.Element} The rendered Calendar component.
  */
-const Calendar = ({ style, className, groups, weekOffset, date, groupRender, dayRender, rowsStyle, groupsColsStyle, daysColsStyle, addTaskRender, handleAddTask, dayClassName, dayStyle, groupClassName, groupStyle, addTaskClassName, addTaskStyle, tasks, handleDragTask, handleDropTask, taskRender, groupsHeadRender, sumHoursRender, sumHoursHeadRender, handleDragTaskEnd, rowsClassName, daysColsClassName, sumHoursContainerClassName, sumHoursContainerStyle, groupHeadContainerClassName, groupHeadContainerStyle, groupsColsClassName, taskContainerClassName, taskContainerStyle, sumHoursHeadClassName, sumHoursHeadStyle, handleClickGroup, handleClickTask, }) => {
-    const weekOffsetByDate = calculerEcartSemaine(date);
-    const weekDays = getWeekDays(weekOffsetByDate || weekOffset || 0);
-    const dailyHours = getDayHourly(weekOffsetByDate || weekOffset || 0);
-    const handleDragOver = (event) => {
-        event.preventDefault();
-    };
-    saveTasksToLocalStorage(tasks);
-    return (_jsxs("table", { className: `planningCalendar ${className}`, style: Object.assign({}, style), children: [_jsx("thead", { children: _jsxs("tr", { className: `${rowsClassName}`, style: Object.assign(Object.assign({}, theadTrStyle), rowsStyle), children: [_jsx("th", { className: "dayTh", children: _jsx(GroupsHeadContainer, { className: `${groupHeadContainerClassName}`, style: groupHeadContainerStyle, groupsHeadRender: groupsHeadRender }) }), weekDays.map((day, i) => (_jsx("th", { className: `${daysColsClassName}`, style: Object.assign({}, daysColsStyle), children: _jsx(DayContainer, { style: dayStyle, className: dayClassName, dayIndex: i, dayRender: dayRender, day: day.day, dayOfTheMonth: day.dayOfTheMonth, dayMonth: day.dayMonth, dayYear: day.dayYear }) }, i))), _jsx("th", { className: "totalTh", children: _jsx(SumHoursHead, { className: sumHoursHeadClassName, style: sumHoursHeadStyle, sumHoursHeadRender: sumHoursHeadRender }) })] }, "") }), _jsx("tbody", { children: groups === null || groups === void 0 ? void 0 : groups.map((group, i) => (_jsxs("tr", { className: `${rowsClassName}`, style: Object.assign({}, rowsStyle), children: [_jsx("td", { className: `${groupsColsClassName}`, style: Object.assign(Object.assign({}, groupTdStyle), groupsColsStyle), children: _jsx(GroupContainer, { style: groupStyle, className: groupClassName, groupRender: groupRender, currentGroup: group, handleClickGroup: handleClickGroup }) }, i), dailyHours.map((_, positionDay) => (_jsx("td", { onDragOver: handleDragOver, onDrop: (event) => {
-                                if (!handleDropTask || !tasks)
-                                    return;
-                                const dropInfo = getSessionStorageRecordForDragAndDrop(tasks, positionDay, group.id);
-                                if (!dropInfo)
-                                    return;
-                                handleDropTask(event, dropInfo.taskDropStart, dropInfo.taskDropEnd, dropInfo.taskDropDate, group.id, positionDay, dropInfo.newTask, dropInfo.newTasks);
-                            }, id: `td-${group.id}day-i`, children: _jsxs("div", { style: {
-                                    display: "flex",
-                                    width: "100%",
-                                    height: "100%",
-                                    flexDirection: "column",
-                                    padding: "5px",
-                                }, children: [_jsx(_Fragment, { children: tasks === null || tasks === void 0 ? void 0 : tasks.filter((task) => task.dayIndex === positionDay &&
-                                            task.groupId === group.id &&
-                                            compareWeekOffset(date, weekOffset || 0, task.taskDate)).sort((a, b) => a.taskStart - b.taskStart).map((task, taskKey) => {
-                                            return (_jsx(TaskContainer, { handleDragTask: handleDragTask, taskRender: taskRender, handleDragTaskEnd: handleDragTaskEnd, style: taskContainerStyle, className: `${taskContainerClassName}`, currentTask: task, handleClickTask: handleClickTask }, `${taskKey} task`));
-                                        }) }), _jsx(AddTask, { addTaskStyle: addTaskStyle, addTaskClassName: addTaskClassName, currentGroup: group, dayInfo: dailyHours[positionDay], addTaskRender: addTaskRender, handleAddTask: handleAddTask })] }, positionDay) }, `td-${group.id}day-i${positionDay}`))), _jsx("td", { children: _jsx(SumHoursContainer, { groupId: group.id, tasks: tasks, weekOffset: weekOffset || 0, calendarDate: date, sumHoursRender: sumHoursRender, sumHoursByGroups: sumHoursByGroups(group.id, tasks, weekOffset || 0, date), className: sumHoursContainerClassName, style: sumHoursContainerStyle }) }, `${i}sumHours`)] }, `${i} tr`))) })] }));
-};
-const SumHoursHead = ({ sumHoursHeadRender, className, style, }) => {
-    if (sumHoursHeadRender) {
-        return _jsx(_Fragment, { children: sumHoursHeadRender() });
-    }
-    return (_jsx("div", { className: `${className}`, style: Object.assign({ textAlign: "right", marginRight: "5px" }, style), children: "Hours" }));
-};
-const SumHoursContainer = ({ groupId, tasks, weekOffset, calendarDate, sumHoursByGroups, sumHoursRender, className, style, }) => {
-    if (sumHoursRender) {
-        return (_jsx(_Fragment, { children: sumHoursRender({
-                groupId,
-                tasks,
-                weekOffset,
-                calendarDate,
-                sumHoursByGroups,
-            }) }));
-    }
-    return (_jsx("div", { style: Object.assign({ textAlign: "right", marginRight: "5px" }, style), className: `${className}`, children: sumHoursByGroups }));
-};
-const DayContainer = ({ dayIndex, dayOfTheMonth, day, dayMonth, dayYear, dayRender, className, style, }) => {
-    if (dayRender) {
-        return (_jsx(_Fragment, { children: dayRender({
-                dayIndex,
-                day,
-                dayOfTheMonth,
-                dayMonth,
-                dayYear,
-            }) }));
-    }
-    return (_jsx("div", { className: `${className}`, style: style, children: `${day}. ${dayOfTheMonth}` }));
-};
-const GroupContainer = ({ className, style, groupRender, currentGroup, handleClickGroup, }) => {
-    if (groupRender) {
-        return _jsx(_Fragment, { children: groupRender({ currentGroup }) });
-    }
-    const handleClick = () => {
-        if (!handleClickGroup)
-            return;
-        handleClickGroup(currentGroup);
-    };
-    return (_jsxs("div", { onClick: handleClick, className: `${className}`, style: Object.assign(Object.assign({}, groupContainerStyle), style), children: [currentGroup.imageUrl && (_jsx("img", { width: 30, height: 30, src: currentGroup.imageUrl, alt: "groupimg" })), _jsx("label", { children: currentGroup.label && currentGroup.label })] }));
-};
-const AddTask = ({ currentGroup, handleAddTask, addTaskRender, dayInfo, addTaskStyle, addTaskClassName, }) => {
-    if (addTaskRender) {
-        return (_jsx(_Fragment, { children: addTaskRender({
-                currentGroup,
-                dayInfo,
-            }) }));
-    }
-    const handleClick = () => {
-        if (!handleAddTask)
-            return;
-        handleAddTask(currentGroup, dayInfo);
-    };
-    return (_jsx("div", { onClick: handleClick, style: addTaskStyle, className: `addPlanStyle ${addTaskClassName}`, children: "+" }));
-};
-const TaskContainer = ({ handleDragTask, taskRender, handleDragTaskEnd, style, className, currentTask, handleClickTask, }) => {
-    const handleDragStart = (event) => {
-        if (!handleDragTask)
-            return;
-        event.dataTransfer.effectAllowed = "move";
-        event.dataTransfer.setData("text/plain", currentTask.taskId);
-        window.sessionStorage.setItem("calendardragtaskId", currentTask.taskId);
-        window.sessionStorage.setItem("calendardragtaskStart", `${currentTask.taskStart}`);
-        window.sessionStorage.setItem("calendardragtaskEnd", `${currentTask.taskEnd}`);
-        window.sessionStorage.setItem("calendardragdayIndex", `${currentTask.dayIndex}`);
-        handleDragTask(event, currentTask);
-    };
-    const handleDragEnd = (event) => {
-        if (!handleDragTaskEnd)
-            return;
-        handleDragTaskEnd(event);
-    };
-    const handleClick = () => {
-        if (!handleClickTask)
-            return;
-        handleClickTask(currentTask);
-    };
-    if (taskRender) {
-        return (_jsx("div", { onClick: handleClick, id: currentTask.taskId, className: `taskContainer ${className}`, style: Object.assign({}, style), draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: taskRender({
-                currentTask,
-            }) }));
-    }
-    return (_jsxs("div", { onClick: handleClick, id: currentTask.taskId, className: `taskContainer  ${className}`, style: Object.assign({}, style), draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx("p", { className: "tasklabel", children: currentTask.task && currentTask.task }), _jsx("p", { className: "taskhour", children: currentTask.taskStart &&
-                    currentTask.taskEnd &&
-                    `${millisecondsToDate(currentTask.taskStart).formattedDate} - ${millisecondsToDate(currentTask.taskEnd).formattedDate}` })] }));
-};
-const GroupsHeadContainer = ({ groupsHeadRender, style, className, }) => {
-    if (groupsHeadRender) {
-        return _jsx(_Fragment, { children: groupsHeadRender() });
-    }
-    return (_jsx("div", { className: `${className}`, style: style, children: "WeeklyCalendar" }));
-};
-export const updateCalendarDateWithOffset = (offset, calendarDate) => {
-    const newDate = new Date(calendarDate);
-    newDate.setDate(newDate.getDate() + offset);
-    return newDate;
-};
-export const updateOffsetWithDateCalendar = (calendarDate) => {
-    return calculerEcartSemaine(calendarDate);
-};
-export const millisecondsToHours = (milliseconds) => {
-    return millisecondsToDate(milliseconds).formattedDate;
-};
-export const checkDuplicates = (tasks, taskStart, taskEnd, groupId) => {
-    const findDuplicates = tasks === null || tasks === void 0 ? void 0 : tasks.filter((task) => (taskStart >= task.taskStart && taskStart < task.taskEnd) ||
-        (taskEnd > task.taskStart && taskEnd < task.taskEnd) ||
-        (taskStart <= task.taskStart &&
-            taskEnd > task.taskStart &&
-            taskEnd >= task.taskEnd &&
-            taskStart <= task.taskEnd)).filter((task) => task.groupId === groupId);
-    return findDuplicates.length > 0;
-};
-export const getSavedTasks = () => {
-    const taskSavedString = window.localStorage.getItem("CalendarTaskSaved");
-    if (!taskSavedString) {
-        return [];
-    }
-    const tasksTable = JSON.parse(taskSavedString);
-    const savedTasks = tasksTable.map((task) => {
-        const { taskDate, taskExpiryDate } = task, rest = __rest(task, ["taskDate", "taskExpiryDate"]);
-        if (taskExpiryDate) {
-            return Object.assign({ taskDate: new Date(taskDate), taskExpiryDate: new Date(taskExpiryDate) }, rest);
-        }
-    });
-    return savedTasks;
-};
-export const deleteTaskSaved = (taskId) => {
-    const tasksSavedString = window.localStorage.getItem("CalendarTaskSaved");
-    if (!tasksSavedString)
-        return;
-    const tasksSavedTable = JSON.parse(tasksSavedString);
-    const taskIndex = tasksSavedTable.findIndex((task) => task.taskId === taskId);
-    if (taskIndex) {
-        tasksSavedTable.splice(taskIndex, 1);
-        window.localStorage.setItem("CalendarTaskSaved", JSON.stringify(tasksSavedTable));
-    }
-};
-export const deleteTasksSaved = () => {
-    window.localStorage.removeItem("CalendarTaskSaved");
+const Calendar = (props) => {
+    return (_jsx(CalendarTable, Object.assign({}, props)));
 };
 export default Calendar;