react-weekly-planning 1.0.44 → 1.0.45

package/README.md

@@ -54,27 +54,7 @@ It is possible to use either Weekoffset or Date, or even both simultaneously.
   ```
 
 
-#### `scope`
 
-- **Description**: This prop sets the view scope of the calendar.
-- **Type**: `"day" | "week"`
-- **Use Case**: Use this prop to define whether the calendar should display a full week or only a single day. If omitted, it defaults to a weekly view.
-
-  **Example**:
-  ```jsx
-  <Calendar scope="day" dayOffset={0} ... />
-  ```
-
-#### `dayOffset`
-
-- **Description**: This prop specifies which day of the week to display when the scope is set to "day".
-- **Type**: `0 | 1 | 2 | 3 | 4 | 5 | 6`
-- **Use Case**: If `scope="day"`, use this prop to target a specific day of the week (`0` being the first day of the week, up to `6`).
-
-  **Example**:
-  ```jsx
-  <Calendar scope="day" dayOffset={2} ... />
-  ```
 
 
 ---
@@ -106,7 +86,6 @@ const App = () => {
           date={date}
           weekOffset={0}
           groups={groups}
-          scope="week"
         />
       </div>
     </CalendarTaskContextProvider>
@@ -126,8 +105,6 @@ Props for the Calendar component.
 | Prop Name                    | Type                                                                                  | Description                                                                                       |
 |------------------------------|---------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|
 | `weekOffset`                 | number                                                                                | Offset for the week (e.g., -7 for last week, 0 for current week, 7 for next week).                |
-| `scope`                      | "day" \| "week"                                                                       | Sets the calendar view to either a full week or a single day.                                     |
-| `dayOffset`                  | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6                                                       | Offset index for the day column (0 = first day of week, …, 6 = last day) when scope is "day".     |
 | `groups`                     | GroupFeildsType[]                                                                     | Array of group data to be displayed in the calendar.                                              |
 | `className`                  | string                                                                                | Additional class names for the calendar component.                                                |
 | `style`                      | React.CSSProperties \| undefined                                                      | Additional styles for the calendar component.                                                     |
@@ -300,7 +277,7 @@ const App = () => (
 
 ### 2. Default Behavior of `<Calendar />`
 
-It's important to note that the main `<Calendar />` component uses the `"week"` hash scope by default. If you use the standard component, you are implicitly using this scope. Explicitly defining a `hashScope` on the `CalendarTaskContextProvider` is only necessary when you want to change how tasks are indexed or when building a fully custom UI as shown above.
+It's important to note that the main `<Calendar />` component uses the `"day"` hash scope by default. If you use the standard component, you are implicitly using this scope. Explicitly defining a `hashScope` on the `CalendarTaskContextProvider` is only necessary when you want to change how tasks are indexed or when building a fully custom UI as shown above.
 
 ### 3. Understanding Hashes and Scopes
 
@@ -491,6 +468,8 @@ to create an organization that truly reflects you.
 ### `useIntersectionObserver`
 
 - **Description**: Utility hook designed to help virtualize scrolling components. It leverages the Intersection Observer API to detect when an element enters or leaves the viewport, allowing you to mount or unmount heavy DOM elements dynamically for better performance in long lists or large grids.
+  👉 **Watch the performance demo (rendering 7,000 tasks in a single week):**  
+  [![Performance Demo](https://img.youtube.com/vi/st4QmsaHoDM/0.jpg)](https://youtu.be/st4QmsaHoDM)
 - **Parameters**:
   - `ref` (React.RefObject): The ref assigned to the DOM element you want to observe.
   - `options` (IntersectionObserverInit, optional): Configuration object (e.g., `rootMargin`, `threshold`).

package/dist/components/CalendarForWeek.js

@@ -13,12 +13,7 @@ const CalendarForWeek = (props) => {
     const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset, props.timeZone);
     const memoizedHeader = useMemo(() => (_jsx("div", { className: "planningCalendarHeader", children: _jsxs("div", { className: `planningCalendarRow ${props.rowsClassName}`, style: Object.assign(Object.assign({}, theadTrStyle), props.rowsStyle), children: [_jsx("div", { className: `dayTh ${props.groupsColsClassName}`, style: Object.assign({}, props.groupsColsStyle), children: _jsx(GroupsHeadContainer, { className: `${props.groupHeadContainerClassName}`, style: props.groupHeadContainerStyle, groupsHeadRender: props.groupsHeadRender }) }), weekDays.map((day, i) => (_jsx("div", { className: `dayCol ${props.daysColsClassName}`, style: Object.assign({}, props.daysColsStyle), children: _jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: i, dayRender: props.dayRender, day: day.day, dayOfTheMonth: day.dayOfTheMonth, dayMonth: day.dayMonth, dayYear: day.dayYear }) }, i)))] }, "header") })), [weekDays, props.rowsClassName, props.rowsStyle, props.groupsColsClassName, props.groupsColsStyle, props.groupHeadContainerClassName, props.groupHeadContainerStyle, props.groupsHeadRender, props.daysColsClassName, props.daysColsStyle, props.dayStyle, props.dayClassName, props.dayRender]);
     const offset = useMemo(() => updateOffsetWithDateCalendar(props.date), [props.date]);
-    return (_jsx("div", { className: "calendarForWeek", style: { position: "relative" }, children: _jsxs("div", { className: `planningCalendar ${props.className}`, style: Object.assign({}, props.style), children: [memoizedHeader, _jsx("div", { className: "planningCalendarBody", style: {
-                    // position: "absolute",
-                    // width: "100%",
-                    // // top: `${36 + 5}px`,
-                    // top: `${36 + 5 + ((65 + 4) * Math.max(rowSliceIndexStart, 0))}px`,
-                    }, children: (_a = props.groups) === null || _a === void 0 ? void 0 : _a.map((group, i) => {
+    return (_jsx("div", { className: "calendarForWeek", style: { position: "relative" }, children: _jsxs("div", { className: `planningCalendar ${props.className}`, style: Object.assign({}, props.style), children: [memoizedHeader, _jsx("div", { className: "planningCalendarBody", style: {}, children: (_a = props.groups) === null || _a === void 0 ? void 0 : _a.map((group, i) => {
                         var _a;
                         const scope = hashScope || "week";
                         const groupHash = getHash(offset, group.id);

package/dist/components/CalendarForday.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./style.css";
 import { memo, useMemo } from "react";
-import useCalendarDateState from "../hooks/useCalendarDateState";
 import VirtualGroupRowDay from "./VirtualGroupRowDay";
 import DayContainer from "./DayContainer";
 import { useCalendarTaskContext } from "../contexts/CalendarTaskContext";
+import useCalendarDateStateForDay from "../hooks/useCalendarDateStateForDay";
 function CalendarForDay(props) {
-    const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset, props.timeZone);
+    const { dailyHours, weekDays, weekOffset: currentWeekOffset } = useCalendarDateStateForDay(props.date, props.weekOffset, props.timeZone, props.dayOffset);
     const { getTasks, isValidTask, addTask, deleteTask, updateTask, getTask, hashScope, tasks } = useCalendarTaskContext();
-    const currentDay = weekDays[props.dayOffset || 0];
-    const memoizedHeader = useMemo(() => (currentDay ? (_jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: props.dayOffset || 0, dayRender: props.dayRender, day: currentDay.day, dayOfTheMonth: currentDay.dayOfTheMonth, dayMonth: currentDay.dayMonth, dayYear: currentDay.dayYear })) : null), [weekDays, props.rowsClassName, props.rowsStyle, props.groupsColsClassName, props.groupsColsStyle, props.groupHeadContainerClassName, props.groupHeadContainerStyle, props.groupsHeadRender, props.daysColsClassName, props.daysColsStyle, props.dayStyle, props.dayClassName, props.dayRender]);
-    return (_jsxs("div", { className: `CalendarTableForDay ${props.className}`, style: Object.assign({ position: "relative" }, props.style), children: [memoizedHeader, _jsx("div", { className: `CalendarTableForDayTasksContainer`, children: props.groups.map((group, i) => (_jsx(VirtualGroupRowDay, { group: group, i: i, props: props, getTasks: getTasks, isValidTask: isValidTask, addTask: addTask, deleteTask: deleteTask, updateTask: updateTask, getTask: getTask, dailyHours: dailyHours, dayOffset: props.dayOffset || 0, hashScope: hashScope || "day", tasks: tasks }, `${group.id}-${i}`))) })] }));
+    const dayIndex = props.dayOffset !== undefined ? props.dayOffset : props.date.getDay();
+    const currentDay = weekDays[dayIndex];
+    const memoizedHeader = useMemo(() => (currentDay ? (_jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: dayIndex, dayRender: props.dayRender, day: currentDay.day, dayOfTheMonth: currentDay.dayOfTheMonth, dayMonth: currentDay.dayMonth, dayYear: currentDay.dayYear })) : null), [weekDays, dayIndex, props.dayStyle, props.dayClassName, props.dayRender]);
+    return (_jsxs("div", { className: `CalendarTableForDay ${props.className}`, style: Object.assign({ position: "relative" }, props.style), children: [memoizedHeader, _jsx("div", { className: `CalendarTableForDayTasksContainer`, children: props.groups.map((group, i) => (_jsx(VirtualGroupRowDay, { group: group, i: i, props: props, getTasks: getTasks, isValidTask: isValidTask, addTask: addTask, deleteTask: deleteTask, updateTask: updateTask, getTask: getTask, dailyHours: dailyHours, dayOffset: dayIndex, weekOffset: currentWeekOffset, hashScope: hashScope || "day", tasks: tasks }, `${group.id}-${i}`))) })] }));
 }
 export default memo(CalendarForDay, (prevProps, nextProps) => {
     var _a, _b;

package/dist/components/VirtualGroupRowDay.js

@@ -4,17 +4,16 @@ import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
 import GroupContainer from "./GroupContainer";
 import TaskVirtual from "./TaskContainer/TaskVirtual";
 import AddTask from "./AddTask";
-import { getHash, getNewTaskForDropOrPaste, getUniqueId, updateOffsetWithDateCalendar, } from "../lib/utils";
-const VirtualGroupRowDay = ({ group, i, props, getTasks, isValidTask, addTask, deleteTask, updateTask, getTask, dailyHours, dayOffset, hashScope, tasks, }) => {
+import { getHash, getNewTaskForDropOrPaste, getUniqueId, } from "../lib/utils";
+const VirtualGroupRowDay = ({ group, i, props, getTasks, isValidTask, addTask, deleteTask, updateTask, getTask, dailyHours, dayOffset, weekOffset, hashScope, tasks, }) => {
     const ref = useRef(null);
     const { entry, height } = useIntersectionObserver(ref, {
         rootMargin: "600px",
         threshold: 0,
     });
     const isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
-    const offset = useMemo(() => updateOffsetWithDateCalendar(props.date), [props.date]);
     const currentDailyHours = dailyHours[dayOffset];
-    const hash = useMemo(() => getHash(offset, group.id, dayOffset), [offset, group.id, dayOffset]);
+    const hash = useMemo(() => getHash(weekOffset, group.id, dayOffset), [weekOffset, group.id, dayOffset]);
     const cellTasks = useMemo(() => getTasks(hash[hashScope]), [getTasks, hash, hashScope, tasks]);
     const handleDragOver = (event) => {
         event.preventDefault();
@@ -45,5 +44,6 @@ export default memo(VirtualGroupRowDay, (prev, next) => {
         prev.i === next.i &&
         prev.tasks === next.tasks &&
         prev.props.date.getTime() === next.props.date.getTime() &&
-        prev.dayOffset === next.dayOffset);
+        prev.dayOffset === next.dayOffset &&
+        prev.weekOffset === next.weekOffset);
 });

package/dist/components/index.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "./style.css";
 import CalendarForWeek from "./CalendarForWeek";
-import CalendarForDay from "./CalendarForday";
 import CalendarTaskContextProvider from "../contexts/CalendarTaskContext";
 /**
  * Calendar component to display tasks and groups in a weekly view.
@@ -58,13 +57,12 @@ import CalendarTaskContextProvider from "../contexts/CalendarTaskContext";
  * @param {() => React.ReactNode} [props.sumHoursHeadRender] - Custom render function for the sum-of-hours header.
  * @param {(currentTask: TaskFeildsType) => void} [props.handleClickTask] - Handler function for clicking a task.
  * @param {(currentGroup: GroupFeildsType) => void} [props.handleClickGroup] - Handler function for clicking a group.
- * @param {0|1|2|3|4|5|6} [props.dayOffset] - Offset index for the day column (0 = first day of week, …, 6 = last day).
  * @param {React.CSSProperties} [props.dayColsStyle] - Additional styles for the day columns.
  * @param {string} [props.dayColsClassName] - Additional class names for the day columns.
  * @param {React.CSSProperties} [props.hoursColsStyle] - Additional styles for the hours columns.
  * @param {string} [props.hoursColsClassName] - Additional class names for the hours columns.
  */
 const Calendar = (props) => {
-    return (_jsx(CalendarTaskContextProvider, { hashScope: "day", children: props.scope === "day" ? _jsx(CalendarForDay, Object.assign({}, props)) : _jsx(CalendarForWeek, Object.assign({}, props)) }));
+    return (_jsx(CalendarTaskContextProvider, { hashScope: "day", children: _jsx(CalendarForWeek, Object.assign({}, props)) }));
 };
 export default Calendar;

package/dist/components/style.css

@@ -87,24 +87,66 @@
 .planningCalendar .dayTh,
 .planningCalendar .groupCol {
     flex: 0 0 150px;
+    min-width: 150px;
     color: #0f5173;
     padding-left: 5px;
     display: flex;
     align-items: center;
+    background-color: inherit;
 }
 
 .planningCalendar .dayCol {
     flex: 1;
+    min-width: 120px;
     border-left: 0.74px solid rgba(198, 219, 225, 0.68);
-    min-width: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
+@media (max-width: 768px) {
+
+    .planningCalendar .dayTh,
+    .planningCalendar .groupCol {
+        flex: 0 0 100px;
+        min-width: 100px;
+        font-size: 13px;
+        position: sticky;
+        left: 0;
+        z-index: 50;
+        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
+        background-color: #fff;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding-left: 10px;
+    }
+
+    .planningCalendar .dayCol {
+        min-width: 120px;
+    }
+
+    .planningCalendarHeader {
+        z-index: 201;
+        /* Layer over the sticky row column */
+    }
+
+    /* Make sure the group container labels also truncate */
+    .groupCol label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+    }
+
+    .planningCalendar {
+        width: auto;
+    }
+}
+
 .planningCalendar .totalTh,
 .planningCalendar .totalCol {
     flex: 0 0 50px;
+    min-width: 50px;
     color: #0f5173;
     text-align: right;
     padding-right: 5px;
@@ -152,18 +194,15 @@
     min-height: 80px;
 }
 
-.calendarForWeek,
-.calendarForDay {
+.calendarForWeek {
     display: flex;
     width: 100%;
     flex: 1;
     overflow: auto;
     position: relative;
-
 }
 
-.calendarForWeek-container,
-.calendarForDay-container {
+.calendarForWeek-container {
     display: flex;
     flex-direction: column;
     width: 100%;

package/dist/hooks/useCalendarDateStateForDay.js

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import { calculateWeekDifference, getDateObjectInTimeZone, getDayHourly, getWeekDays, } from "../lib/utils";
+function useCalendarDateStateForDay(date, weekOffset, timeZone, dayOffset) {
+    let calendarDateState = useMemo(() => {
+        const currentWeekOffset = (weekOffset !== undefined) ? weekOffset : (timeZone
+            ? calculateWeekDifference(getDateObjectInTimeZone(timeZone), timeZone)
+            : calculateWeekDifference(date, timeZone));
+        const weekDays = getWeekDays(currentWeekOffset, timeZone);
+        const dailyHours = getDayHourly(currentWeekOffset, timeZone);
+        const calData = {
+            dailyHours: dailyHours,
+            weekDays,
+            weekOffset: currentWeekOffset,
+        };
+        return calData;
+    }, [date, weekOffset, dayOffset, timeZone]);
+    return Object.assign({}, calendarDateState);
+}
+export default useCalendarDateStateForDay;

package/dist/types/components/VirtualGroupRowDay.d.ts

@@ -12,6 +12,7 @@ interface VirtualGroupRowDayProps {
     getTask: (hash: string, taskId: string) => TaskType | undefined;
     dailyHours: dayInfoType[];
     dayOffset: number;
+    weekOffset: number;
     hashScope: "week" | "group" | "day";
     tasks: TasksStore;
 }

package/dist/types/components/index.d.ts

@@ -55,7 +55,6 @@ import { CalendarPropsType } from "../definitions";
  * @param {() => React.ReactNode} [props.sumHoursHeadRender] - Custom render function for the sum-of-hours header.
  * @param {(currentTask: TaskFeildsType) => void} [props.handleClickTask] - Handler function for clicking a task.
  * @param {(currentGroup: GroupFeildsType) => void} [props.handleClickGroup] - Handler function for clicking a group.
- * @param {0|1|2|3|4|5|6} [props.dayOffset] - Offset index for the day column (0 = first day of week, …, 6 = last day).
  * @param {React.CSSProperties} [props.dayColsStyle] - Additional styles for the day columns.
  * @param {string} [props.dayColsClassName] - Additional class names for the day columns.
  * @param {React.CSSProperties} [props.hoursColsStyle] - Additional styles for the hours columns.

package/dist/types/definitions/index.d.ts

@@ -96,7 +96,6 @@ export type DayPropsType = {
  */
 export type CalendarPropsType = {
     drop?: "copy" | "move";
-    scope?: "day" | "week";
     /** Offset for the week (e.g., -7 for last week, 0 for current week, 7 for next week). */
     weekOffset?: number;
     /** Array of group data to be displayed in the calendar. */
@@ -194,8 +193,6 @@ export type CalendarPropsType = {
     handleClickGroup?: (currentGroup: GroupFeildsType) => void;
     /** your timezones */
     timeZone?: TimeZone;
-    /** day id */
-    dayOffset?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     /**day columns styles */
     dayColsStyle?: React.CSSProperties | undefined;
     /**day columns className*/

package/dist/types/hooks/useCalendarDateStateForDay.d.ts

@@ -0,0 +1,17 @@
+import { TimeZone } from "../definitions";
+declare function useCalendarDateStateForDay(date: Date, weekOffset: number | undefined, timeZone: TimeZone | undefined, dayOffset: number | undefined): {
+    dailyHours: {
+        positionDay: number;
+        day: Date;
+        start: number;
+        end: number;
+    }[];
+    weekDays: {
+        day: string;
+        dayMonth: string;
+        dayYear: number;
+        dayOfTheMonth: number;
+    }[];
+    weekOffset: number;
+};
+export default useCalendarDateStateForDay;

package/package.json

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