Replace drag over class name with conventional ones (#9059) (#9076)

Generate drop target style names on every dragenter to make sure they match the primary style name.

Fixes #9058

client/src/main/java/com/vaadin/client/connectors/grid/GridDropTargetConnector.java

@@ -49,22 +49,30 @@ import elemental.json.JsonObject;
 public class GridDropTargetConnector extends
         DropTargetExtensionConnector {
 
-    // Drag over class name suffixes
-    private final static String CLASS_SUFFIX_BEFORE = "-before";
-    private final static String CLASS_SUFFIX_AFTER = "-after";
+    /**
+     * Current style name
+     */
+    private String currentStyleName;
 
-    // Drag over class names
-    private final static String CLASS_DRAG_OVER_BEFORE =
-            CLASS_DRAG_OVER + CLASS_SUFFIX_BEFORE;
-    private final static String CLASS_DRAG_OVER_AFTER =
-            CLASS_DRAG_OVER + CLASS_SUFFIX_AFTER;
+    private GridConnector gridConnector;
 
     /**
-     * Current drag over class name
+     * Class name to apply when an element is dragged over a row and the
+     * location is {@link DropLocation#ON_TOP}.
      */
-    private String dragOverClassName;
+    private String styleDragCenter;
 
-    private GridConnector gridConnector;
+    /**
+     * Class name to apply when an element is dragged over a row and the
+     * location is {@link DropLocation#ABOVE}.
+     */
+    private String styleDragTop;
+
+    /**
+     * Class name to apply when an element is dragged over a row and the
+     * location is {@link DropLocation#BELOW}.
+     */
+    private String styleDragBottom;
 
     @Override
     protected void extend(ServerConnector target) {
@@ -118,6 +126,18 @@ public class GridDropTargetConnector extends
         return WidgetUtil.getTouchOrMouseClientY(event) - relativeTop;
     }
 
+    @Override
+    protected void onDragEnter(Event event) {
+        // Generate style names for the drop target
+        String styleRow =
+                gridConnector.getWidget().getStylePrimaryName() + "-row";
+        styleDragCenter = styleRow + STYLE_SUFFIX_DRAG_CENTER;
+        styleDragTop = styleRow + STYLE_SUFFIX_DRAG_TOP;
+        styleDragBottom = styleRow + STYLE_SUFFIX_DRAG_BOTTOM;
+
+        super.onDragEnter(event);
+    }
+
     @Override
     protected void setTargetIndicator(Event event) {
         getTargetRow(((Element) event.getTarget())).ifPresent(target -> {
@@ -127,42 +147,42 @@ public class GridDropTargetConnector extends
 
             // Add or replace class name if changed
             if (!target.hasClassName(className)) {
-                if (dragOverClassName != null) {
-                    target.removeClassName(dragOverClassName);
+                if (currentStyleName != null) {
+                    target.removeClassName(currentStyleName);
                 }
                 target.addClassName(className);
-                dragOverClassName = className;
+                currentStyleName = className;
             }
         });
     }
 
     private String getTargetClassName(Element target, NativeEvent event) {
-        String classSuffix;
+        String className;
 
         switch (getDropLocation(target, event)) {
         case ABOVE:
-            classSuffix = CLASS_SUFFIX_BEFORE;
+            className = styleDragTop;
             break;
         case BELOW:
-            classSuffix = CLASS_SUFFIX_AFTER;
+            className = styleDragBottom;
             break;
         case ON_TOP:
         default:
-            classSuffix = "";
+            className = styleDragCenter;
             break;
         }
 
-        return CLASS_DRAG_OVER + classSuffix;
+        return className;
     }
 
     @Override
     protected void removeTargetIndicator(Event event) {
 
-        // Remove all possible drag over class names
+        // Remove all possible style names
         getTargetRow((Element) event.getTarget()).ifPresent(e -> {
-            e.removeClassName(CLASS_DRAG_OVER);
-            e.removeClassName(CLASS_DRAG_OVER_BEFORE);
-            e.removeClassName(CLASS_DRAG_OVER_AFTER);
+            e.removeClassName(styleDragCenter);
+            e.removeClassName(styleDragTop);
+            e.removeClassName(styleDragBottom);
         });
     }
 

client/src/main/java/com/vaadin/client/extensions/DropTargetExtensionConnector.java

@@ -41,7 +41,21 @@ import elemental.events.EventTarget;
 @Connect(DropTargetExtension.class)
 public class DropTargetExtensionConnector extends AbstractExtensionConnector {
 
-    protected static final String CLASS_DRAG_OVER = "v-drag-over";
+    /**
+     * Style name suffix for dragging data over the center of the drop target.
+     */
+    protected static final String STYLE_SUFFIX_DRAG_CENTER = "-drag-center";
+
+    /**
+     * Style name suffix for dragging data over the top part of the drop target.
+     */
+    protected static final String STYLE_SUFFIX_DRAG_TOP = "-drag-top";
+
+    /**
+     * Style name suffix for dragging data over the bottom part of the drop
+     * target.
+     */
+    protected static final String STYLE_SUFFIX_DRAG_BOTTOM = "-drag-bottom";
 
     // Create event listeners
     private final EventListener dragEnterListener = this::onDragEnter;
@@ -54,6 +68,12 @@ public class DropTargetExtensionConnector extends AbstractExtensionConnector {
      */
     private Widget dropTargetWidget;
 
+    /**
+     * Class name to apply when an element is dragged over the center of the
+     * target.
+     */
+    private String styleDragCenter;
+
     @Override
     protected void extend(ServerConnector target) {
         dropTargetWidget = ((ComponentConnector) target).getWidget();
@@ -117,6 +137,10 @@ public class DropTargetExtensionConnector extends AbstractExtensionConnector {
      *         browser event to be handled
      */
     protected void onDragEnter(Event event) {
+        // Generate style name for drop target
+        styleDragCenter = dropTargetWidget.getStylePrimaryName()
+                + STYLE_SUFFIX_DRAG_CENTER;
+
         setTargetIndicator(event);
     }
 
@@ -231,7 +255,7 @@ public class DropTargetExtensionConnector extends AbstractExtensionConnector {
      *         The drag enter or dragover event that triggered the indication.
      */
     protected void setTargetIndicator(Event event) {
-        getDropTargetElement().addClassName(CLASS_DRAG_OVER);
+        getDropTargetElement().addClassName(styleDragCenter);
     }
 
     /**
@@ -243,7 +267,7 @@ public class DropTargetExtensionConnector extends AbstractExtensionConnector {
      *         the event that triggered the removal of the indicator
      */
     protected void removeTargetIndicator(Event event) {
-        getDropTargetElement().removeClassName(CLASS_DRAG_OVER);
+        getDropTargetElement().removeClassName(styleDragCenter);
     }
 
     private native boolean executeScript(NativeEvent event, String script)/*-{