react-big-schedule 8.1.0 → 9.0.1

package/dist/components/DnDSource.js

@@ -1,124 +1,129 @@
 import { DATETIME_FORMAT, DnDTypes, ViewType } from '../config/default';
 export default class DnDSource {
-  constructor(resolveDragObjFunc, DnDEnabled, dndType = DnDTypes.EVENT) {
-    this.resolveDragObjFunc = resolveDragObjFunc;
-    this.dndType = dndType;
-    this.DnDEnabled = DnDEnabled;
-    // vertical view: the time row the user grabbed the event in (an event is drawn once per row it covers)
-    this.dragSlotId = undefined;
-  }
-  getDragSpec = () => ({
-    // beginDrag: (props, monitor, component) => this.resolveDragObjFunc(props),
-    beginDrag: props => {
-      this.dragSlotId = props.slotId;
-      return this.resolveDragObjFunc(props);
-    },
-    // endDrag: (props, monitor, component) => {
-    endDrag: (props, monitor) => {
-      this.dragSlotId = undefined;
-      if (!monitor.didDrop()) return;
-      const {
-        moveEvent,
-        newEvent,
-        schedulerData
-      } = props;
-      const {
-        events,
-        config,
-        viewType,
-        localeDayjs
-      } = schedulerData;
-      const item = monitor.getItem();
-      const type = monitor.getItemType();
-      const dropResult = monitor.getDropResult();
-      let {
-        slotId
-      } = dropResult;
-      let {
-        slotName
-      } = dropResult;
-      let newStart = dropResult.start;
-      let newEnd = dropResult.end;
-      const {
-        initialStart
-      } = dropResult;
-      // const { initialEnd } = dropResult;
-      let action = 'New';
-      const isEvent = type === DnDTypes.EVENT;
-      if (isEvent) {
-        const event = item;
-        if (dropResult.isVertical) {
-          // the vertical drop already resolved the final start/end (see DnDContext.getVerticalMove)
-        } else if (config.relativeMove) {
-          newStart = localeDayjs(event.start).add(localeDayjs(newStart).diff(localeDayjs(new Date(initialStart))), 'ms').format(DATETIME_FORMAT);
-        } else if (viewType !== ViewType.Day) {
-          const tmpDayjs = localeDayjs(newStart);
-          newStart = localeDayjs(event.start).year(tmpDayjs.year()).month(tmpDayjs.month()).date(tmpDayjs.date()).format(DATETIME_FORMAT);
-        }
-        newEnd = localeDayjs(newStart).add(localeDayjs(event.end).diff(localeDayjs(event.start)), 'ms').format(DATETIME_FORMAT);
-
-        // if crossResourceMove disabled, slot returns old value
-        if (config.crossResourceMove === false) {
-          slotId = schedulerData._getEventSlotId(item);
-          slotName = undefined;
-          const slot = schedulerData.getSlotById(slotId);
-          if (slot) slotName = slot.name;
-        }
-        action = 'Move';
-      }
-      let hasConflict = false;
-      if (config.checkConflict) {
-        const start = localeDayjs(newStart);
-        const end = localeDayjs(newEnd);
-        events.forEach(e => {
-          if (schedulerData._getEventSlotId(e) === slotId && (!isEvent || e.id !== item.id)) {
-            const eStart = localeDayjs(e.start);
-            const eEnd = localeDayjs(e.end);
-            if (start >= eStart && start < eEnd || end > eStart && end <= eEnd || eStart >= start && eStart < end || eEnd > start && eEnd <= end) hasConflict = true;
-          }
-        });
-      }
-      if (hasConflict) {
-        const {
-          conflictOccurred
-        } = props;
-        if (conflictOccurred !== undefined) {
-          conflictOccurred(schedulerData, action, item, type, slotId, slotName, newStart, newEnd);
-        } else {
-          console.log('Conflict occurred, set conflictOccurred func in Scheduler to handle it');
-        }
-      } else if (isEvent) {
-        if (moveEvent !== undefined) {
-          moveEvent(schedulerData, item, slotId, slotName, newStart, newEnd);
-        }
-      } else if (newEvent !== undefined) newEvent(schedulerData, slotId, slotName, newStart, newEnd, type, item);
-    },
-    canDrag: props => {
-      const {
-        schedulerData,
-        resourceEvents
-      } = props;
-      const item = this.resolveDragObjFunc(props);
-      if (schedulerData._isResizing()) return false;
-      const {
-        config
-      } = schedulerData;
-      return config.movable && (resourceEvents === undefined || !resourceEvents.groupOnly) && (item.movable === undefined || item.movable !== false);
+    // `never`: each component passes a resolver typed for its own props object (a DnDSourceProps subtype)
+    resolveDragObjFunc;
+    dndType;
+    DnDEnabled;
+    dragSlotId;
+    constructor(resolveDragObjFunc, DnDEnabled, dndType = DnDTypes.EVENT) {
+        this.resolveDragObjFunc = resolveDragObjFunc;
+        this.dndType = dndType;
+        this.DnDEnabled = DnDEnabled;
+        // vertical view: the time row the user grabbed the event in (an event is drawn once per row it covers)
+        this.dragSlotId = undefined;
     }
-  });
-
-  // Returns the drag specification for use with useDrag hook
-  // This should be called with props from the component using the hook
-  getDragOptions = props => {
-    const spec = this.getDragSpec();
-    return {
-      type: this.dndType,
-      item: () => spec.beginDrag(props),
-      end: (_item, monitor) => spec.endDrag(props, monitor),
-      canDrag: () => spec.canDrag(props),
-      collect: monitor => ({
-        isDragging: monitor.isDragging()
-      })
+    getDragSpec = () => ({
+        // beginDrag: (props, monitor, component) => this.resolveDragObjFunc(props),
+        beginDrag: (props) => {
+            this.dragSlotId = props.slotId;
+            return this.resolveDragObjFunc(props);
+        },
+        // endDrag: (props, monitor, component) => {
+        endDrag: (props, monitor) => {
+            this.dragSlotId = undefined;
+            if (!monitor.didDrop())
+                return;
+            const { moveEvent, newEvent, schedulerData } = props;
+            const { events, config, viewType, localeDayjs } = schedulerData;
+            const item = monitor.getItem();
+            const type = monitor.getItemType();
+            // didDrop() is true here, so a drop result exists
+            const dropResult = monitor.getDropResult();
+            let { slotId } = dropResult;
+            let { slotName } = dropResult;
+            let newStart = dropResult.start;
+            let newEnd = dropResult.end;
+            const { initialStart } = dropResult;
+            // const { initialEnd } = dropResult;
+            let action = 'New';
+            const isEvent = type === DnDTypes.EVENT;
+            if (isEvent) {
+                const event = item; // an EVENT drag always carries an event
+                if (dropResult.isVertical) {
+                    // the vertical drop already resolved the final start/end (see DnDContext.getVerticalMove)
+                }
+                else if (config.relativeMove) {
+                    newStart = localeDayjs(event.start)
+                        .add(localeDayjs(newStart).diff(localeDayjs(new Date(initialStart))), 'ms')
+                        .format(DATETIME_FORMAT);
+                }
+                else if (viewType !== ViewType.Day) {
+                    const tmpDayjs = localeDayjs(newStart);
+                    newStart = localeDayjs(event.start)
+                        .year(tmpDayjs.year())
+                        .month(tmpDayjs.month())
+                        .date(tmpDayjs.date())
+                        .format(DATETIME_FORMAT);
+                }
+                newEnd = localeDayjs(newStart)
+                    .add(localeDayjs(event.end).diff(localeDayjs(event.start)), 'ms')
+                    .format(DATETIME_FORMAT);
+                // if crossResourceMove disabled, slot returns old value
+                if (config.crossResourceMove === false) {
+                    slotId = schedulerData._getEventSlotId(event);
+                    slotName = undefined;
+                    const slot = schedulerData.getSlotById(slotId);
+                    if (slot)
+                        slotName = slot.name;
+                }
+                action = 'Move';
+            }
+            let hasConflict = false;
+            if (config.checkConflict) {
+                const start = localeDayjs(newStart);
+                const end = localeDayjs(newEnd);
+                events.forEach(e => {
+                    if (schedulerData._getEventSlotId(e) === slotId && (!isEvent || e.id !== item.id)) {
+                        const eStart = localeDayjs(e.start);
+                        const eEnd = localeDayjs(e.end);
+                        if ((start >= eStart && start < eEnd) ||
+                            (end > eStart && end <= eEnd) ||
+                            (eStart >= start && eStart < end) ||
+                            (eEnd > start && eEnd <= end))
+                            hasConflict = true;
+                    }
+                });
+            }
+            if (hasConflict) {
+                const { conflictOccurred } = props;
+                if (conflictOccurred !== undefined) {
+                    conflictOccurred(schedulerData, action, item, type, slotId, slotName, newStart, newEnd);
+                }
+                else {
+                    console.log('Conflict occurred, set conflictOccurred func in Scheduler to handle it');
+                }
+            }
+            else if (isEvent) {
+                if (moveEvent !== undefined) {
+                    moveEvent(schedulerData, item, slotId, slotName, newStart, newEnd);
+                }
+            }
+            else if (newEvent !== undefined)
+                newEvent(schedulerData, slotId, slotName, newStart, newEnd, type, item);
+        },
+        canDrag: (props) => {
+            const { schedulerData, resourceEvents } = props;
+            const item = this.resolveDragObjFunc(props);
+            if (schedulerData._isResizing())
+                return false;
+            const { config } = schedulerData;
+            return (config.movable &&
+                (resourceEvents === undefined || !resourceEvents.groupOnly) &&
+                (item.movable === undefined || item.movable !== false));
+        },
+    });
+    // Returns the drag specification for use with useDrag hook
+    // This should be called with props from the component using the hook
+    getDragOptions = (props) => {
+        const spec = this.getDragSpec();
+        return {
+            type: this.dndType,
+            item: () => spec.beginDrag(props),
+            end: (_item, monitor) => spec.endDrag(props, monitor),
+            canDrag: () => spec.canDrag(props),
+            collect: monitor => ({
+                isDragging: monitor.isDragging(),
+            }),
+        };
     };
-  };
-}
+}

package/dist/components/EventItem.d.ts

@@ -0,0 +1,41 @@
+import { DnDTypes } from '../config/default';
+import type { EventPopoverCallbacks, Id, NewEventDraft, SchedulerEvent } from '../types';
+import type DnDSource from './DnDSource';
+import type SchedulerData from './SchedulerData';
+type ConflictEvent = SchedulerEvent | NewEventDraft;
+export interface EventItemProps extends EventPopoverCallbacks {
+    schedulerData: SchedulerData;
+    eventItem: SchedulerEvent;
+    isStart: boolean;
+    isEnd: boolean;
+    left: number;
+    width: number;
+    top: number;
+    height?: number;
+    isInPopover: boolean;
+    leftIndex: number;
+    rightIndex: number;
+    /** Row (slot) the event is drawn in; used by the vertical resource view. */
+    slotId?: Id;
+    dndSource?: DnDSource;
+    updateEventStart?: (schedulerData: SchedulerData, eventItem: SchedulerEvent, newStart: string) => void;
+    updateEventEnd?: (schedulerData: SchedulerData, eventItem: SchedulerEvent, newEnd: string) => void;
+    moveEvent?: (schedulerData: SchedulerData, eventItem: SchedulerEvent, slotId: Id, slotName: string | undefined, start: string, end: string) => void;
+    conflictOccurred?: (schedulerData: SchedulerData, action: string, eventItem: ConflictEvent, type: DnDTypes, slotId: Id, slotName: string | null | undefined, start: string, end: string) => void;
+}
+export interface EventItemState {
+    left: number;
+    top: number;
+    width: number;
+    height?: number;
+    contentMousePosX: number;
+    eventItemLeftRect: number;
+    eventItemRightRect: number;
+    startX?: number;
+    endX?: number;
+}
+declare function EventItemWithDnD(props: EventItemProps): import("react").JSX.Element;
+declare namespace EventItemWithDnD {
+    var displayName: string;
+}
+export default EventItemWithDnD;