@cwellt_software/cwellt-reactjs-lib 1.1.6 → 1.2.0

package/dist/src/components/custom/scheduler/logic/pixels/getPixelsForEvent.js

@@ -0,0 +1,32 @@
+import { daysBetweenTwoDatesIncludingBoth } from "../dates/daysBetweenTwoDatesWithoutCeil";
+export const getLeftPixels = (eventStart, scheduleStart, dayPx) => {
+    if (scheduleStart >= eventStart)
+        return 0;
+    return daysBetweenTwoDatesIncludingBoth(scheduleStart, eventStart) * dayPx;
+};
+export const getResourcesWithPixels = (resources, _nextProps, dayPx) => {
+    return resources.map((resource) => {
+        const events = resource.events;
+        const mappedEvents = events.map((event) => {
+            return getEventWithSize(event, _nextProps.startDate, dayPx);
+        });
+        return {
+            ...resource,
+            events: mappedEvents,
+        };
+    });
+};
+export const getEventWithSize = (event, schedulerStart, dayPx) => {
+    const eventStartBeforeScheduleStart = event.start.getTime() < schedulerStart.getTime();
+    const lengthOfEvent = daysBetweenTwoDatesIncludingBoth(event.start, event.end);
+    const daysUntilSchedulerStart = daysBetweenTwoDatesIncludingBoth(event.start, schedulerStart);
+    const daysLong = eventStartBeforeScheduleStart ? lengthOfEvent - daysUntilSchedulerStart : lengthOfEvent;
+    // we want minimum of 8 px
+    const eventMinSize = 8;
+    const newEvent = {
+        ...event,
+        leftPx: getLeftPixels(event.start, schedulerStart, dayPx),
+        width: Math.max(daysLong * dayPx, eventMinSize),
+    };
+    return newEvent;
+};

package/dist/src/components/custom/scheduler/logic/pixels/heightScheduler.js

@@ -0,0 +1,14 @@
+export const heightScheduler = (resources, visibleRows, isPinnerScheduler) => {
+    if (resources.length <= 0) {
+        return 100;
+    }
+    const realVisibleRows = visibleRows > resources.length ? resources.length : visibleRows;
+    const rowsHeight = resources.slice(0, realVisibleRows).map((row) => {
+        return row.maxTop;
+    });
+    const height = rowsHeight.reduce((sum, row) => {
+        return sum + row;
+    }, 0);
+    const headerHeight = isPinnerScheduler ? 0 : 60;
+    return height + headerHeight;
+};

package/dist/src/components/custom/scheduler/logic/pixels/heightSchedulerPinned.js

@@ -0,0 +1,9 @@
+export const heightSchedulerPinned = (resourcesLength, id, rowReference) => {
+    const noResources = resourcesLength <= 0;
+    const pinnedScheduler = id.toLowerCase().includes("pinned");
+    const rowResourcesHeight_sch = rowReference.current?.clientHeight;
+    if (pinnedScheduler && !noResources && rowResourcesHeight_sch) {
+        return rowResourcesHeight_sch + 83;
+    }
+    return rowResourcesHeight_sch;
+};

package/dist/src/components/custom/scheduler/logic/state_handle/doubleClickOnResource.js

@@ -0,0 +1,5 @@
+export const doubleClickOnResource = (props, resource) => {
+    if (props.scheduler_handleDblClickOnResourceInScheduler) {
+        props.scheduler_handleDblClickOnResourceInScheduler(resource);
+    }
+};

package/dist/src/components/custom/scheduler/logic/state_handle/handleResourceChange.js

@@ -0,0 +1,11 @@
+import moment from "moment";
+import { getResourcesWithPixels } from "../pixels/getPixelsForEvent";
+export const handleResourceChange = (nextProps, showLogs, dayPx, setState) => {
+    const props_events_copy = [...nextProps.events];
+    const props_resources_copy = [...nextProps.resources];
+    setState(props_events_copy, getResourcesWithPixels(props_resources_copy, nextProps, dayPx));
+    if (showLogs) {
+        console.log("Schedule - componentWillReceiveProps - print on schedule, end: ", moment(new Date()).toString());
+        console.log("Schedule - componentWillReceiveProps, end: ", moment(new Date()).toString());
+    }
+};

