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",
|
||||
BLUE_CHARCOAL: "#23292E",
|
||||
TROUT: "#4C565E",
|
||||
JAFFA_DARK: "#F86A2B",
|
||||
JAFFA_DARK: "#EF7541",
|
||||
BURNING_ORANGE: "#FF7742",
|
||||
TIA_MARIA: "#CB4810",
|
||||
SOLID_MERCURY: "#E5E5E5",
|
||||
TROUT_DARK: "#535B62",
|
||||
ALABASTER: "#F9F8F8",
|
||||
// WATUSI: "#FF9B4E",
|
||||
WATUSI: "#FFE0D2",
|
||||
GRAY: "#858282",
|
||||
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