@cwellt_software/cwellt-reactjs-lib 1.1.4 → 1.1.5

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

@@ -1,19 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,28 +0,0 @@
-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

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

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

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

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

@@ -1,123 +0,0 @@
-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.js

@@ -1,118 +0,0 @@
-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;
-    }
-}

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

@@ -1,166 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { when } from "../../../../common/functions/dsl/UiEventDSL";
-import { CwIcon } from "../../../display/graphics/icon/CwIcon";
-import { getListOfNumbers, getRandomEvents } from "./helpers";
-import { eventIsVisible } from "./logic/eventIsVisible";
-import { getEventSizes } from "./logic/getEventSizes";
-import { OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnLeftDragStart, OnRightClickEvent, OnRightClickRow, OnRightDragStart, UpdateApi, } from "./NewSchedulerUiEvents";
-export const eventToUiState = (it, selectedDate, visibleDays, tooltip) => {
-    const { left, width } = getEventSizes(selectedDate, visibleDays, it.startDate, it.endDate);
-    const eventState = {
-        ...it,
-        left,
-        width,
-        tooltip: tooltip,
-        selected: false,
-        isResizable: false,
-        isDraggable: false,
-    };
-    return eventState;
-};
-export const SchedulerPresenter = () => {
-    const [events, setEvents] = useState([]);
-    const [backgroundEvents, setBackgroundEvents] = useState([]);
-    const [uiState, setUiState] = useState(() => {
-        const visibleDays = 1;
-        const selectedDate = new Date("2024-12-03");
-        const isHeaderVisible = true;
-        return {
-            isUtc: false,
-            selectedDate: selectedDate,
-            isHeaderVisible: isHeaderVisible,
-            visibleDays: visibleDays,
-            rowsHeight: 2,
-            visibleRows: 8,
-        };
-    });
-    const [resources, setResources] = useState([]);
-    const selectedEventRef = useRef("");
-    useEffect(() => {
-        updateDataFromApi();
-    }, []);
-    const updateDataFromApi = () => {
-        const rows = 1;
-        // api call here to events
-        const apiEvents = getListOfNumbers(rows).flatMap((e) => {
-            return getRandomEvents(uiState.selectedDate, uiState.visibleDays * 3, e);
-        });
-        const eventsWithSizes = apiEvents.map((it) => {
-            return eventToUiState(it, uiState.selectedDate, uiState.visibleDays, _jsxs("div", { children: [it.startDate.getHours() + ":" + it.startDate.getMinutes(), " -", it.endDate.getHours() + ":" + it.endDate.getMinutes()] }));
-        });
-        const visibleEvents = eventsWithSizes.filter((event) => {
-            return eventIsVisible(event.startDate, event.endDate, uiState.selectedDate, uiState.visibleDays);
-        });
-        setEvents(visibleEvents);
-        const apiBackgroundEvents = getListOfNumbers(1).map((e) => {
-            const backgroundEvent = {
-                id: e.toString(),
-                rowId: e.toString(),
-                color: "orange",
-                isResizable: false,
-                isDraggable: false,
-                width: 100 / uiState.visibleDays,
-                name: "Birthday",
-                icons: _jsx(CwIcon, { iconId: "house", style: { padding: "0.5rem" } }, "cosa"),
-                startDate: new Date(),
-                left: 0,
-                endDate: new Date(),
-                isVisible: true,
-                selected: false,
-            };
-            return backgroundEvent;
-        });
-        setBackgroundEvents(apiBackgroundEvents);
-        // api call here to rows
-        const apiRows = getListOfNumbers(rows).map((e) => {
-            return {
-                resourceId: e.toString(),
-                title: "JAC" + e,
-            };
-        });
-        const headerProps = apiRows.map((row) => {
-            return {
-                rowId: row.resourceId,
-                title: row.title,
-            };
-        });
-        setResources(headerProps);
-    };
-    const onEvent = (event) => {
-        when(event)
-            .case(OnClickEvent, (event) => {
-            console.log("onClick event: " + event.id);
-        })
-            .case(OnDoubleClickEvent, (event) => {
-            const eventData = resources
-                .map((resource) => {
-                const element = events
-                    .filter((it) => {
-                    return it.rowId === resource.rowId;
-                })
-                    .find((it) => it.id == event.id);
-                return element;
-            })
-                .filter((it) => it !== undefined)[0];
-            console.log("found", eventData?.startDate, eventData?.endDate);
-        })
-            .case(OnDragEvent, (event) => {
-            console.log("onDrag event: " + event.id);
-            selectedEventRef.current = event.id;
-            console.log("selectedEvent set to: " + selectedEventRef.current);
-        })
-            .case(OnDropEvent, (event) => {
-            console.log("onDrop event: " + selectedEventRef.current + " to row: " + event.id);
-            setEvents((prevEvents) => {
-                // Find the index of the event to be updated
-                const eventIndex = prevEvents.findIndex((e) => e.id === selectedEventRef.current);
-                // If event is found, create a new array with the updated event
-                const updatedEvents = [...prevEvents];
-                updatedEvents[eventIndex] = {
-                    ...updatedEvents[eventIndex],
-                    rowId: event.id,
-                };
-                return updatedEvents;
-            });
-            console.log("drop on");
-            selectedEventRef.current = ""; // Reset the selected event ref
-        })
-            .case(OnDropCtrlEvent, (event) => {
-            alert(`Clicked row is ${event.id}`);
-        })
-            .case(OnClickRowEvent, (event) => {
-            alert(`Clicked row is ${event.id}`);
-        })
-            .case(OnRightClickEvent, (event) => {
-            alert(`RightClick event ${event.id}`);
-        })
-            .case(OnRightClickRow, (event) => {
-            alert(`RightClick row ${event.id}`);
-        })
-            .case(OnLeftDragStart, (event) => {
-            alert(`Start left Drag ${event.id}`);
-        })
-            .case(OnRightDragStart, (event) => {
-            alert(`Start Right Drag ${event.id}`);
-        })
-            .case(UpdateApi, () => {
-            updateDataFromApi();
-        })
-            .case(OnClickRowHeader, (event) => {
-            console.log(`Clicked row ${event.id}`);
-        })
-            .case(OnClickUtc, () => {
-            setUiState((old) => {
-                return { ...old, isUtc: !old.isUtc };
-            });
-        });
-    };
-    return {
-        state: uiState,
-        resources: resources,
-        events,
-        backgroundEvents,
-        onEvent: onEvent,
-    };
-};

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

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import moment from "moment";
-import styles from "../../styles/scheduler-header.module.css";
-export const SchedulerHeaderDivision = ({ topDivisions, bottomDivisions, classification, topWidth, startDate, endDate }) => {
-    const isToday = () => {
-        if (!startDate)
-            return false;
-        const today = moment();
-        if (endDate) {
-            return today.isBetween(startDate, endDate, 'day', '[]');
-        }
-        return today.isSame(startDate, 'day');
-    };
-    return (_jsxs("div", { style: {
-            width: topWidth,
-            cursor: "pointer"
-        }, children: [_jsx("div", { className: `${styles["scheduler-dates"]} ${isToday() ? styles["current-day"] : ""}`, children: _jsx("span", { children: topDivisions }) }), _jsx("div", { style: { display: "flex", justifyContent: "space-between", flex: 1 }, children: bottomDivisions.map((element) => (_jsx("div", { className: styles["scheduler-hours"], children: _jsx("span", { children: element }) }, classification + element + topDivisions))) })] }));
-};
-export const _preview = () => {
-    const today = new Date();
-    return (_jsx(SchedulerHeaderDivision, { topDivisions: new Date().toLocaleDateString(), bottomDivisions: [
-            new Date(1, 1, 1).toLocaleDateString(),
-            new Date(1, 2, 3).toLocaleDateString(),
-            new Date(2, 2, 2).toLocaleDateString(),
-        ], classification: "test", startDate: today, endDate: today }));
-};

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

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from "../../styles/scheduler-header.module.css";
-export const HeaderTitle = ({ title, dividerText, width }) => {
-    return (_jsxs("div", { className: styles["scheduler-header-title"], style: { width: width }, children: [_jsx("div", { children: _jsx("h5", { children: title }) }), _jsx("div", { children: _jsx("span", { children: dividerText }) })] }));
-};
-export const _preview = () => {
-    return _jsx(HeaderTitle, { title: "Test title", dividerText: "Divider test", width: 5 });
-};

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