package/dist/src/components/custom/scheduler/logic/state_handle/onDragOver.js

@@ -0,0 +1,9 @@
+export const onDragOver = (e) => {
+    if (e.ctrlKey === true) {
+        e.dataTransfer.dropEffect = "copy";
+    }
+    else {
+        e.dataTransfer.dropEffect = "link";
+    }
+    e.preventDefault();
+};

package/dist/src/components/custom/scheduler/logic/state_handle/onDropEventToResource.js

@@ -0,0 +1,3 @@
+export const onDropEventToResource = (props, cblDragNDrop, resource) => {
+    props.scheduler_handleOnDropCblEventsOnResource.call(props.parent, cblDragNDrop, resource);
+};

package/dist/src/components/custom/scheduler/logic/strings/compareStrings.js

@@ -0,0 +1,7 @@
+export const compareStrings = (str1, str2) => {
+    if (str1 > str2)
+        return 1;
+    if (str1 < str2)
+        return -1;
+    return 0;
+};

package/dist/src/components/custom/scheduler/logic/strings/getGUID.js

@@ -0,0 +1,7 @@
+export const getGUID = () => {
+    return generateSegment(false) + generateSegment(true) + generateSegment(true) + generateSegment(false);
+};
+const generateSegment = (includeHyphens) => {
+    const p = (Math.random().toString(16) + "000000000").substring(2, 10);
+    return includeHyphens ? "-" + p.substring(0, 4) + "-" + p.substring(4, 8) : p;
+};

package/dist/src/components/custom/scheduler/logic/ui/checkIfSlotAvailable.js

@@ -0,0 +1,8 @@
+export const checkIfSlotAvailable = (events, event) => {
+    if (events.length == 0)
+        return true;
+    const collide = events.some(existent => {
+        return !(existent.end <= event.start || event.end <= existent.start) && !existent.isFullHeight;
+    });
+    return !collide;
+};

package/dist/src/components/custom/scheduler/logic/ui/getEventsOfResource.js

@@ -0,0 +1,45 @@
+import { getEventWithSize } from "../pixels/getPixelsForEvent";
+import { checkIfSlotAvailable } from "./checkIfSlotAvailable";
+export const getEventsInInnerRows = (res, eventHeight, dayPx, start) => {
+    let maxTop = 0;
+    const tops = [];
+    tops[0] = new Array();
+    res.events
+        .map((e) => {
+        return getEventWithSize(e, start, dayPx);
+    })
+        .forEach((event, i) => {
+        if (i === 0 || event.isFullHeight) {
+            event.top = 0;
+            tops[0].push(event);
+        }
+        else {
+            let found = false;
+            for (let j = 0; j < tops.length && found === false; j++) {
+                found = checkIfSlotAvailable(tops[j], event);
+                if (found === true || event.isFullHeight) {
+                    event.top = j * eventHeight;
+                    tops[j].push(event);
+                    break;
+                }
+            }
+            if (found === false && !event.isFullHeight) {
+                maxTop++;
+                tops[maxTop] = new Array();
+                event.top = maxTop * eventHeight;
+                tops[maxTop].push(event);
+            }
+            else {
+                // This is for flightwatch
+                if (found === true && event.data.order === 2 && maxTop < 1) {
+                    maxTop++;
+                    tops[maxTop] = new Array();
+                    event.top = maxTop * eventHeight;
+                    tops[maxTop].push(event);
+                    maxTop--;
+                }
+            }
+        }
+    });
+    return tops;
+};

package/dist/src/components/custom/scheduler/logic/ui/getTimeHeaders.js

