@cwellt_software/cwellt-reactjs-lib 1.1.5 → 1.1.6

package/dist/index.cjs.js

@@ -9,6 +9,7 @@ var Draggable = require('react-draggable');
 var moment = require('moment');
 var lodash = require('lodash');
 var reactWindow = require('react-window');
+var ideToolbox = require('@react-buddy/ide-toolbox');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -708,7 +709,7 @@ function CwLoadingSmall(CwelltLoadingAppointements) {
         jsxRuntime.jsx("div", {})) }));
 }
 
-var styles$j = {"cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si","cwi-icons":"cw-generic-tooltip-module_cwi-icons__0-vzj"};
+var styles$j = {"cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si"};
 
 // Constants moved outside to prevent recreation
 const margin = 16;
@@ -2093,7 +2094,7 @@ function CwFileUpload(fileUploadProps) {
     return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "row", children: [jsxRuntime.jsx("input", { className: "cw-button", type: "file", accept: fileUploadProps.accept, readOnly: true, placeholder: "No file selected...", onChange: handleFileChange }), previewURL && (jsxRuntime.jsx("div", { className: "row", children: jsxRuntime.jsx("img", { src: previewURL, alt: "Preview", style: { maxWidth: "200px", maxHeight: "200px" } }) }))] }), error && jsxRuntime.jsx("div", { className: "row error", children: error }), jsxRuntime.jsx("div", { className: "row", children: jsxRuntime.jsxs("label", { children: ["Please note: File/image has to be in ", fileUploadProps.acceptString, " format", fileUploadProps.sizeString && `, ${fileUploadProps.sizeString}`] }) })] }));
 }
 
-var styles$b = {"fileUploadContainer":"cw-file-upload-multiple-module_fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module_hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module_uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module_uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module_uploadTitle__gjRk8","uploadTitleDisabled":"cw-file-upload-multiple-module_uploadTitleDisabled__tNwSZ","uploadSubtitle":"cw-file-upload-multiple-module_uploadSubtitle__Z0S5t","uploadSubtitleDisabled":"cw-file-upload-multiple-module_uploadSubtitleDisabled__ibxhc","filesContainer":"cw-file-upload-multiple-module_filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module_fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module_fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module_fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module_fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module_fileName__DjepK","fileSize":"cw-file-upload-multiple-module_fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module_smallButton__siUAh"};
+var styles$b = {"fileUploadContainer":"cw-file-upload-multiple-module_fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module_hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module_uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module_uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module_uploadTitle__gjRk8","uploadSubtitle":"cw-file-upload-multiple-module_uploadSubtitle__Z0S5t","filesContainer":"cw-file-upload-multiple-module_filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module_fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module_fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module_fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module_fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module_fileName__DjepK","fileSize":"cw-file-upload-multiple-module_fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module_smallButton__siUAh"};
 
 function CwFileUploadMultiple(fileUploadProps) {
     const fileInputRef = React.useRef(null);
@@ -7087,6 +7088,10 @@ class OnClickRowHeader {
         this.id = id;
     }
 }
+class UpdateApi {
+    constructor() {
+    }
+}
 class OnClickUtc {
     constructor() {
     }
@@ -7743,6 +7748,205 @@ const getWeekendsDaysInDateRange = (initialDate, visibleDays) => {
 
 class UiEvent {
 }
+function when(event) {
+    let found = false;
+    const actions = {
+        case(eventType, action) {
+            if (!found && event instanceof eventType) {
+                action(event);
+                found = true;
+            }
+            return actions;
+        },
+        else(action) {
+            if (!found) {
+                action(event);
+            }
+        }
+    };
+    return actions;
+}
+
+const getListOfNumbers = (len) => Array(len)
+    .fill(0)
+    .map((_, idx) => idx);
+const getRandomColor = () => {
+    return "#" + (0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6);
+};
+const getRandomEvents = (date, visibleDays, resourceId) => {
+    return getListOfNumbers(visibleDays).map((e) => {
+        const len1 = Math.floor(Math.random() * 24) + 1;
+        const moment1 = moment(date).add(e, "days").add(e, "minutes");
+        const len2 = Math.floor(Math.random() * 25) + 1;
+        return {
+            id: crypto.randomUUID(),
+            rowId: resourceId.toString(),
+            name: "API Design",
+            color: getRandomColor(),
+            startDate: moment1.add(-len1, "hour").toDate(),
+            endDate: moment1.add(len2, "hour").toDate(),
+        };
+    });
+};
+
+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;
+};
+const SchedulerPresenter = () => {
+    const [events, setEvents] = React.useState([]);
+    const [backgroundEvents, setBackgroundEvents] = React.useState([]);
+    const [uiState, setUiState] = React.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] = React.useState([]);
+    const selectedEventRef = React.useRef("");
+    React.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, jsxRuntime.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: jsxRuntime.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,
+    };
+};
 
 const getNow = (isUtc) => {
     let now = new Date();
@@ -7843,6 +8047,10 @@ const height = (events, rows, rowsNumber) => {
     });
     return flatMapped.length;
 };
