Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-05 22:38:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Anotehr change

Browse source
This commit is contained in:
navaneeth 2021-09-23 16:11:43 +05:30
parent b60acb6cb4
commit 63a3649bff
2 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/Editor/BoxDragPreview.jsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useState, memo } from 'react';
export const BoxDragPreview = memo(function BoxDragPreview({ item, currentLayout }) {
export const BoxDragPreview = memo(function BoxDragPreview({ item, currentLayout, styles }) {
const [tickTock, setTickTock] = useState(false);
useEffect(
@ -26,7 +26,7 @@ export const BoxDragPreview = memo(function BoxDragPreview({ item, currentLayout
>
<div
style={{
background: '#438fd7',
background: styles?.backgroundColor,
opacity: '0.7',
height: '100%',
width: '100%',

18
frontend/src/Editor/CustomDragLayer.jsx
View file

@ -49,8 +49,14 @@ function getItemStyles(delta, item, initialOffset, currentOffset, currentLayout)
const transform = `translate(${x}px, ${y}px)`;
return {
transform,
WebkitTransform: transform,
parent: {
transform,
WebkitTransform: transform,
},
item: {
backgroundColor:
x < realCanvasDelta || x + item.layouts[currentLayout].width > realCanvasBoundingRect.right ? 'red' : '#438fd7',
},
};
}
export const CustomDragLayer = ({ currentLayout }) => {
@ -62,10 +68,10 @@ export const CustomDragLayer = ({ currentLayout }) => {
isDragging: monitor.isDragging(),
delta: monitor.getDifferenceFromInitialOffset(),
}));
function renderItem() {
function renderItem(styles) {
switch (itemType) {
case ItemTypes.BOX:
return <BoxDragPreview item={item} currentLayout={currentLayout} />;
return <BoxDragPreview item={item} currentLayout={currentLayout} styles={styles} />;
default:
return null;
}
@ -75,9 +81,11 @@ export const CustomDragLayer = ({ currentLayout }) => {
return null;
}
const boxStyles = getItemStyles(delta, item, initialOffset, currentOffset, currentLayout);
return (
<div style={layerStyles}>
<div style={getItemStyles(delta, item, initialOffset, currentOffset, currentLayout)}>{renderItem()}</div>
<div style={boxStyles['parent']}>{renderItem(boxStyles['item'])}</div>
</div>
);
};