[superset] branch master updated: [11907] Added detecting top scroll on Dashboard header (#12953)

[ju...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

junlin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 9733064  [11907] Added detecting top scroll on Dashboard header (#12953)
9733064 is described below

commit 973306461c23efff95ceb3ad1cbbe2815bd5da11
Author: Kasia Kucharczyk <25...@users.noreply.github.com>
AuthorDate: Thu Feb 4 22:22:16 2021 +0100

    [11907] Added detecting top scroll on Dashboard header (#12953)
---
 .../src/dashboard/components/dnd/handleHover.js    |  5 ++-
 .../dnd/{handleHover.js => handleScroll.ts}        | 41 +++++++++++-----------
 .../src/dashboard/util/getDropPosition.js          |  7 +++-
 3 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/dnd/handleHover.js b/superset-frontend/src/dashboard/components/dnd/handleHover.js
index 3eb20c1..789a5cc 100644
--- a/superset-frontend/src/dashboard/components/dnd/handleHover.js
+++ b/superset-frontend/src/dashboard/components/dnd/handleHover.js
@@ -18,6 +18,7 @@
  */
 import { throttle } from 'lodash';
 import getDropPosition from '../../util/getDropPosition';
+import handleScroll from './handleScroll';
 
 const HOVER_THROTTLE_MS = 100;
 
@@ -27,7 +28,9 @@ function handleHover(props, monitor, Component) {
 
   const dropPosition = getDropPosition(monitor, Component);
 
-  if (!dropPosition) {
+  handleScroll(dropPosition);
+
+  if (!dropPosition || dropPosition === 'SCROLL_TOP') {
     Component.setState(() => ({ dropIndicator: null }));
     return;
   }
diff --git a/superset-frontend/src/dashboard/components/dnd/handleHover.js b/superset-frontend/src/dashboard/components/dnd/handleScroll.ts
similarity index 53%
copy from superset-frontend/src/dashboard/components/dnd/handleHover.js
copy to superset-frontend/src/dashboard/components/dnd/handleScroll.ts
index 3eb20c1..66d801f 100644
--- a/superset-frontend/src/dashboard/components/dnd/handleHover.js
+++ b/superset-frontend/src/dashboard/components/dnd/handleScroll.ts
@@ -16,26 +16,27 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { throttle } from 'lodash';
-import getDropPosition from '../../util/getDropPosition';
+let scrollTopDashboardInterval: any;
+const SCROLL_STEP = 120;
+const INTERVAL_DELAY = 50;
 
-const HOVER_THROTTLE_MS = 100;
-
-function handleHover(props, monitor, Component) {
-  // this may happen due to throttling
-  if (!Component.mounted) return;
-
-  const dropPosition = getDropPosition(monitor, Component);
-
-  if (!dropPosition) {
-    Component.setState(() => ({ dropIndicator: null }));
-    return;
+export default function handleScroll(dropPosition: string) {
+  if (dropPosition === 'SCROLL_TOP') {
+    if (!scrollTopDashboardInterval) {
+      scrollTopDashboardInterval = setInterval(() => {
+        let scrollTop = document.documentElement.scrollTop - SCROLL_STEP;
+        if (scrollTop < 0) {
+          scrollTop = 0;
+        }
+        window.scroll({
+          top: scrollTop,
+          behavior: 'smooth',
+        });
+      }, INTERVAL_DELAY);
+    }
+  }
+  if (dropPosition !== 'SCROLL_TOP' && scrollTopDashboardInterval) {
+    clearInterval(scrollTopDashboardInterval);
+    scrollTopDashboardInterval = null;
   }
-
-  Component.setState(() => ({
-    dropIndicator: dropPosition,
-  }));
 }
-
-// this is called very frequently by react-dnd
-export default throttle(handleHover, HOVER_THROTTLE_MS);
diff --git a/superset-frontend/src/dashboard/util/getDropPosition.js b/superset-frontend/src/dashboard/util/getDropPosition.js
index 49c70dc..b2b2ec5 100644
--- a/superset-frontend/src/dashboard/util/getDropPosition.js
+++ b/superset-frontend/src/dashboard/util/getDropPosition.js
@@ -17,12 +17,13 @@
  * under the License.
  */
 import isValidChild from './isValidChild';
-import { TAB_TYPE, TABS_TYPE } from './componentTypes';
+import { DASHBOARD_ROOT_TYPE, TAB_TYPE, TABS_TYPE } from './componentTypes';
 
 export const DROP_TOP = 'DROP_TOP';
 export const DROP_RIGHT = 'DROP_RIGHT';
 export const DROP_BOTTOM = 'DROP_BOTTOM';
 export const DROP_LEFT = 'DROP_LEFT';
+export const SCROLL_TOP = 'SCROLL_TOP';
 
 // this defines how close the mouse must be to the edge of a component to display
 // a sibling type drop indicator
@@ -54,6 +55,10 @@ export default function getDropPosition(monitor, Component) {
     return null;
   }
 
+  if (component.type === DASHBOARD_ROOT_TYPE) {
+    return SCROLL_TOP;
+  }
+
   // TODO need a better solution to prevent nested tabs
   if (
     draggingItem.type === TABS_TYPE &&