Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 08:58:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

BugFix: Disable drag while column resizing is active

Browse source
This commit is contained in:
navaneeth 2021-04-21 12:51:26 +05:30
parent a3cf5114aa
commit ec757ec154
3 changed files with 18 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/Editor/Box.jsx
View file

@ -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>

16
frontend/src/Editor/Components/Table.jsx
View file

@ -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' : ''

8
frontend/src/Editor/DraggableBox.jsx
View file

@ -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}