64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import React, { CSSProperties } from "react";
|
|
import { WidgetProps } from "widgets/BaseWidget";
|
|
import ContainerWidget, { ContainerWidgetProps } from "widgets/ContainerWidget";
|
|
import { WidgetTypes, GridDefaults } from "constants/WidgetConstants";
|
|
import DropTargetComponent from "components/editorComponents/DropTargetComponent";
|
|
import { getCanvasSnapRows } from "utils/WidgetPropsUtils";
|
|
import { getCanvasClassName } from "utils/generators";
|
|
|
|
class CanvasWidget extends ContainerWidget {
|
|
getWidgetType = () => {
|
|
return WidgetTypes.CANVAS_WIDGET;
|
|
};
|
|
|
|
getCanvasProps(): ContainerWidgetProps<WidgetProps> {
|
|
return {
|
|
...this.props,
|
|
parentRowSpace: 1,
|
|
parentColumnSpace: 1,
|
|
topRow: 0,
|
|
leftColumn: 0,
|
|
containerStyle: "none",
|
|
};
|
|
}
|
|
|
|
renderAsDropTarget() {
|
|
return (
|
|
<DropTargetComponent
|
|
{...this.getCanvasProps()}
|
|
{...this.getSnapSpaces()}
|
|
minHeight={this.props.minHeight || 380}
|
|
>
|
|
{this.renderAsContainerComponent(this.props)}
|
|
</DropTargetComponent>
|
|
);
|
|
}
|
|
|
|
getPageView() {
|
|
const snapRows = getCanvasSnapRows(
|
|
this.props.bottomRow,
|
|
this.props.canExtend,
|
|
);
|
|
const height = snapRows * GridDefaults.DEFAULT_GRID_ROW_HEIGHT;
|
|
const style: CSSProperties = {
|
|
width: "100%",
|
|
height: `${height}px`,
|
|
background: "none",
|
|
position: "relative",
|
|
};
|
|
// This div is the DropTargetComponent alternative for the page view
|
|
// DropTargetComponent and this div are responsible for the canvas height
|
|
return (
|
|
<div className={getCanvasClassName()} style={style}>
|
|
{this.renderAsContainerComponent(this.getCanvasProps())}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
getCanvasView() {
|
|
return this.renderAsDropTarget();
|
|
}
|
|
}
|
|
|
|
export default CanvasWidget;
|