57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import { Rnd } from "react-rnd";
|
|
import styled, { css } from "styled-components";
|
|
import { ContainerWidgetProps } from "widgets/ContainerWidget";
|
|
import { WidgetProps } from "widgets/BaseWidget";
|
|
|
|
export type ResizableComponentProps = ContainerWidgetProps<WidgetProps> & {
|
|
paddingOffset: number;
|
|
};
|
|
interface ResizeBorderDotDivProps {
|
|
isfocused: boolean;
|
|
}
|
|
|
|
const borderCSS = css<ResizeBorderDotDivProps>`
|
|
position: relative;
|
|
opacity: 0.99;
|
|
height: 100%;
|
|
&:after,
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: ${props => props.theme.spaces[2]}px;
|
|
height: ${props => props.theme.spaces[2]}px;
|
|
border-radius: ${props => props.theme.radii[5]}%;
|
|
background: ${props =>
|
|
props.isfocused && props.theme.colors.containerBorder};
|
|
}
|
|
`;
|
|
|
|
export const ResizeBorderDotDiv = styled.div<ResizeBorderDotDivProps>`
|
|
${borderCSS}
|
|
&:after {
|
|
left: -${props => props.theme.spaces[2]}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[2]}px;
|
|
z-index: 1;
|
|
}
|
|
`;
|
|
|
|
export default styled(Rnd)`
|
|
${borderCSS}
|
|
&:after {
|
|
right: -${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);
|
|
bottom: -${props => props.theme.spaces[1]}px;
|
|
z-index: 1;
|
|
}
|
|
`;
|