Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'feature/resize-dot-missing' into 'release'

Browse Source 
Resize dot added to top and left edges

See merge request theappsmith/internal-tools-client!92
This commit is contained in:
Satbir Singh 2019-10-29 10:28:34 +00:00
commit 8b78ae927f
1 changed files with 31 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/client/src/editorComponents/ResizableComponent.tsx
View File

@ -1,5 +1,5 @@
import React, { useContext, CSSProperties, useState } from "react";
import styled from "styled-components";
import styled, {css} from "styled-components";
import { Rnd } from "react-rnd";
import { XYCoord } from "react-dnd";
import { WidgetProps, WidgetOperations } from "../widgets/BaseWidget";
@ -76,8 +76,13 @@ function getHandleSyles() : {
}
}
const ResizableContainer = styled(Rnd)`
interface ResizeBorderDotDivProps {
isfocused: boolean
}
const borderCSS = css<ResizeBorderDotDivProps>`
position: relative;
height: 100%;
opacity: 0.99;
&:after,
&:before {
@ -89,6 +94,24 @@ const ResizableContainer = styled(Rnd)`
background: ${props =>
props.isfocused && props.theme.colors.containerBorder};
}
`;
const ResizeBorderDotDiv = styled.div<ResizeBorderDotDivProps>`
${borderCSS}
&:after {
left: -${props => props.theme.spaces[1]}px;
top: calc(50% - ${props => props.theme.spaces[1]}px);
z-index: 0;
}
&:before {
left: calc(50% - ${props => props.theme.spaces[1]}px);
top: -${props => props.theme.spaces[1]}px;
z-index: 1;
}
`;
const ResizableContainer = styled(Rnd)`
${borderCSS}
&:after {
right: -${props => props.theme.spaces[1]}px;
top: calc(50% - ${props => props.theme.spaces[1]}px);
@ -111,6 +134,7 @@ export const ResizableComponent = (props: ResizableComponentProps) => {
const occupiedSpaces = useContext(OccupiedSpaceContext);
const [isColliding, setIsColliding] = useState(false);
const isWidgetFocused = isFocused === props.widgetId
let bounds = "body";
if (boundingParent && boundingParent.current) {
@ -186,10 +210,10 @@ export const ResizableComponent = (props: ResizableComponentProps) => {
setIsColliding(false);
};
const canResize = !isDragging && isFocused === props.widgetId;
const canResize = !isDragging && isWidgetFocused;
return (
<ResizableContainer
isfocused={isFocused === props.widgetId ? "true" : undefined}
isfocused={isWidgetFocused ? "true" : undefined}
position={{
x: 0,
y: 0,
@ -231,7 +255,9 @@ export const ResizableComponent = (props: ResizableComponentProps) => {
bottomLeft: canResize,
}}
>
{props.children}
<ResizeBorderDotDiv isfocused={isWidgetFocused}>
{props.children}
</ResizeBorderDotDiv>
</ResizableContainer>
);
};