chore: update calendar events

Author: gjulivan

packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts

@@ -3,7 +3,6 @@ import {
     rowLayout,
     structurePreviewPalette,
     StructurePreviewProps,
-    svgImage,
     text
 } from "@mendix/widget-plugin-platform/preview/structure-preview-api";
 import { Properties, hidePropertyIn, hidePropertiesIn } from "@mendix/pluggable-widgets-tools";
@@ -71,9 +70,12 @@ export function getPreview(_values: CalendarPreviewProps, isDarkMode: boolean):
             columnSize: "grow",
             padding: 6
         })(
-            svgImage({ width: 16, height: 16, grow: 0 })(
-                decodeURIComponent((isDarkMode ? IconSVGDark : IconSVG).replace("data:image/svg+xml,", ""))
-            ),
+            {
+                type: "Image",
+                document: decodeURIComponent((isDarkMode ? IconSVGDark : IconSVG).replace("data:image/svg+xml,", "")),
+                width: 16,
+                height: 16
+            },
             text({ fontColor: palette.text.primary })("Calendar")
         )
     );

packages/pluggableWidgets/calendar-web/src/Calendar.tsx

@@ -5,13 +5,25 @@ import { CalendarPropsBuilder } from "./helpers/CalendarPropsBuilder";
 import { DnDCalendar } from "./utils/calendar-utils";
 import { constructWrapperStyle } from "./utils/style-utils";
 import "./ui/Calendar.scss";
+import { useCalendarEvents } from "./helpers/useCalendarEvents";
 
 export default function MxCalendar(props: CalendarContainerProps): ReactElement {
-    const wrapperStyle = useMemo(() => constructWrapperStyle(props), [props]);
-    const calendarProps = useMemo(() => new CalendarPropsBuilder(props).build(), [props]);
+    // useMemo with empty dependency array is used
+    // because style and calendar controller needs to be created only once
+    // and not on every re-render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const wrapperStyle = useMemo(() => constructWrapperStyle(props), []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const calendarController = useMemo(() => new CalendarPropsBuilder(props), []);
+    const calendarProps = useMemo(() => {
+        calendarController.updateProps(props);
+        return calendarController.build();
+    }, [props, calendarController]);
+
+    const calendarEvents = useCalendarEvents(props);
     return (
         <div className={classNames("widget-calendar", props.class)} style={wrapperStyle}>
-            <DnDCalendar {...calendarProps} />
+            <DnDCalendar {...calendarProps} {...calendarEvents} />
         </div>
     );
 }

packages/pluggableWidgets/calendar-web/src/Calendar.xml

@@ -71,17 +71,15 @@
                         <enumerationValue key="custom">Custom work-week</enumerationValue>
                     </enumerationValues>
                 </property>
-                <property key="editable" type="enumeration" defaultValue="default">
+                <property key="editable" type="expression" defaultValue="true">
                     <caption>Editable</caption>
                     <description />
-                    <enumerationValues>
-                        <enumerationValue key="default">Default</enumerationValue>
-                        <enumerationValue key="never">Never</enumerationValue>
-                    </enumerationValues>
+                    <returnType type="Boolean" />
                 </property>
-                <property key="enableCreate" type="boolean" defaultValue="true">
+                <property key="enableCreate" type="expression" defaultValue="true">
                     <caption>Enable create</caption>
                     <description />
+                    <returnType type="Boolean" />
                 </property>
                 <property key="showEventDate" type="boolean" defaultValue="true">
                     <caption>Show event date range</caption>
@@ -171,13 +169,6 @@
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Events">
-            <property key="eventDataAttribute" type="attribute" required="false">
-                <caption>Event data attribute</caption>
-                <description>The attribute to store received raw data</description>
-                <attributeTypes>
-                    <attributeType name="String" />
-                </attributeTypes>
-            </property>
             <property key="onEditEvent" type="action" required="false" dataSource="databaseDataSource">
                 <caption>On edit</caption>
                 <description />

packages/pluggableWidgets/calendar-web/src/helpers/CalendarPropsBuilder.ts