+const SchedulerPreview = () => {
+    const { state, resources, events, backgroundEvents, onEvent } = SchedulerPresenter();
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("button", { onClick: (_) => onEvent(new UpdateApi()), children: "update" }), jsxRuntime.jsx("button", { onClick: (_) => onEvent(new OnClickUtc()), children: state.isUtc ? "set Local" : "set UTC" }), jsxRuntime.jsx(Scheduler, { id: "test", state: state, header: { title: "Flights", classification: "ACFT" }, rows: resources, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: DefaultRowHeader, events: events, backgroundEvents: backgroundEvents, contextMenuItems: [] })] }));
+};
 
 let topsCounter = 0;
 class CwSuperScheduler extends React__namespace.Component {
@@ -8457,6 +8665,43 @@ const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder
     return (jsxRuntime.jsxs("div", { className: `cw-find-airport ${className}`, style: width ? { width } : undefined, children: [jsxRuntime.jsxs("div", { className: "cw-find-airport-input-wrapper", children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (jsxRuntime.jsx("div", { className: "cw-find-airport-loading", children: jsxRuntime.jsx(CwIcon, { iconId: "spinner" }) })), inputValue && !disabled && !isInitialLoading && (jsxRuntime.jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected airport", variant: "icon", icon: "close", color: "neutral" }))] }), showDropdown && options.length > 0 && (jsxRuntime.jsx("div", { ref: dropdownRef, className: "cw-find-airport-dropdown", role: "listbox", children: options.map((option, index) => (jsxRuntime.jsx("div", { className: `cw-find-airport-option ${index === highlightedIndex ? "highlighted" : ""}`, onClick: () => handleOptionSelect(option.value), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }))] }));
 };
 
+const CwPaletteTree = () => (jsxRuntime.jsxs(ideToolbox.Palette, { children: [jsxRuntime.jsx(ideToolbox.Category, { name: "buttons", children: jsxRuntime.jsxs(ideToolbox.Component, { name: "CwButton", children: [jsxRuntime.jsx(ideToolbox.Variant, { name: "solid", children: jsxRuntime.jsx(CwButton, { variant: "solid", text: "Button" }) }), jsxRuntime.jsx(ideToolbox.Variant, { name: "outline", children: jsxRuntime.jsx(CwButton, { variant: "outline", text: "Button" }) }), jsxRuntime.jsx(ideToolbox.Variant, { name: "Icon", children: jsxRuntime.jsx(CwButton, { variant: "icon", icon: "save" }) }), jsxRuntime.jsx(ideToolbox.Variant, { name: "Example", children: jsxRuntime.jsxs(CwButton, { variant: "solid", color: "danger", children: [jsxRuntime.jsx("span", { children: "Example" }), jsxRuntime.jsx("span", { children: "texmple 2" })] }) })] }) }), jsxRuntime.jsx(ideToolbox.Category, { name: "search", children: jsxRuntime.jsx(ideToolbox.Component, { name: "CwSearchInput", children: jsxRuntime.jsx(ideToolbox.Variant, { children: jsxRuntime.jsx(CwSearchInput, { placeholder: "Search", selectList: [
+                            new CwSelectList("Search", "1", "Search something", "red")
+                        ] }) }) }) }), jsxRuntime.jsxs(ideToolbox.Category, { name: "Scheduler-headers", children: [jsxRuntime.jsx(ideToolbox.Component, { name: "DefaultRowHeader", children: jsxRuntime.jsx(ideToolbox.Variant, { children: jsxRuntime.jsx(DefaultRowHeader, { value: {
+                                rowId: "1",
+                                title: "JAC",
+                                title2: "CMD",
+                                subtitle: "ICAO",
+                                subtitle2: "IATA"
+                            }, 
+                            // color={"red"}
+                            width: 180, onEvent: () => {
+                            } }) }) }), jsxRuntime.jsxs(ideToolbox.Component, { name: "PinRowHeader", children: [jsxRuntime.jsx(ideToolbox.Variant, { children: jsxRuntime.jsx(PinRowHeader, { value: {
+                                    rowId: "1",
+                                    title: "JAC",
+                                    title2: "CMD",
+                                    subtitle: "ICAO",
+                                    subtitle2: "IATA",
+                                    isPinned: true,
+                                    contextMenuItems: [],
+                                    isLoading: false,
+                                }, 
+                                // color={"red"}
+                                width: 180, onEvent: () => {
+                                } }) }), jsxRuntime.jsx(ideToolbox.Variant, { name: "pinned", children: jsxRuntime.jsx(PinRowHeader, { value: {
+                                    rowId: "1",
+                                    title: "JAC",
+                                    title2: "CMD",
+                                    subtitle: "ICAO",
+                                    subtitle2: "IATA",
+                                    isPinned: true,
+                                    contextMenuItems: [],
+                                    isLoading: false,
+                                }, 
+                                // color={"red"}
+                                width: 180, onEvent: () => {
+                                } }) })] })] }), jsxRuntime.jsx(ideToolbox.Category, { name: "Scheduler", children: jsxRuntime.jsx(ideToolbox.Component, { name: "Scheduler", children: jsxRuntime.jsx(ideToolbox.Variant, { children: jsxRuntime.jsx(SchedulerPreview, {}) }) }) })] }));
+
 exports.CblDragAndDrop = CblDragAndDrop;
 exports.CwAccordionContainer = CwAccordionContainer;
 exports.CwAlign = CwAlign;
@@ -8557,6 +8802,7 @@ exports.CwMultiselect = CwMultiselect;
 exports.CwNote = CwNote;
 exports.CwOption = CwOption;
 exports.CwOptionList = CwOptionList;
+exports.CwPaletteTree = CwPaletteTree;
 exports.CwReportModal = CwReportModal;
 exports.CwScheduler = CwScheduler;
 exports.CwScheduler2 = CwScheduler2;