Fix: revert color change (#21161)
## Description Revert an unwanted color change. ## Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag
This commit is contained in:
Preet Sidhu
GitHub
parent
e31f4b875c
commit
6fb1136f02
|
|
@ -1,188 +0,0 @@
|
||||||
import { Colors } from "constants/Colors";
|
|
||||||
import { invisible } from "constants/DefaultTheme";
|
|
||||||
import { WIDGET_PADDING } from "constants/WidgetConstants";
|
|
||||||
import styled, { css } from "styled-components";
|
|
||||||
|
|
||||||
const EDGE_RESIZE_HANDLE_WIDTH = 12;
|
|
||||||
const CORNER_RESIZE_HANDLE_WIDTH = 10;
|
|
||||||
|
|
||||||
export const VisibilityContainer = styled.div<{
|
|
||||||
visible: boolean;
|
|
||||||
padding: number;
|
|
||||||
reduceOpacity: boolean;
|
|
||||||
}>`
|
|
||||||
${(props) => (!props.visible ? invisible : "")}
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
${({ reduceOpacity }) =>
|
|
||||||
reduceOpacity &&
|
|
||||||
css`
|
|
||||||
opacity: 0.25;
|
|
||||||
`}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const VerticalResizeIndicators = css<{
|
|
||||||
showLightBorder: boolean;
|
|
||||||
isHovered: boolean;
|
|
||||||
}>`
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
width: 7px;
|
|
||||||
height: 16px;
|
|
||||||
border-radius: 50%/16%;
|
|
||||||
background: ${Colors.GREY_1};
|
|
||||||
top: calc(50% - 8px);
|
|
||||||
left: calc(50% - 2.5px);
|
|
||||||
border: ${(props) => {
|
|
||||||
return `1px solid ${props.isHovered ? Colors.WATUSI : "#F86A2B"}`;
|
|
||||||
}};
|
|
||||||
outline: 1px solid ${Colors.GREY_1};
|
|
||||||
}
|
|
||||||
&:hover::after {
|
|
||||||
background: #f86a2b;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const HorizontalResizeIndicators = css<{
|
|
||||||
showLightBorder: boolean;
|
|
||||||
isHovered: boolean;
|
|
||||||
}>`
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
width: 16px;
|
|
||||||
height: 7px;
|
|
||||||
border-radius: 16%/50%;
|
|
||||||
border: ${(props) => {
|
|
||||||
return `1px solid ${props.isHovered ? Colors.WATUSI : "#F86A2B"}`;
|
|
||||||
}};
|
|
||||||
background: ${Colors.GREY_1};
|
|
||||||
top: calc(50% - 2.5px);
|
|
||||||
left: calc(50% - 8px);
|
|
||||||
outline: 1px solid ${Colors.GREY_1};
|
|
||||||
}
|
|
||||||
&:hover::after {
|
|
||||||
background: #f86a2b;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const EdgeHandleStyles = css<{
|
|
||||||
showAsBorder: boolean;
|
|
||||||
showLightBorder: boolean;
|
|
||||||
disableDot: boolean;
|
|
||||||
isHovered: boolean;
|
|
||||||
}>`
|
|
||||||
position: absolute;
|
|
||||||
width: ${EDGE_RESIZE_HANDLE_WIDTH}px;
|
|
||||||
height: ${EDGE_RESIZE_HANDLE_WIDTH}px;
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
background: "transparent";
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const VerticalHandleStyles = css<{
|
|
||||||
showAsBorder: boolean;
|
|
||||||
showLightBorder: boolean;
|
|
||||||
disableDot: boolean;
|
|
||||||
isHovered: boolean;
|
|
||||||
}>`
|
|
||||||
${EdgeHandleStyles}
|
|
||||||
${(props) =>
|
|
||||||
props.showAsBorder || props.disableDot ? "" : VerticalResizeIndicators}
|
|
||||||
top:${~(WIDGET_PADDING - 1) + 1}px;
|
|
||||||
height: calc(100% + ${2 * WIDGET_PADDING - 1}px);
|
|
||||||
${(props) =>
|
|
||||||
props.showAsBorder || props.disableDot ? "" : "cursor: col-resize;"}
|
|
||||||
&:before {
|
|
||||||
left: 50%;
|
|
||||||
bottom: 0px;
|
|
||||||
top: 0;
|
|
||||||
width: 1px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const HorizontalHandleStyles = css<{
|
|
||||||
showAsBorder: boolean;
|
|
||||||
showLightBorder: boolean;
|
|
||||||
disableDot: boolean;
|
|
||||||
isHovered: boolean;
|
|
||||||
}>`
|
|
||||||
${EdgeHandleStyles}
|
|
||||||
${(props) =>
|
|
||||||
props.showAsBorder || props.disableDot ? "" : HorizontalResizeIndicators}
|
|
||||||
left: ${~WIDGET_PADDING + 1}px;
|
|
||||||
width: calc(100% + ${2 * WIDGET_PADDING}px);
|
|
||||||
${(props) =>
|
|
||||||
props.showAsBorder || props.disableDot ? "" : "cursor: row-resize;"}
|
|
||||||
&:before {
|
|
||||||
top: 50%;
|
|
||||||
right: 0px;
|
|
||||||
left: 0px;
|
|
||||||
height: 1px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const LeftHandleStyles = styled.div`
|
|
||||||
${VerticalHandleStyles}
|
|
||||||
left: ${-EDGE_RESIZE_HANDLE_WIDTH / 2 - WIDGET_PADDING + 1}px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const RightHandleStyles = styled.div`
|
|
||||||
${VerticalHandleStyles};
|
|
||||||
right: ${-EDGE_RESIZE_HANDLE_WIDTH / 2 - WIDGET_PADDING + 3}px;
|
|
||||||
height: calc(100% + ${2 * WIDGET_PADDING}px);
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const TopHandleStyles = styled.div`
|
|
||||||
${HorizontalHandleStyles};
|
|
||||||
top: ${-EDGE_RESIZE_HANDLE_WIDTH / 2 - WIDGET_PADDING + 1}px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const BottomHandleStyles = styled.div`
|
|
||||||
${HorizontalHandleStyles};
|
|
||||||
bottom: ${-EDGE_RESIZE_HANDLE_WIDTH / 2 - WIDGET_PADDING + 3}px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const CornerHandleStyles = css`
|
|
||||||
position: absolute;
|
|
||||||
z-index: 3;
|
|
||||||
width: ${CORNER_RESIZE_HANDLE_WIDTH}px;
|
|
||||||
height: ${CORNER_RESIZE_HANDLE_WIDTH}px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const BottomRightHandleStyles = styled.div<{
|
|
||||||
showAsBorder: boolean;
|
|
||||||
}>`
|
|
||||||
${CornerHandleStyles};
|
|
||||||
bottom: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px;
|
|
||||||
right: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px;
|
|
||||||
${(props) => (!props.showAsBorder ? "cursor: se-resize;" : "")}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const BottomLeftHandleStyles = styled.div<{
|
|
||||||
showAsBorder: boolean;
|
|
||||||
}>`
|
|
||||||
${CornerHandleStyles};
|
|
||||||
left: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px;
|
|
||||||
bottom: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px;
|
|
||||||
${(props) => (!props.showAsBorder ? "cursor: sw-resize;" : "")}
|
|
||||||
`;
|
|
||||||
export const TopLeftHandleStyles = styled.div<{
|
|
||||||
showAsBorder: boolean;
|
|
||||||
}>`
|
|
||||||
${CornerHandleStyles};
|
|
||||||
left: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px;
|
|
||||||
top: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px;
|
|
||||||
${(props) => (!props.showAsBorder ? "cursor: nw-resize;" : "")}
|
|
||||||
`;
|
|
||||||
export const TopRightHandleStyles = styled.div<{
|
|
||||||
showAsBorder: boolean;
|
|
||||||
}>`
|
|
||||||
${CornerHandleStyles};
|
|
||||||
right: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px;
|
|
||||||
top: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px;
|
|
||||||
${(props) => (!props.showAsBorder ? "cursor: ne-resize;" : "")}
|
|
||||||
`;
|
|
||||||
|
|
@ -69,13 +69,12 @@ export const Colors = {
|
||||||
BUTTER_CUP: "#F7AF22",
|
BUTTER_CUP: "#F7AF22",
|
||||||
BLUE_CHARCOAL: "#23292E",
|
BLUE_CHARCOAL: "#23292E",
|
||||||
TROUT: "#4C565E",
|
TROUT: "#4C565E",
|
||||||
JAFFA_DARK: "#F86A2B",
|
JAFFA_DARK: "#EF7541",
|
||||||
BURNING_ORANGE: "#FF7742",
|
BURNING_ORANGE: "#FF7742",
|
||||||
TIA_MARIA: "#CB4810",
|
TIA_MARIA: "#CB4810",
|
||||||
SOLID_MERCURY: "#E5E5E5",
|
SOLID_MERCURY: "#E5E5E5",
|
||||||
TROUT_DARK: "#535B62",
|
TROUT_DARK: "#535B62",
|
||||||
ALABASTER: "#F9F8F8",
|
ALABASTER: "#F9F8F8",
|
||||||
// WATUSI: "#FF9B4E",
|
|
||||||
WATUSI: "#FFE0D2",
|
WATUSI: "#FFE0D2",
|
||||||
GRAY: "#858282",
|
GRAY: "#858282",
|
||||||
GRAY2: "#939090",
|
GRAY2: "#939090",
|
||||||
|
|
|
||||||
|
|
@ -1,352 +0,0 @@
|
||||||
import { isHandleResizeAllowed } from "components/editorComponents/ResizableUtils";
|
|
||||||
import React, { ReactNode, useEffect, useState } from "react";
|
|
||||||
import { Spring } from "react-spring";
|
|
||||||
import { useDrag } from "react-use-gesture";
|
|
||||||
import { ReflowDirection } from "reflow/reflowTypes";
|
|
||||||
import { ResizeWrapper } from "resizable/resizenreflow";
|
|
||||||
import { StyledComponent } from "styled-components";
|
|
||||||
import PerformanceTracker, {
|
|
||||||
PerformanceTransactionName,
|
|
||||||
} from "utils/PerformanceTracker";
|
|
||||||
|
|
||||||
const getSnappedValues = (
|
|
||||||
x: number,
|
|
||||||
y: number,
|
|
||||||
snapGrid: { x: number; y: number },
|
|
||||||
) => {
|
|
||||||
return {
|
|
||||||
x: Math.round(x / snapGrid.x) * snapGrid.x,
|
|
||||||
y: Math.round(y / snapGrid.y) * snapGrid.y,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
type ResizableHandleProps = {
|
|
||||||
allowResize: boolean;
|
|
||||||
showLightBorder?: boolean;
|
|
||||||
isHovered: boolean;
|
|
||||||
disableDot: boolean;
|
|
||||||
dragCallback: (x: number, y: number) => void;
|
|
||||||
component: StyledComponent<"div", Record<string, unknown>>;
|
|
||||||
onStart: () => void;
|
|
||||||
onStop: () => void;
|
|
||||||
snapGrid: {
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
function ResizableHandle(props: ResizableHandleProps) {
|
|
||||||
const bind = useDrag(
|
|
||||||
({ first, last, dragging, movement: [mx, my], memo }) => {
|
|
||||||
if (!props.allowResize) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const snapped = getSnappedValues(mx, my, props.snapGrid);
|
|
||||||
if (dragging && memo && (snapped.x !== memo.x || snapped.y !== memo.y)) {
|
|
||||||
props.dragCallback(snapped.x, snapped.y);
|
|
||||||
}
|
|
||||||
if (first) {
|
|
||||||
props.onStart();
|
|
||||||
}
|
|
||||||
if (last) {
|
|
||||||
props.onStop();
|
|
||||||
}
|
|
||||||
return snapped;
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const propsToPass = {
|
|
||||||
...bind(),
|
|
||||||
showAsBorder: !props.allowResize,
|
|
||||||
disableDot: props.disableDot,
|
|
||||||
isHovered: props.isHovered,
|
|
||||||
};
|
|
||||||
|
|
||||||
return <props.component {...propsToPass} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
type ResizableProps = {
|
|
||||||
allowResize: boolean;
|
|
||||||
handles: {
|
|
||||||
left?: StyledComponent<"div", Record<string, unknown>>;
|
|
||||||
top?: StyledComponent<"div", Record<string, unknown>>;
|
|
||||||
bottom?: StyledComponent<"div", Record<string, unknown>>;
|
|
||||||
right?: StyledComponent<"div", Record<string, unknown>>;
|
|
||||||
bottomRight?: StyledComponent<"div", Record<string, unknown>>;
|
|
||||||
topLeft?: StyledComponent<"div", Record<string, unknown>>;
|
|
||||||
topRight?: StyledComponent<"div", Record<string, unknown>>;
|
|
||||||
bottomLeft?: StyledComponent<"div", Record<string, unknown>>;
|
|
||||||
};
|
|
||||||
componentWidth: number;
|
|
||||||
componentHeight: number;
|
|
||||||
children: ReactNode;
|
|
||||||
onStart: () => void;
|
|
||||||
onStop: (
|
|
||||||
size: { width: number; height: number },
|
|
||||||
position: { x: number; y: number },
|
|
||||||
) => void;
|
|
||||||
snapGrid: { x: number; y: number };
|
|
||||||
enableVerticalResize: boolean;
|
|
||||||
enableHorizontalResize: boolean;
|
|
||||||
isColliding: (
|
|
||||||
size: { width: number; height: number },
|
|
||||||
position: { x: number; y: number },
|
|
||||||
) => boolean;
|
|
||||||
className?: string;
|
|
||||||
resizeDualSides?: boolean;
|
|
||||||
widgetId: string;
|
|
||||||
showLightBorder?: boolean;
|
|
||||||
zWidgetType?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Resizable = function Resizable(props: ResizableProps) {
|
|
||||||
// Performance tracking start
|
|
||||||
const sentryPerfTags = props.zWidgetType
|
|
||||||
? [{ name: "widget_type", value: props.zWidgetType }]
|
|
||||||
: [];
|
|
||||||
PerformanceTracker.startTracking(
|
|
||||||
PerformanceTransactionName.SHOW_RESIZE_HANDLES,
|
|
||||||
{ widgetId: props.widgetId },
|
|
||||||
true,
|
|
||||||
sentryPerfTags,
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
PerformanceTracker.stopTracking(
|
|
||||||
PerformanceTransactionName.SHOW_RESIZE_HANDLES,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
//end
|
|
||||||
const [pointerEvents, togglePointerEvents] = useState(true);
|
|
||||||
const [newDimensions, set] = useState({
|
|
||||||
width: props.componentWidth,
|
|
||||||
height: props.componentHeight,
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
reset: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { resizeDualSides } = props;
|
|
||||||
const multiplier = resizeDualSides ? 2 : 1;
|
|
||||||
|
|
||||||
const setNewDimensions = (rect: {
|
|
||||||
width: number;
|
|
||||||
height: number;
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
}) => {
|
|
||||||
const { height, width, x, y } = rect;
|
|
||||||
const shouldUpdateHeight =
|
|
||||||
props.componentHeight !== height && props.enableVerticalResize;
|
|
||||||
if (!shouldUpdateHeight) rect.height = props.componentHeight;
|
|
||||||
|
|
||||||
const shouldUpdateWidth =
|
|
||||||
props.componentWidth !== width && props.enableHorizontalResize;
|
|
||||||
if (!shouldUpdateWidth) rect.width = props.componentWidth;
|
|
||||||
|
|
||||||
const isColliding = props.isColliding({ width, height }, { x, y });
|
|
||||||
if (!isColliding) {
|
|
||||||
set({ ...rect, reset: false });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
set({
|
|
||||||
width: props.componentWidth,
|
|
||||||
height: props.componentHeight,
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
reset: true,
|
|
||||||
});
|
|
||||||
}, [props.componentHeight, props.componentWidth]);
|
|
||||||
|
|
||||||
const handles = [];
|
|
||||||
|
|
||||||
if (props.handles.left) {
|
|
||||||
handles.push({
|
|
||||||
dragCallback: (x: number) => {
|
|
||||||
setNewDimensions({
|
|
||||||
width: props.componentWidth - multiplier * x,
|
|
||||||
height: newDimensions.height,
|
|
||||||
x: resizeDualSides ? newDimensions.x : x,
|
|
||||||
y: newDimensions.y,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
component: props.handles.left,
|
|
||||||
handleDirection: ReflowDirection.LEFT,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.handles.top) {
|
|
||||||
handles.push({
|
|
||||||
dragCallback: (x: number, y: number) => {
|
|
||||||
setNewDimensions({
|
|
||||||
width: newDimensions.width,
|
|
||||||
height: props.componentHeight - multiplier * y,
|
|
||||||
y: resizeDualSides ? newDimensions.y : y,
|
|
||||||
x: newDimensions.x,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
component: props.handles.top,
|
|
||||||
handleDirection: ReflowDirection.TOP,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.handles.right) {
|
|
||||||
handles.push({
|
|
||||||
dragCallback: (x: number) => {
|
|
||||||
setNewDimensions({
|
|
||||||
width: props.componentWidth + multiplier * x,
|
|
||||||
height: newDimensions.height,
|
|
||||||
x: newDimensions.x,
|
|
||||||
y: newDimensions.y,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
component: props.handles.right,
|
|
||||||
handleDirection: ReflowDirection.RIGHT,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.handles.bottom) {
|
|
||||||
handles.push({
|
|
||||||
dragCallback: (x: number, y: number) => {
|
|
||||||
setNewDimensions({
|
|
||||||
width: newDimensions.width,
|
|
||||||
height: props.componentHeight + multiplier * y,
|
|
||||||
x: newDimensions.x,
|
|
||||||
y: newDimensions.y,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
component: props.handles.bottom,
|
|
||||||
handleDirection: ReflowDirection.BOTTOM,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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) => {
|
|
||||||
setNewDimensions({
|
|
||||||
width: props.componentWidth + x,
|
|
||||||
height: props.componentHeight + y,
|
|
||||||
x: newDimensions.x,
|
|
||||||
y: newDimensions.y,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
component: props.handles.bottomRight,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.handles.bottomLeft) {
|
|
||||||
handles.push({
|
|
||||||
dragCallback: (x: number, y: number) => {
|
|
||||||
setNewDimensions({
|
|
||||||
width: props.componentWidth - x,
|
|
||||||
height: props.componentHeight + y,
|
|
||||||
x,
|
|
||||||
y: newDimensions.y,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
component: props.handles.bottomLeft,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const onResizeStop = () => {
|
|
||||||
togglePointerEvents(true);
|
|
||||||
props.onStop(
|
|
||||||
{
|
|
||||||
width: newDimensions.width,
|
|
||||||
height: newDimensions.height,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: newDimensions.x,
|
|
||||||
y: newDimensions.y,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const showResizeBoundary = props.enableHorizontalResize;
|
|
||||||
const renderHandles = handles.map((handle, index) => {
|
|
||||||
const disableDot =
|
|
||||||
!showResizeBoundary ||
|
|
||||||
!isHandleResizeAllowed(
|
|
||||||
props.enableHorizontalResize,
|
|
||||||
props.enableVerticalResize,
|
|
||||||
handle.handleDirection,
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
<ResizableHandle
|
|
||||||
{...handle}
|
|
||||||
allowResize={props.allowResize}
|
|
||||||
disableDot={disableDot}
|
|
||||||
isHovered={showResizeBoundary}
|
|
||||||
key={index}
|
|
||||||
onStart={() => {
|
|
||||||
togglePointerEvents(false);
|
|
||||||
props.onStart();
|
|
||||||
}}
|
|
||||||
onStop={onResizeStop}
|
|
||||||
snapGrid={props.snapGrid}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Spring
|
|
||||||
config={{
|
|
||||||
clamp: true,
|
|
||||||
friction: 0,
|
|
||||||
tension: 999,
|
|
||||||
}}
|
|
||||||
from={{
|
|
||||||
width: props.componentWidth,
|
|
||||||
height: props.componentHeight,
|
|
||||||
}}
|
|
||||||
immediate={newDimensions.reset ? true : false}
|
|
||||||
to={{
|
|
||||||
width: newDimensions.width,
|
|
||||||
height: newDimensions.height,
|
|
||||||
transform: `translate3d(${newDimensions.x}px,${newDimensions.y}px,0)`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{(_props) => (
|
|
||||||
<ResizeWrapper
|
|
||||||
$prevents={pointerEvents}
|
|
||||||
className={props.className}
|
|
||||||
// isHovered={showResizeBoundary}
|
|
||||||
// showBoundaries={showResizeBoundary}
|
|
||||||
style={_props}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
{props.enableHorizontalResize && renderHandles}
|
|
||||||
</ResizeWrapper>
|
|
||||||
)}
|
|
||||||
</Spring>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Resizable;
|
|
||||||
Loading…
Reference in New Issue
Block a user