@@ -1,56 +1,19 @@
 import { ObjectItem } from "mendix";
-import {
-    CalendarProps as ReactCalendarProps,
-    DateLocalizer,
-    Formats,
-    NavigateAction,
-    ViewsProps
-} from "react-big-calendar";
-import { withDragAndDropProps } from "react-big-calendar/lib/addons/dragAndDrop";
-
+import { DateLocalizer, Formats, ViewsProps } from "react-big-calendar";
 import { CalendarContainerProps } from "../../typings/CalendarProps";
 import { CustomToolbar } from "../components/Toolbar";
-import { eventPropGetter, getViewRange, localizer } from "../utils/calendar-utils";
+import { eventPropGetter, localizer } from "../utils/calendar-utils";
+import { CalendarEvent, DragAndDropCalendarProps } from "../utils/typings";
 import { CustomWeekController } from "./CustomWeekController";
 
-export interface CalendarEvent {
-    title: string;
-    start: Date;
-    end: Date;
-    allDay: boolean;
-    color?: string;
-    item: ObjectItem;
-}
-
-type EventDropOrResize = {
-    event: CalendarEvent;
-    start: Date;
-    end: Date;
-};
-
-interface DragAndDropCalendarProps<TEvent extends object = Event, TResource extends object = object>
-    extends ReactCalendarProps<TEvent, TResource>,
-        withDragAndDropProps<TEvent, TResource> {}
-
 export class CalendarPropsBuilder {
-    private readonly visibleDays: Set<number>;
-    private readonly defaultView: "month" | "week" | "work_week" | "day" | "agenda";
-    private readonly customCaption: string;
-    private readonly isCustomView: boolean;
-    private readonly events: CalendarEvent[];
-    private readonly minTime: Date;
-    private readonly maxTime: Date;
-
-    // Keeps the currently focused/selected event. Updated on every selection.
-    private selectedEvent?: CalendarEvent;
-    /**
-     * Stores the event that should be ignored on the next onSelectEvent call.
-     * This is set when a double-click is detected so we can ignore the
-     * secondary click that React-Big-Calendar dispatches as part of the same
-     * interaction. After the click has been ignored, the field is cleared so
-     * that future selections are handled normally.
-     */
-    private ignoreNextClickFor?: CalendarEvent;
+    private visibleDays: Set<number>;
+    private defaultView: "month" | "week" | "work_week" | "day" | "agenda";
+    private customCaption: string;
+    private isCustomView: boolean;
+    private events: CalendarEvent[];
+    private minTime: Date;
+    private maxTime: Date;
 
     constructor(private props: CalendarContainerProps) {
         this.isCustomView = props.view === "custom";
@@ -62,6 +25,17 @@ export class CalendarPropsBuilder {
         this.maxTime = this.buildTime(props.maxHour ?? 24);
     }
 
+    updateProps(props: CalendarContainerProps): void {
+        this.props = props;
+        this.isCustomView = props.view === "custom";
+        this.defaultView = this.isCustomView ? props.defaultViewCustom : props.defaultViewStandard;
+        this.customCaption = props.customViewCaption?.value ?? "Custom";
+        this.visibleDays = this.buildVisibleDays();
+        this.events = this.buildEvents(props.databaseDataSource?.items ?? []);
+        this.minTime = this.buildTime(props.minHour ?? 0);
+        this.maxTime = this.buildTime(props.maxHour ?? 24);
+    }
+
     build(): DragAndDropCalendarProps<CalendarEvent> {
         const CustomWeek = CustomWeekController.getComponent(this.visibleDays);
         const formats = this.buildFormats();
@@ -80,21 +54,14 @@ export class CalendarPropsBuilder {
             events: this.events,
             formats,
             localizer,
-            resizable: this.props.editable !== "never",
-            selectable: this.props.enableCreate,
+            resizable: this.props.editable.value ?? true,
+            selectable: this.props.enableCreate.value ?? true,
             views,
             allDayAccessor: (event: CalendarEvent) => event.allDay,
             endAccessor: (event: CalendarEvent) => event.end,
             eventPropGetter,
             // @ts-expect-error – navigatable prop not yet in typings but exists in runtime component
             navigatable: true,
-            onEventDrop: this.handleEventDropOrResize,
-            onEventResize: this.handleEventDropOrResize,
-            onNavigate: this.handleRangeChange,
-            onSelectEvent: this.handleSelectEvent,
-            onDoubleClickEvent: this.handleDoubleClickEvent,
-            onKeyPressEvent: this.handleKeyPressEvent,
-            onSelectSlot: this.handleCreateEvent,
             startAccessor: (event: CalendarEvent) => event.start,
             titleAccessor: (event: CalendarEvent) => event.title,
             showAllEvents: this.props.showAllEvents,
@@ -186,87 +153,29 @@ export class CalendarPropsBuilder {
         return new Set(visibleDays);
     }
 
-    private handleEventDropOrResize = ({ event, start, end }: EventDropOrResize): void => {
-        const action = this.props.onDragDropResize?.get(event.item);
-
-        if (action?.canExecute) {
-            action.execute({
-                oldStart: event.start,
-                oldEnd: event.end,
-                newStart: start,
-                newEnd: end
-            });
-        }
-    };
-
-    private handleRangeChange = (date: Date, view: string, _action: NavigateAction): void => {
-        const action = this.props.onViewRangeChange;
-
-        if (action?.canExecute) {
-            const { start, end } = getViewRange(view, date);
-            action.execute({
-                rangeStart: start,
-                rangeEnd: end,
-                currentView: view
-            });
-        }
-    };
-
-    /**
-     * Called when an event is single-clicked (selected).
-     * First click only stores the selection; a consecutive click on the same event triggers edit.
-     */
-    private handleSelectEvent = (event: CalendarEvent): void => {
-        if (this.ignoreNextClickFor === event) {
-            // Skip this click – it belongs to a double-click we've already handled.
-            this.ignoreNextClickFor = undefined;
-            return;
-        }
-
-        if (this.selectedEvent === event) {
-            // Second click on the already-selected event => open edit panel.
-            this.invokeEdit(event);
-        } else {
-            // Update current selection.
-            this.selectedEvent = event;
-        }
-    };
-
-    /**
-     * Fast double click should open edit immediately.
-     */
-    private handleDoubleClickEvent = (event: CalendarEvent): void => {
-        // Open edit immediately & prevent the subsequent single-click handler from firing edit again.
-        this.invokeEdit(event);
-        this.ignoreNextClickFor = event;
-    };
-
-    /**
-     * When the event has focus, pressing Enter should open edit.
-     */
-    private handleKeyPressEvent = (event: CalendarEvent, e: any): void => {
-        if (e.key === "Enter") {
-            this.invokeEdit(event);
-        }
-    };
-
-    private invokeEdit(event: CalendarEvent): void {
-        const action = this.props.onEditEvent?.get(event.item);
-
-        if (action?.canExecute) {
-            action.execute();
-        }
-    }
-
-    private handleCreateEvent = (slotInfo: { start: Date; end: Date; action: string }): void => {
-        const action = this.props.onCreateEvent;
-
-        if (action?.canExecute && this.props.enableCreate) {
-            action?.execute({
-                startDate: slotInfo.start,
-                endDate: slotInfo.end,
-                allDay: slotInfo.action === "select"
-            });
-        }
-    };
+    // private handleEventDropOrResize = ({ event, start, end }: EventDropOrResize): void => {
+    //     const action = this.props.onDragDropResize?.get(event.item);
+
+    //     if (action?.canExecute) {
+    //         action.execute({
+    //             oldStart: event.start,
+    //             oldEnd: event.end,
+    //             newStart: start,
+    //             newEnd: end
+    //         });
+    //     }
+    // };
+
+    // private handleRangeChange = (date: Date, view: string, _action: NavigateAction): void => {
+    //     const action = this.props.onViewRangeChange;
+
+    //     if (action?.canExecute) {
+    //         const { start, end } = getViewRange(view, date);
+    //         action.execute({
+    //             rangeStart: start,
+    //             rangeEnd: end,
+    //             currentView: view
+    //         });
+    //     }
+    // };
 }