From d1c5085b004bb3c606a682b488a92585e50b12b4 Mon Sep 17 00:00:00 2001
From: Amit Desai <amitdesai@live.in>
Date: Tue, 14 Feb 2023 18:05:30 +0530
Subject: [PATCH] fix: calendar auto scroll while dragging event at top/bottom
 edge (#2230)

Closes #2231
---
 .../dragAndDrop/EventContainerWrapper.js      | 37 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/addons/dragAndDrop/EventContainerWrapper.js b/src/addons/dragAndDrop/EventContainerWrapper.js
index 440988fd2..1b1b03d63 100644
--- a/src/addons/dragAndDrop/EventContainerWrapper.js
+++ b/src/addons/dragAndDrop/EventContainerWrapper.js
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { DnDContext } from './DnDContext'
+import { scrollParent, scrollTop } from 'dom-helpers'
+import qsa from 'dom-helpers/cjs/querySelectorAll'
 
 import Selection, {
   getBoundsForNode,
@@ -124,6 +126,30 @@ class EventContainerWrapper extends React.Component {
     })
   }
 
+  updateParentScroll = (parent, node) => {
+    setTimeout(() => {
+      const draggedEl = qsa(node, '.rbc-addons-dnd-drag-preview')[0]
+      if (draggedEl) {
+        if (draggedEl.offsetTop < parent.scrollTop) {
+          scrollTop(parent, Math.max(draggedEl.offsetTop, 0))
+        } else if (
+          draggedEl.offsetTop + draggedEl.offsetHeight >
+          parent.scrollTop + parent.clientHeight
+        ) {
+          scrollTop(
+            parent,
+            Math.min(
+              draggedEl.offsetTop -
+                parent.offsetHeight +
+                draggedEl.offsetHeight,
+              parent.scrollHeight
+            )
+          )
+        }
+      }
+    })
+  }
+
   _selectable = () => {
     let wrapper = this.ref.current
     let node = wrapper.children[0]
@@ -131,6 +157,7 @@ class EventContainerWrapper extends React.Component {
     let selector = (this._selector = new Selection(() =>
       wrapper.closest('.rbc-time-view')
     ))
+    let parent = scrollParent(wrapper)
 
     selector.on('beforeSelect', (point) => {
       const { dragAndDropAction } = this.context.draggable
@@ -156,8 +183,14 @@ class EventContainerWrapper extends React.Component {
       const bounds = getBoundsForNode(node)
       const { dragAndDropAction } = this.context.draggable
 
-      if (dragAndDropAction.action === 'move') this.handleMove(box, bounds)
-      if (dragAndDropAction.action === 'resize') this.handleResize(box, bounds)
+      if (dragAndDropAction.action === 'move') {
+        this.updateParentScroll(parent, node)
+        this.handleMove(box, bounds)
+      }
+      if (dragAndDropAction.action === 'resize') {
+        this.updateParentScroll(parent, node)
+        this.handleResize(box, bounds)
+      }
     })
 
     selector.on('dropFromOutside', (point) => {