@@ -0,0 +1,35 @@
+export const getTimeHeaders = (startDate, endDate) => {
+    const dateArray = new Array();
+    const currentDate = new Date(startDate);
+    const startOffset = Math.abs(startDate.getTimezoneOffset());
+    const endOffset = Math.abs(endDate.getTimezoneOffset());
+    // Summer: +1 -> +2, true
+    // Winter: +2 -> -1, false
+    const offsetSummerWinter = startOffset < endOffset;
+    if (offsetSummerWinter === true) {
+        while (currentDate < endDate) {
+            if (dateArray.length > 0) {
+                const lastPosition = dateArray[dateArray.length - 1];
+                const differenceHours = currentDate.getHours() - lastPosition.getHours();
+                if (differenceHours === 1 || differenceHours < 0) {
+                    dateArray.push(new Date(currentDate));
+                }
+                else if (differenceHours > 1) {
+                    dateArray.push(new Date(currentDate.getHours() - 1));
+                    dateArray.push(new Date(currentDate));
+                }
+            }
+            else {
+                dateArray.push(new Date(currentDate));
+            }
+            currentDate.setHours(currentDate.getHours() + 1);
+        }
+    }
+    else {
+        while (currentDate < endDate) {
+            dateArray.push(new Date(currentDate));
+            currentDate.setHours(currentDate.getHours() + 1);
+        }
+    }
+    return dateArray;
+};

package/dist/src/components/custom/scheduler/logic/ui/isAllowedToMove.js

@@ -0,0 +1,19 @@
+export const isAllowedToMove = (data, resData, cblDragNDrop) => {
+    if (data?.eventType !== 1) {
+        return true;
+    }
+    const allowedMoves = [
+        { from: "acftsScheduler", to: "flightsPairingsScheduler" },
+        { from: "flightsScheduler", to: "crewAssignmentsScheduler" },
+        { from: "opstoolScheduler", to: "opstoolScheduler" },
+        { from: "opstoolScheduler", to: "opstoolSchedulerVirtual" },
+        { from: "opstoolSchedulerVirtual", to: "opstoolScheduler" },
+        { from: "opstoolSchedulerVirtual", to: "opstoolSchedulerVirtual" },
+        { from: "vacationsScheduler", to: "vacationsScheduler" }
+    ];
+    const crewControllAllowedMove = allowedMoves.some(move => move.from === cblDragNDrop.fromId && move.to === cblDragNDrop.toId);
+    if (crewControllAllowedMove) {
+        return true;
+    }
+    return data.Crew !== resData.Crewmember_Id;
+};

package/dist/src/components/custom/scheduler/logic/ui/updateResourceVisibility.js

@@ -0,0 +1,15 @@
+export const updateResourceVisibility = (viewportTop, viewportBottom, stateResources, propsResources) => {
+    if (propsResources.length === 0)
+        return [];
+    let currentHeight = 0;
+    return stateResources.map(resource => {
+        const newResource = { ...resource };
+        newResource.isInViewport = isResourceInViewport(currentHeight, viewportTop, viewportBottom);
+        currentHeight += resource.maxTop;
+        return newResource;
+    });
+};
+const isResourceInViewport = (resourceTop, viewportTop, viewportBottom) => {
+    const buffer = 100;
+    return viewportBottom + 50 > resourceTop && resourceTop >= viewportTop - buffer;
+};

package/dist/src/components/custom/scheduler/state/CblDragAndDrop.js

@@ -0,0 +1,18 @@
+export class CblDragAndDrop {
+    fromId;
+    toId;
+    data;
+    droppedOnDate;
+    resizeFromStart;
+    resizeFromEnd;
+    isCtrlKey;
+    constructor(fromId, toId, data, droppedOnDate = null, resizeFromStart = null, resizeFromEnd = null, isCtrlKey = null) {
+        this.fromId = fromId;
+        this.toId = toId;
+        this.data = data;
+        this.droppedOnDate = droppedOnDate;
+        this.resizeFromStart = resizeFromStart;
+        this.resizeFromEnd = resizeFromEnd;
+        this.isCtrlKey = isCtrlKey;
+    }
+}

