From ec757ec154f1d3c3a069134057ec55e04fbbdc38 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Wed, 21 Apr 2021 12:51:26 +0530
Subject: [PATCH] BugFix: Disable drag while column resizing is active

---
 frontend/src/Editor/Box.jsx              |  3 ++-
 frontend/src/Editor/Components/Table.jsx | 16 +++++++++-------
 frontend/src/Editor/DraggableBox.jsx     |  8 +++++++-
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/Editor/Box.jsx b/frontend/src/Editor/Box.jsx
index ead57e2eee..e841dccfc4 100644
--- a/frontend/src/Editor/Box.jsx
+++ b/frontend/src/Editor/Box.jsx
@@ -30,7 +30,7 @@ const AllComponents = {
 }
 
 
-export const Box = function Box({ id, mode, width, height, yellow, preview, component, inCanvas, onComponentClick, onEvent, currentState, onComponentOptionChanged, paramUpdated }) {
+export const Box = function Box({ id, mode, width, height, yellow, preview, component, inCanvas, onComponentClick, onEvent, currentState, onComponentOptionChanged, paramUpdated, changeCanDrag }) {
     const backgroundColor = yellow ? 'yellow' : '';
 
     let styles = {
@@ -59,6 +59,7 @@ export const Box = function Box({ id, mode, width, height, yellow, preview, comp
                     id={id}
                     paramUpdated={paramUpdated}
                     width={width}
+                    changeCanDrag={changeCanDrag}
                     height={height}
                     component={component}>
                 </ComponentToRender>
diff --git a/frontend/src/Editor/Components/Table.jsx b/frontend/src/Editor/Components/Table.jsx
index 409e9e9611..ed8f363b4e 100644
--- a/frontend/src/Editor/Components/Table.jsx
+++ b/frontend/src/Editor/Components/Table.jsx
@@ -12,7 +12,7 @@ import {
 import { resolve, resolve_references } from '@/_helpers/utils';
 import Skeleton from 'react-loading-skeleton';
 
-export function Table({ id, width, height, component, onComponentClick, currentState, onEvent, paramUpdated }) {
+export function Table({ id, width, height, component, onComponentClick, currentState, onEvent, paramUpdated, changeCanDrag }) {
 
 	const color = component.definition.styles.textColor.value;
 	const actions = component.definition.properties.actions || { value: []};
@@ -71,7 +71,7 @@ export function Table({ id, width, height, component, onComponentClick, currentS
 					style={{background: action.backgroundColor, color: action.textColor}}
 					onClick={(e) => { e.stopPropagation(); onEvent('onTableActionButtonClicked', { component, data: cell.row.original, action }); }}
 				>
-						{action.buttonText}
+					{action.buttonText}
 				</button>
 			)
 		}
@@ -132,7 +132,10 @@ export function Table({ id, width, height, component, onComponentClick, currentS
 	
 	useEffect(() => {
 		if(!state.columnResizing.isResizingColumn) {
+			changeCanDrag(true);
 			paramUpdated(id, 'columnSizes', state.columnResizing.columnWidths);
+		} else {
+			changeCanDrag(false);
 		}
 	}, [state.columnResizing]);
 
@@ -165,8 +168,7 @@ export function Table({ id, width, height, component, onComponentClick, currentS
 		)
 	}
 
-
-      return (
+    return (
 		<div className="card" style={{width: `${width + 16}px`, height: `${height+3}px`}} onClick={() => onComponentClick(id, component) }>
 		<div className="card-body border-bottom py-3 jet-data-table-header">
 		  <div className="d-flex">
@@ -209,9 +211,9 @@ export function Table({ id, width, height, component, onComponentClick, currentS
 		<table {...getTableProps()} className="table table-vcenter table-nowrap table-bordered" style={computedStyles}>
 			<thead>
 				{headerGroups.map(headerGroup => (
-				<tr {...headerGroup.getHeaderGroupProps()} tabIndex="0" className="tr">
+				<tr {...headerGroup.getHeaderGroupProps()} tabIndex="0" className="tr" onDragEnd={(e) => { alert('ss'); e.preventDefault(); e.stopPropagation(); } }>
 					{headerGroup.headers.map(column => (
-					<th className="th"
+					<th className="th" onDragEnd={(e) => { alert('ss'); e.preventDefault(); e.stopPropagation(); }}
 						{...column.getHeaderProps(column.getSortByToggleProps())}
 						className={
 							column.isSorted
@@ -222,7 +224,7 @@ export function Table({ id, width, height, component, onComponentClick, currentS
 						}
 					>
 						{column.render("Header")}
-						<div
+						<div draggable="true" onDragEnd={(e) => { alert('ss'); e.preventDefault(); e.stopPropagation(); } }
 							{...column.getResizerProps()}
 							className={`resizer ${
 								column.isResizing ? 'isResizing' : ''
diff --git a/frontend/src/Editor/DraggableBox.jsx b/frontend/src/Editor/DraggableBox.jsx
index 47ada8a64f..a754735369 100644
--- a/frontend/src/Editor/DraggableBox.jsx
+++ b/frontend/src/Editor/DraggableBox.jsx
@@ -35,6 +35,7 @@ function getStyles(left, top, isDragging) {
 export const DraggableBox = function DraggableBox({ id, mode, title, left, top, width, height, component, index, inCanvas, onEvent, onComponentClick, currentState, onComponentOptionChanged, onResizeStop, paramUpdated  }) {
 
     const [isResizing, setResizing] = useState(false);
+    const [canDrag, setCanDrag] = useState(true);
 
     // useEffect(() => {
     //     setBoxes(component);
@@ -63,12 +64,16 @@ export const DraggableBox = function DraggableBox({ id, mode, title, left, top,
 
     let refProps = {};
 
-    if( mode === "edit") {
+    if( mode === "edit" && canDrag ) {
         refProps = {
             ref: drag
         }
     }
 
+    function changeCanDrag(newState) {
+        setCanDrag(newState);
+    }
+
     return (
         <div>
             {inCanvas ?
@@ -94,6 +99,7 @@ export const DraggableBox = function DraggableBox({ id, mode, title, left, top,
                                 width={width}
                                 mode={mode}
                                 height={height}
+                                changeCanDrag={changeCanDrag}
                                 inCanvas={inCanvas} 
                                 paramUpdated={paramUpdated}
                                 onEvent={onEvent}