From f4d41991834d0b3b24400d870d98a173de7789db Mon Sep 17 00:00:00 2001
From: haojin111 <63215848+haojin111@users.noreply.github.com>
Date: Mon, 9 Aug 2021 20:51:13 +0800
Subject: [PATCH] fixed issue where the resize cursor did not appear on the
 left hand side of the widget (#6380)

---
 .../ResizeStyledComponents.tsx                |  2 +-
 app/client/src/resizable/index.tsx            | 85 +++++++++----------
 2 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/app/client/src/components/editorComponents/ResizeStyledComponents.tsx b/app/client/src/components/editorComponents/ResizeStyledComponents.tsx
index 055423c519..f93e95ff17 100644
--- a/app/client/src/components/editorComponents/ResizeStyledComponents.tsx
+++ b/app/client/src/components/editorComponents/ResizeStyledComponents.tsx
@@ -106,7 +106,7 @@ export const TopLeftHandleStyles = styled.div`
   ${CornerHandleStyles};
   left: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px;
   top: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px;
-  cursor: ew-resize;
+  cursor: nw-resize;
 `;
 export const TopRightHandleStyles = styled.div`
   ${CornerHandleStyles};
diff --git a/app/client/src/resizable/index.tsx b/app/client/src/resizable/index.tsx
index 0647b0e5dd..fbfee92325 100644
--- a/app/client/src/resizable/index.tsx
+++ b/app/client/src/resizable/index.tsx
@@ -156,6 +156,20 @@ export const Resizable = forwardRef(function Resizable(
     });
   }
 
+  if (props.handles.top) {
+    handles.push({
+      dragCallback: (x: number, y: number) => {
+        setNewDimensions({
+          width: newDimensions.width,
+          height: props.componentHeight - y,
+          y: y,
+          x: newDimensions.x,
+        });
+      },
+      component: props.handles.top,
+    });
+  }
+
   if (props.handles.right) {
     handles.push({
       dragCallback: (x: number) => {
@@ -184,6 +198,34 @@ export const Resizable = forwardRef(function Resizable(
     });
   }
 
+  if (props.handles.topLeft) {
+    handles.push({
+      dragCallback: (x: number, y: number) => {
+        setNewDimensions({
+          width: props.componentWidth - x,
+          height: props.componentHeight - y,
+          x: x,
+          y: y,
+        });
+      },
+      component: props.handles.topLeft,
+    });
+  }
+
+  if (props.handles.topRight) {
+    handles.push({
+      dragCallback: (x: number, y: number) => {
+        setNewDimensions({
+          width: props.componentWidth + x,
+          height: props.componentHeight - y,
+          x: newDimensions.x,
+          y: y,
+        });
+      },
+      component: props.handles.topRight,
+    });
+  }
+
   if (props.handles.bottomRight) {
     handles.push({
       dragCallback: (x: number, y: number) => {
@@ -211,49 +253,6 @@ export const Resizable = forwardRef(function Resizable(
       component: props.handles.bottomLeft,
     });
   }
-
-  if (props.handles.topRight) {
-    handles.push({
-      dragCallback: (x: number, y: number) => {
-        setNewDimensions({
-          width: props.componentWidth + x,
-          height: props.componentHeight - y,
-          x: newDimensions.x,
-          y: y,
-        });
-      },
-      component: props.handles.topRight,
-    });
-  }
-
-  if (props.handles.topLeft) {
-    handles.push({
-      dragCallback: (x: number, y: number) => {
-        setNewDimensions({
-          width: props.componentWidth - x,
-          height: props.componentHeight - y,
-          x: x,
-          y: y,
-        });
-      },
-      component: props.handles.topLeft,
-    });
-  }
-
-  if (props.handles.top) {
-    handles.push({
-      dragCallback: (x: number, y: number) => {
-        setNewDimensions({
-          width: newDimensions.width,
-          height: props.componentHeight - y,
-          y: y,
-          x: newDimensions.x,
-        });
-      },
-      component: props.handles.top,
-    });
-  }
-
   const onResizeStop = () => {
     togglePointerEvents(true);
     props.onStop(