package/dist/src/components/custom/scheduler/state/CwSchedulerProps.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/custom/scheduler/state/Resource.js

@@ -0,0 +1,18 @@
+export class Resource {
+    uid = "";
+    id;
+    name;
+    maxTop;
+    events = [];
+    isInViewport = false;
+    schedulerResourceDisplay;
+    isLoading = false;
+    data = null;
+    constructor(id, name, eventHeight, data = null, schedulerResourceDisplay = null) {
+        this.id = id;
+        this.name = name;
+        this.maxTop = eventHeight;
+        this.data = data;
+        this.schedulerResourceDisplay = schedulerResourceDisplay || this.name;
+    }
+}

package/dist/src/components/custom/scheduler/state/State.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/custom/scheduler/state/cblEvent.js

@@ -0,0 +1,28 @@
+import { getGUID } from "../logic/strings/getGUID";
+export class cblEvent {
+    id = "";
+    start;
+    end;
+    resourceId;
+    selected = false;
+    top = 0;
+    leftPx = 0;
+    rightPx = 0;
+    width = 0;
+    isFullHeight = false;
+    isReadOnly = false;
+    isResizable = false;
+    isDraggable = false;
+    data = null;
+    constructor(start, end, resourceId, data = null, isFullHeight = false, isReadOnly = false, isResizable = false, isDraggable = false) {
+        this.start = start;
+        this.end = end;
+        this.resourceId = resourceId;
+        this.data = data;
+        this.isFullHeight = isFullHeight;
+        this.isReadOnly = isReadOnly;
+        this.isResizable = isResizable;
+        this.isDraggable = isDraggable;
+        this.id = getGUID();
+    }
+}

package/dist/src/components/custom/scheduler/state/cblEventCompProps.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/custom/scheduler/state/resourceCompProps2.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/custom/scheduler-new/presentation/NewScheduler.d.ts

@@ -1,6 +1,6 @@
-import type { ItemType } from "antd/lib/menu/hooks/useItems";
 import React from "react";
 import type { OnEvent } from "../../../../common/functions/dsl/UiEventDSL";
+import type { MenuOption } from "../../../control/action/contextmenu/CwAnchoredMenu";
 import { SchedulerHeaderContent } from "./components/header/SchedulerHeaderState";
 import { BackgroundEventDm } from "./components/row/BackgroundEvent";
 import { RowHeaderDm, RowHeaderProps } from "./components/row/DefaultRowHeader";