@@ -1,86 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import moment from "moment";
-import { dateFromPercentage } from "../../logic/dateFromPercentage";
-import { getPercentageFromMouseEvent } from "../../logic/getPercentageFromMouseEvent";
-import { OnEndClickHeaderEvent, OnStartClickHeaderEvent } from "../../NewSchedulerUiEvents";
-import styles from "../../styles/scheduler-header.module.css";
-import { TimeLine } from "../timeline/TimeLine";
-import { SchedulerHeaderDivision } from "./HeaderDivision";
-import { HeaderTitle } from "./HeaderTitle";
-export const SchedulerHeader = ({ content, divisions, visibleDays, selectedDate, width, onEvent, timeLinePercentage, isUtc }) => {
-    const topWidth = (100 / visibleDays);
-    const { title, classification } = content;
-    return (_jsxs("div", { style: { display: "flex" }, children: [_jsx(HeaderTitle, { title: title, dividerText: classification, width: width }), _jsxs("div", { className: styles["scheduler-header-divisions"], style: { flex: 1, display: "flex", position: "relative" }, onMouseDown: (e) => {
-                    e.preventDefault();
-                    const clickPercentage = getPercentageFromMouseEvent(e);
-                    const date = dateFromPercentage(selectedDate, visibleDays, clickPercentage);
-                    onEvent(new OnStartClickHeaderEvent(date));
-                }, onMouseUp: (e) => {
-                    e.preventDefault();
-                    const clickPercentage = getPercentageFromMouseEvent(e);
-                    const date = dateFromPercentage(selectedDate, visibleDays, clickPercentage);
-                    onEvent(new OnEndClickHeaderEvent(date));
-                }, children: [divisions.map((day) => {
-                        const thisTopWidth = visibleDays > 15
-                            ? topWidth * day.bottom.length
-                            : topWidth;
-                        const dateStr = day.startDate ? moment(day.startDate) : moment(day.top, "DD.MM.YYYY");
-                        const startDate = dateStr.toDate();
-                        const endDate = day.endDate ? moment(day.endDate).toDate() : undefined;
-                        return (_jsx(SchedulerHeaderDivision, { topDivisions: day.top, bottomDivisions: day.bottom, classification: classification, topWidth: thisTopWidth + "%", startDate: startDate, endDate: endDate }, day.top + classification));
-                    }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (_jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "50%", height: "50%", isHeader: true, isUtc: isUtc }))] })] }));
-};
-export const _preview = () => {
-    const header = {
-        width: 100,
-        content: {
-            title: "Flights",
-            classification: "Aircraft/Time",
-        },
-        isUtc: true,
-        divisions: [
-            {
-                top: "Aug 21",
-                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"],
-                startDate: new Date(2024, 7, 21), // Mes es 0-based, así que 7 es Agosto
-                endDate: new Date(2024, 7, 21)
-            },
-            {
-                top: "Aug 22",
-                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"],
-                startDate: new Date(2024, 7, 22),
-                endDate: new Date(2024, 7, 22)
-            },
-            /*{
-                top: "Aug 23",
-                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
-            },
-            {
-                top: "Aug 24",
-                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
-            },
-            {
-                top: "Aug 25",
-                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
-            },
-            {
-                top: "Aug 26",
-                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
-            },
-            {
-                top: "Aug 27",
-                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
-            },
-            {
-                top: "Aug 28",
-                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
-            }*/
-        ],
-        visibleDays: 2,
-        selectedDate: new Date(),
-        timeLinePercentage: 50,
-        onEvent: () => {
-        }
-    };
-    return _jsx(SchedulerHeader, { ...header });
-};