20de52000d
## Description This PR adds one of the promised updates to the auto height feature. More specifically, we wanted to add was the ability to see the containers change height as we drag and drop widgets within them instead of after dropping (when auto height is enabled) This PR does that. Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import {
|
|
CONTAINER_GRID_PADDING,
|
|
GridDefaults,
|
|
} from "constants/WidgetConstants";
|
|
const GRID_POINT_SIZE = 1;
|
|
const WrappedDragLayer = styled.div<{
|
|
columnWidth: number;
|
|
noPad: boolean;
|
|
}>`
|
|
position: absolute;
|
|
pointer-events: none;
|
|
left: ${(props) =>
|
|
props.noPad ? "0" : `${CONTAINER_GRID_PADDING - GRID_POINT_SIZE}px;`};
|
|
top: ${(props) =>
|
|
props.noPad ? "0" : `${CONTAINER_GRID_PADDING - GRID_POINT_SIZE}px;`};
|
|
height: ${(props) =>
|
|
props.noPad
|
|
? `100%`
|
|
: `calc(100% - ${(CONTAINER_GRID_PADDING - GRID_POINT_SIZE) * 2}px)`};
|
|
width: ${(props) =>
|
|
props.noPad
|
|
? `100%`
|
|
: `calc(100% - ${(CONTAINER_GRID_PADDING - GRID_POINT_SIZE) * 2}px)`};
|
|
|
|
background-image: radial-gradient(
|
|
circle at ${GRID_POINT_SIZE}px ${GRID_POINT_SIZE}px,
|
|
${(props) => props.theme.colors.grid} ${GRID_POINT_SIZE}px,
|
|
transparent 0
|
|
);
|
|
background-size: ${(props) =>
|
|
props.columnWidth - GRID_POINT_SIZE / GridDefaults.DEFAULT_GRID_COLUMNS}px
|
|
${GridDefaults.DEFAULT_GRID_ROW_HEIGHT}px;
|
|
`;
|
|
|
|
type DragLayerProps = {
|
|
parentColumnWidth: number;
|
|
noPad: boolean;
|
|
};
|
|
|
|
function DragLayerComponent(props: DragLayerProps) {
|
|
return (
|
|
<WrappedDragLayer
|
|
className="drag-layer"
|
|
columnWidth={props.parentColumnWidth}
|
|
noPad={props.noPad}
|
|
/>
|
|
);
|
|
}
|
|
export default DragLayerComponent;
|