@@ -15,7 +15,7 @@ interface SchedulerProps<T extends RowHeaderDm, P extends SchedulerEventDm> {
     events: P[];
     backgroundEvents: BackgroundEventDm[];
     rows: T[];
-    contextMenuItems: ItemType[];
+    contextMenuItems: MenuOption[];
     orderCategories?: OrderCategory<T>[];
     useOrderCategory?: boolean;
     RowTitleComp: React.ComponentType<RowHeaderProps<T>>;
@@ -25,6 +25,5 @@ interface SchedulerProps<T extends RowHeaderDm, P extends SchedulerEventDm> {
     rowHeaderWidth?: number;
 }
 export declare const Scheduler: <T extends RowHeaderDm, P extends SchedulerEventDm>(props: SchedulerProps<T, P>) => import("react/jsx-runtime").JSX.Element;
-export declare const SchedulerPreview: () => import("react/jsx-runtime").JSX.Element;
-export {};
+export default Scheduler;
 //# sourceMappingURL=NewScheduler.d.ts.map

package/dist/src/components/custom/scheduler-new/presentation/NewScheduler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewScheduler.d.ts","sourceRoot":"","sources":["../../../../../../src/components/custom/scheduler-new/presentation/NewScheduler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,8BAA8B,CAAC;AAE3D,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,6CAA6C,CAAC;AAEzE,OAAO,EAAC,sBAAsB,EAAuB,MAAM,0CAA0C,CAAC;AACtG,OAAO,EAAkB,iBAAiB,EAAC,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAmB,WAAW,EAAE,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAChG,OAAO,EAAiB,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,wBAAwB,CAAC;AAU7F,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAG9D,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC;AAEhD,UAAU,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,gBAAgB;IACzE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,sBAAsB,CAAC;IAC/B,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,gBAAgB,EAAE,iBAAiB,EAAE,CAAC;IACtC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,gBAAgB,EAAE,QAAQ,EAAE,CAAC;IAC7B,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAClF,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAYD,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,gBAAgB,SAAS,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,4CA4JvG,CAAC;AAWF,eAAO,MAAM,gBAAgB,+CAoB5B,CAAC"}
+{"version":3,"file":"NewScheduler.d.ts","sourceRoot":"","sources":["../../../../../../src/components/custom/scheduler-new/presentation/NewScheduler.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6CAA6C,CAAC;AAC3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oDAAoD,CAAC;AAErF,OAAO,EAAE,sBAAsB,EAAwB,MAAM,0CAA0C,CAAC;AACxG,OAAO,EAAmB,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAoB,WAAW,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAClG,OAAO,EAAkB,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAU/F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGhE,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC;AAEhD,UAAU,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,gBAAgB;IACzE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,sBAAsB,CAAC;IAC/B,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,gBAAgB,EAAE,iBAAiB,EAAE,CAAC;IACtC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,gBAAgB,EAAE,UAAU,EAAE,CAAC;IAC/B,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAClF,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAeD,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,gBAAgB,SAAS,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,4CA4JvG,CAAC;AAiCF,eAAe,SAAS,CAAC"}

package/dist/src/components/custom/scheduler-new/presentation/NewScheduler.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from "moment";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { VariableSizeList as List } from "react-window";
+import { SchedulerHeader } from "./components/header/SchedulerHeader";
+import { BackgroundEvent } from "./components/row/BackgroundEvent";
+import { DefaultRowHeader } from "./components/row/DefaultRowHeader";
+import { SchedulerEvent } from "./components/row/Event";
+import { SchedulerRow } from "./components/row/SchedulerRow";
+import { getDefaultDivisions } from "./logic/getDefaultDivisions";
+import { hoursBetween } from "./logic/getEventSizes";
+import { getLinesByDivisions } from "./logic/getLinesByDivisions";
+import { separateEventsToInnerRows } from "./logic/separateEventsToInnerRows";
+import { sortByCategoryAndTitle } from "./logic/sortByCategoryAndTitle";
+import { getWeekendLinesByDatesVisible } from "./logic/WeekendCalc";
+import { OnClickUtc, UpdateApi } from "./NewSchedulerUiEvents";
+import { SchedulerPresenter } from "./SchedulerPresenter";
+import styles from "./styles/new-scheduler.module.css";
+const getNow = (isUtc) => {
+    let now = new Date();
+    if (!isUtc) {
+        now = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
+    }
+    return now;
+};
+const rowsHeight = 1.75; // rem
+export const Scheduler = (props) => {
+    const { header: headerContent, id, events: eventsState, backgroundEvents, contextMenuItems, EventComp, RowTitleComp, orderCategories = ["title"], useOrderCategory, onEvent, groupRowColors, rowHeaderWidth = 180, } = props;
+    const BackgroundEventComp = props.BackgroundEventComp ?? BackgroundEvent;
+    const rows = useOrderCategory === false
+        ? props.rows
+        : props.rows.sort((a, b) => sortByCategoryAndTitle(a, b, orderCategories));
+    const instanceRef = useRef(null);
+    // const rowHeaderWidth = "180px";
+    const { selectedDate, visibleDays, isUtc, isHeaderVisible, visibleRows: stateVisibleRows } = props.state;
+    const events = eventsState.filter((event) => {
+        const lastDayOfScheduler = moment(selectedDate).add(visibleDays, "days");
+        return (moment(event.endDate).isAfter(selectedDate) &&
+            moment(event.startDate).isBefore(lastDayOfScheduler));
+    });
+    useEffect(() => {
+        instanceRef.current?.resetAfterIndex(0);
+    }, [orderCategories, props.rows.length, events]);
+    const notEmptyRows = stateVisibleRows ?? rows.length;
+    const visibleRows = height(events, rows, notEmptyRows);
+    const totalHours = visibleDays * 24;
+    const [timeLinePercentage, setTimeLinePercentage] = useState(0);
+    const header = {
+        content: headerContent,
+        divisions: getDefaultDivisions(visibleDays, selectedDate),
+        visibleDays: visibleDays,
+        width: rowHeaderWidth,
+        selectedDate,
+        onEvent,
+        timeLinePercentage: timeLinePercentage,
+        isUtc: isUtc
+    };
+    const evenColor = "var(--cw-color-surface-container-low)";
+    const oddColor = "var(--cw-color-surface-container)";
+    const schedulerContentHeight = rowsHeight * visibleRows;
+    const weekendsLines = getWeekendLinesByDatesVisible(selectedDate, visibleDays);
+    const divisionLines = getLinesByDivisions(header.divisions, visibleDays);
+    // Timeline percentage calculation
+    useEffect(() => {
+        const updateTimeLinePercentage = () => {
+            const percentage = (hoursBetween(selectedDate, getNow(isUtc)) * 100) / totalHours;
+            setTimeLinePercentage(percentage);
+        };
+        updateTimeLinePercentage();
+        const interval = setInterval(updateTimeLinePercentage, 10_000);
+        return () => clearInterval(interval);
+    }, [selectedDate, isUtc, totalHours]);
+    // Memoized Row Component
+    const Row = React.memo(({ index, style }) => {
+        const row = rows[index];
+        const rowColor = groupRowColors
+            ? Math.floor(index / 2) % 2 === 0 ? evenColor : oddColor
+            : index % 2 === 0 ? evenColor : oddColor;
+        const header = {
+            value: row,
+            width: rowHeaderWidth,
+            onEvent: onEvent,
+        };
+        return (_jsx("div", { style: {
+                ...style,
+                backgroundColor: rowColor
+            }, children: _jsx(SchedulerRow, { events: events.filter((it) => it.rowId === row.rowId), backgroundEvents: backgroundEvents.filter((it) => it.rowId === row.rowId), rowHeader: header, EventComp: EventComp, BackgroundEventComp: BackgroundEventComp, RowTitleComp: RowTitleComp, weekendLines: weekendsLines, divisionLines: divisionLines, timeLinePercentage: timeLinePercentage, rowHeightInRem: rowsHeight, onEvent: onEvent, contextMenuItems: contextMenuItems, visibleDays: visibleDays, selectedDate: selectedDate }) }, row.rowId));
+    });
+    const getItemSize = useCallback((index) => {
+        const row = rows[index];
+        const filteredEvents = events.filter((it) => it.rowId === row.rowId);
+        const innerRows = separateEventsToInnerRows(filteredEvents);
+        const rowsNumber = innerRows.length > 0 ? innerRows.length : 1;
+        const pixelsInRem = 16;
+        return rowsNumber * rowsHeight * pixelsInRem;
+    }, [rows, events]);
+    // Render
+    return (_jsxs("div", { id: id, style: {
+            position: "relative",
+            height: `${schedulerContentHeight + 4}rem`,
+            overflowY: "auto",
+            scrollbarWidth: "thin",
+        }, children: [isHeaderVisible && (_jsx("div", { style: {
+                    position: "sticky",
+                    top: 0,
+                    zIndex: 1,
+                }, children: _jsx(SchedulerHeader, { ...header }) })), _jsx(List, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: styles["hide-scrollbar"], children: Row })] }));
+};
+const height = (events, rows, rowsNumber) => {
+    const selectedRows = rows.slice(0, rowsNumber);
+    const flatMapped = selectedRows.flatMap(row => {
+        const newEvents = events.filter(it => it.rowId === row.rowId);
+        const innerRows = separateEventsToInnerRows(newEvents);
+        return innerRows.length > 0 ? innerRows : [[]];
+    });
+    return flatMapped.length;
+};
+//@ts-ignore
+const _preview = () => {
+    const { state, resources, events, backgroundEvents, onEvent } = SchedulerPresenter();
+    return (_jsxs("div", { children: [_jsx("button", { onClick: (_) => onEvent(new UpdateApi()), children: "update" }), _jsx("button", { onClick: (_) => onEvent(new OnClickUtc()), children: state.isUtc ? "set Local" : "set UTC" }), _jsx(Scheduler, { id: "test", state: state, header: { title: "Flights", classification: "ACFT" }, rows: resources, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: DefaultRowHeader, events: events, backgroundEvents: backgroundEvents, contextMenuItems: [] })] }));
+};
+export default Scheduler;

package/dist/src/components/custom/scheduler-new/presentation/NewSchedulerUiEvents.d.ts

@@ -17,7 +17,8 @@ export declare class OnDoubleClickEvent implements UiEvent {
 }
 export declare class OnDragEvent implements UiEvent {
     readonly id: string;
-    constructor(id: string);
+    readonly crewId: string;
+    constructor(id: string, crewId: string);
 }
 export declare class OnDropEvent implements UiEvent {
     readonly id: string;

package/dist/src/components/custom/scheduler-new/presentation/NewSchedulerUiEvents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewSchedulerUiEvents.d.ts","sourceRoot":"","sources":["../../../../../../src/components/custom/scheduler-new/presentation/NewSchedulerUiEvents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6CAA6C,CAAC;AAE3E,qBAAa,YAAa,YAAW,OAAO;aACR,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,iBAAkB,YAAW,OAAO;aACb,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,iBAAkB,YAAW,OAAO;aACb,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,kBAAmB,YAAW,OAAO;aACd,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,WAAY,YAAW,OAAO;aACP,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,WAAY,YAAW,OAAO;aAEzB,EAAE,EAAE,MAAM;aACV,IAAI,EAAE,IAAI;gBADV,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,IAAI;CAG3B;AAED,qBAAa,eAAgB,YAAW,OAAO;aAE7B,EAAE,EAAE,MAAM;aACV,IAAI,EAAE,IAAI;gBADV,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,IAAI;CAG3B;AAED,qBAAa,eAAgB,YAAW,OAAO;aACX,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,qBAAsB,YAAW,OAAO;aACjB,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,iBAAkB,YAAW,OAAO;aACb,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,uBAAwB,YAAW,OAAO;aACnB,IAAI,EAAE,IAAI;gBAAV,IAAI,EAAE,IAAI;CAE7C;AACD,qBAAa,qBAAsB,YAAW,OAAO;aACjB,IAAI,EAAE,IAAI;gBAAV,IAAI,EAAE,IAAI;CAE7C;AAED,qBAAa,eAAgB,YAAW,OAAO;aAE7B,EAAE,EAAE,MAAM;aACV,IAAI,EAAE,IAAI;gBADV,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,IAAI;CAG3B;AAED,qBAAa,eAAgB,YAAW,OAAO;aAE7B,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAG3B;AAED,qBAAa,gBAAiB,YAAW,OAAO;aAE9B,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAG3B;AAED,qBAAa,gBAAiB,YAAW,OAAO;aACZ,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,SAAU,YAAW,OAAO;;CAGxC;AAED,qBAAa,UAAW,YAAW,OAAO;;CAGzC;AAED,qBAAa,kBAAmB,YAAW,OAAO;aAEhC,EAAE,EAAE,MAAM;aACV,WAAW,EAAE,MAAM;gBADnB,EAAE,EAAE,MAAM,EACV,WAAW,EAAE,MAAM;CAGpC"}
+{"version":3,"file":"NewSchedulerUiEvents.d.ts","sourceRoot":"","sources":["../../../../../../src/components/custom/scheduler-new/presentation/NewSchedulerUiEvents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,6CAA6C,CAAC;AAEzE,qBAAa,YAAa,YAAW,OAAO;aACR,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,iBAAkB,YAAW,OAAO;aACb,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,iBAAkB,YAAW,OAAO;aACb,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,kBAAmB,YAAW,OAAO;aACd,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,WAAY,YAAW,OAAO;aACP,EAAE,EAAE,MAAM;aAAkB,MAAM,EAAE,MAAM;gBAA1C,EAAE,EAAE,MAAM,EAAkB,MAAM,EAAE,MAAM;CAE7E;AAED,qBAAa,WAAY,YAAW,OAAO;aAEzB,EAAE,EAAE,MAAM;aACV,IAAI,EAAE,IAAI;gBADV,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,IAAI;CAG3B;AAED,qBAAa,eAAgB,YAAW,OAAO;aAE7B,EAAE,EAAE,MAAM;aACV,IAAI,EAAE,IAAI;gBADV,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,IAAI;CAG3B;AAED,qBAAa,eAAgB,YAAW,OAAO;aACX,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,qBAAsB,YAAW,OAAO;aACjB,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,iBAAkB,YAAW,OAAO;aACb,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,uBAAwB,YAAW,OAAO;aACnB,IAAI,EAAE,IAAI;gBAAV,IAAI,EAAE,IAAI;CAE7C;AAED,qBAAa,qBAAsB,YAAW,OAAO;aACjB,IAAI,EAAE,IAAI;gBAAV,IAAI,EAAE,IAAI;CAE7C;AAED,qBAAa,eAAgB,YAAW,OAAO;aAE7B,EAAE,EAAE,MAAM;aACV,IAAI,EAAE,IAAI;gBADV,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,IAAI;CAG3B;AAED,qBAAa,eAAgB,YAAW,OAAO;aAE7B,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAG3B;AAED,qBAAa,gBAAiB,YAAW,OAAO;aAE9B,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAG3B;AAED,qBAAa,gBAAiB,YAAW,OAAO;aACZ,EAAE,EAAE,MAAM;gBAAV,EAAE,EAAE,MAAM;CAE7C;AAED,qBAAa,SAAU,YAAW,OAAO;;CAGxC;AAED,qBAAa,UAAW,YAAW,OAAO;;CAGzC;AAED,qBAAa,kBAAmB,YAAW,OAAO;aAEhC,EAAE,EAAE,MAAM;aACV,WAAW,EAAE,MAAM;gBADnB,EAAE,EAAE,MAAM,EACV,WAAW,EAAE,MAAM;CAGpC"}

package/dist/src/components/custom/scheduler-new/presentation/NewSchedulerUiEvents.js

@@ -0,0 +1,118 @@
+export class OnClickEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnRangeClickEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnMultiClickEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnDoubleClickEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnDragEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnDropEvent {
+    id;
+    date;
+    constructor(id, date) {
+        this.id = id;
+        this.date = date;
+    }
+}
+export class OnDropCtrlEvent {
+    id;
+    date;
+    constructor(id, date) {
+        this.id = id;
+        this.date = date;
+    }
+}
+export class OnClickRowEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnDoubleClickRowEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnRightClickEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnStartClickHeaderEvent {
+    date;
+    constructor(date) {
+        this.date = date;
+    }
+}
+export class OnEndClickHeaderEvent {
+    date;
+    constructor(date) {
+        this.date = date;
+    }
+}
+export class OnRightClickRow {
+    id;
+    date;
+    constructor(id, date) {
+        this.id = id;
+        this.date = date;
+    }
+}
+export class OnLeftDragStart {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnRightDragStart {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnClickRowHeader {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class UpdateApi {
+    constructor() {
+    }
+}
+export class OnClickUtc {
+    constructor() {
+    }
+}
+export class OnClickContextMenu {
+    id;
+    clickedMenu;
+    constructor(id, clickedMenu) {
+        this.id = id;
+        this.clickedMenu = clickedMenu;
+    }
+}