NB styling fix!!

Due to a parent's setting of overflow: hidden the drag and drop tree had a dead zone that would equal the page overflow limit, unsetting on the component itself (overflow: auto) relaxes this limitation.
elastic · May 4, 2020 · f70165c · f70165c
1 parent b05e356
commit f70165c
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 40 deletions.
diff --git a/...omponents/pipeline_processors_editor/components/drag_and_drop_tree/drag_and_drop_tree.tsx b/...omponents/pipeline_processors_editor/components/drag_and_drop_tree/drag_and_drop_tree.tsx
@@ -13,6 +13,8 @@ import { resolveDestinationLocation, mapSelectorToDragLocation } from './utils';
 
 import { TreeNode, TreeNodeComponentArgs } from './tree_node';
 
+import './drag_and_drop_tree_fix.scss';
+
 interface OnDragEndArgs {
   source: DraggableLocation;
   destination: DraggableLocation;
@@ -75,46 +77,48 @@ export const DragAndDropTreeUI: FunctionComponent<Props> = ({
   addRenderedItems(processors, [], 0);
 
   return (
-    <EuiDragDropContext
-      onBeforeCapture={({ draggableId: serializedSelector }) => {
-        setCurrentDragSelector(serializedSelector);
-      }}
-      onDragEnd={arg => {
-        setCurrentDragSelector(undefined);
-
-        const { source, destination, combine } = arg;
-        if (source && combine) {
-          const [sourceSelector] = items[source.index];
-          const destinationSelector = combine.draggableId.split('.');
-          onDragEnd({
-            source: {
-              index: parseInt(sourceSelector[sourceSelector.length - 1], 10),
-              selector: sourceSelector.slice(0, -1),
-            },
-            destination: {
-              index: parseInt(destinationSelector[destinationSelector.length - 1], 10),
-              selector: destinationSelector.concat(ON_FAILURE),
-            },
-          });
-          return;
-        }
-
-        if (source && destination) {
-          const [sourceSelector] = items[source.index];
-          onDragEnd({
-            source: mapSelectorToDragLocation(sourceSelector),
-            destination: resolveDestinationLocation(
-              items.map(([selector]) => selector),
-              destination.index
-            ),
-          });
-        }
-      }}
-    >
-      <EuiDroppable droppableId="PIPELINE_PROCESSORS_EDITOR" spacing="l" isCombineEnabled>
-        {items.map(([, component]) => component)}
-      </EuiDroppable>
-    </EuiDragDropContext>
+    <div className="pipelineProcessorsEditor__dragAndDropTreeFixes">
+      <EuiDragDropContext
+        onBeforeCapture={({ draggableId: serializedSelector }) => {
+          setCurrentDragSelector(serializedSelector);
+        }}
+        onDragEnd={arg => {
+          setCurrentDragSelector(undefined);
+
+          const { source, destination, combine } = arg;
+          if (source && combine) {
+            const [sourceSelector] = items[source.index];
+            const destinationSelector = combine.draggableId.split('.');
+            onDragEnd({
+              source: {
+                index: parseInt(sourceSelector[sourceSelector.length - 1], 10),
+                selector: sourceSelector.slice(0, -1),
+              },
+              destination: {
+                index: parseInt(destinationSelector[destinationSelector.length - 1], 10),
+                selector: destinationSelector.concat(ON_FAILURE),
+              },
+            });
+            return;
+          }
+
+          if (source && destination) {
+            const [sourceSelector] = items[source.index];
+            onDragEnd({
+              source: mapSelectorToDragLocation(sourceSelector),
+              destination: resolveDestinationLocation(
+                items.map(([selector]) => selector),
+                destination.index
+              ),
+            });
+          }
+        }}
+      >
+        <EuiDroppable droppableId="PIPELINE_PROCESSORS_EDITOR" spacing="l" isCombineEnabled>
+          {items.map(([, component]) => component)}
+        </EuiDroppable>
+      </EuiDragDropContext>
+    </div>
   );
 };
 

diff --git a/...ents/pipeline_processors_editor/components/drag_and_drop_tree/drag_and_drop_tree_fix.scss b/...ents/pipeline_processors_editor/components/drag_and_drop_tree/drag_and_drop_tree_fix.scss
@@ -0,0 +1,7 @@
+
+.pipelineProcessorsEditor__dragAndDropTreeFixes {
+  // This relaxes limitations imposed by any parents
+  // that can lead to the bottom area of the droppable zone
+  // being dead (only tested on chrome).
+  overflow: auto;
+}