pass the context directly to the buttons to avoid rerendering the pan…

…el. Only pass dragging to getDropProps
elastic · Feb 17, 2021 · 12df425 · 12df425
1 parent c39f882
commit 12df425
Show file tree

Hide file tree

Showing 8 changed files with 353 additions and 414 deletions.
diff --git a/...lens/public/editor_frame_service/editor_frame/config_panel/draggable_dimension_button.tsx b/...lens/public/editor_frame_service/editor_frame/config_panel/draggable_dimension_button.tsx
@@ -5,8 +5,9 @@
  * 2.0.
  */
 
-import React, { useMemo, useCallback } from 'react';
-import { DragDrop, DragDropIdentifier, DragContextState } from '../../../drag_drop';
+import React, { useMemo, useCallback, useContext } from 'react';
+import { DragDrop, DragDropIdentifier, DragContext } from '../../../drag_drop';
+
 import {
   Datasource,
   VisualizationDimensionGroupConfig,
@@ -41,12 +42,10 @@ export function DraggableDimensionButton({
   group,
   onDrop,
   children,
-  dragDropContext,
   layerDatasourceDropProps,
   layerDatasource,
   registerNewButtonRef,
 }: {
-  dragDropContext: DragContextState;
   layerId: string;
   groupIndex: number;
   layerIndex: number;
@@ -64,8 +63,11 @@ export function DraggableDimensionButton({
   columnId: string;
   registerNewButtonRef: (id: string, instance: HTMLDivElement | null) => void;
 }) {
+  const { dragging } = useContext(DragContext);
+
   const dropProps = layerDatasource.getDropProps({
     ...layerDatasourceDropProps,
+    dragging,
     columnId,
     filterOperations: group.filterOperations,
     groupId: group.groupId,
@@ -105,6 +107,13 @@ export function DraggableDimensionButton({
     columnId,
   ]);
 
+  /* 2 to leave room for data panel and workspace, then go by layer index, then by group index */
+  const order = useMemo(() => [2, layerIndex, groupIndex, accessorIndex], [
+    layerIndex,
+    groupIndex,
+    accessorIndex,
+  ]);
+
   return (
     <div
       ref={registerNewButtonRefMemoized}
@@ -114,9 +123,9 @@ export function DraggableDimensionButton({
       <DragDrop
         getAdditionalClassesOnEnter={getAdditionalClassesOnEnter}
         getAdditionalClassesOnDroppable={getAdditionalClassesOnDroppable}
-        order={[2, layerIndex, groupIndex, accessorIndex]}
+        order={order}
         draggable
-        dragType={isDraggedOperation(dragDropContext.dragging) ? 'move' : 'copy'}
+        dragType={isDraggedOperation(dragging) ? 'move' : 'copy'}
         dropType={dropType}
         reorderableGroup={reorderableGroup.length > 1 ? reorderableGroup : undefined}
         value={value}

diff --git a/...ins/lens/public/editor_frame_service/editor_frame/config_panel/empty_dimension_button.tsx b/...ins/lens/public/editor_frame_service/editor_frame/config_panel/empty_dimension_button.tsx
@@ -5,12 +5,13 @@
  * 2.0.
  */
 
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect, useContext } from 'react';
 import { EuiButtonEmpty } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { generateId } from '../../../id_generator';
-import { DragDrop, DragDropIdentifier } from '../../../drag_drop';
+import { DragDrop, DragDropIdentifier, DragContext } from '../../../drag_drop';
+
 import { Datasource, VisualizationDimensionGroupConfig, DropType } from '../../../types';
 import { LayerDatasourceDropProps } from './types';
 
@@ -47,6 +48,8 @@ export function EmptyDimensionButton({
   layerDatasource: Datasource<unknown, unknown>;
   layerDatasourceDropProps: LayerDatasourceDropProps;
 }) {
+  const { dragging } = useContext(DragContext);
+
   const itemIndex = group.accessors.length;
 
   const [newColumnId, setNewColumnId] = useState<string>(generateId());
@@ -56,6 +59,7 @@ export function EmptyDimensionButton({
 
   const dropProps = layerDatasource.getDropProps({
     ...layerDatasourceDropProps,
+    dragging,
     columnId: newColumnId,
     filterOperations: group.filterOperations,
     groupId: group.groupId,
@@ -81,13 +85,19 @@ export function EmptyDimensionButton({
     [dropType, newColumnId, group.groupId, layerId, group.groupLabel, itemIndex, nextLabel]
   );
 
+  /* 2 to leave room for data panel and workspace, then go by layer index, then by group index */
+  const order = useMemo(() => [2, layerIndex, groupIndex, itemIndex], [
+    layerIndex,
+    groupIndex,
+    itemIndex,
+  ]);
+
   return (
     <div className="lnsLayerPanel__dimensionContainer" data-test-subj={group.dataTestSubj}>
       <DragDrop
         getAdditionalClassesOnDroppable={getAdditionalClassesOnDroppable}
         value={value}
-        /* 2 to leave room for data panel and workspace, then go by layer index, then by group index */
-        order={[2, layerIndex, groupIndex, itemIndex]}
+        order={order}
         onDrop={(droppedItem, selectedDropType) => onDrop(droppedItem, value, selectedDropType)}
         dropType={dropType}
       >

diff --git a/...k/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/...k/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
@@ -464,19 +464,15 @@ describe('LayerPanel', () => {
 
       expect(mockDatasource.getDropProps).toHaveBeenCalledWith(
         expect.objectContaining({
-          dragDropContext: expect.objectContaining({
-            dragging: draggingField,
-          }),
+          dragging: draggingField,
         })
       );
 
       component.find('[data-test-subj="lnsGroup"] DragDrop .lnsDragDrop').first().simulate('drop');
 
       expect(mockDatasource.onDrop).toHaveBeenCalledWith(
         expect.objectContaining({
-          dragDropContext: expect.objectContaining({
-            dragging: draggingField,
-          }),
+          droppedItem: draggingField,
         })
       );
     });
@@ -582,9 +578,7 @@ describe('LayerPanel', () => {
 
       expect(mockDatasource.getDropProps).toHaveBeenCalledWith(
         expect.objectContaining({
-          dragDropContext: expect.objectContaining({
-            dragging: draggingOperation,
-          }),
+          dragging: draggingOperation,
         })
       );
 
@@ -593,9 +587,7 @@ describe('LayerPanel', () => {
       expect(mockDatasource.onDrop).toHaveBeenCalledWith(
         expect.objectContaining({
           columnId: 'b',
-          dragDropContext: expect.objectContaining({
-            dragging: draggingOperation,
-          }),
+          droppedItem: draggingOperation,
         })
       );
 
@@ -604,9 +596,7 @@ describe('LayerPanel', () => {
       expect(mockDatasource.onDrop).toHaveBeenCalledWith(
         expect.objectContaining({
           columnId: 'newid',
-          dragDropContext: expect.objectContaining({
-            dragging: draggingOperation,
-          }),
+          droppedItem: draggingOperation,
         })
       );
     });