40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
|
import React, { memo, useMemo } from "react";
|
||
|
|
import { useSelector } from "react-redux";
|
||
|
|
import { getRenderMode } from "selectors/editorSelectors";
|
||
|
|
import { getLayoutSystemType } from "selectors/layoutSystemSelectors";
|
||
|
|
import type { WidgetProps } from "widgets/BaseWidget";
|
||
|
|
import withWidgetProps from "widgets/withWidgetProps";
|
||
|
|
import { getLayoutSystem } from "./withLayoutSystemWidgetHOC";
|
||
|
|
|
||
|
|
// ToDo(#27615): destructure withWidgetProps to withCanvasProps by picking only necessary props of a canvas.
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Canvas of a Layout System is the module that provides necessary utilities to position and order widgets.
|
||
|
|
* Canvas also provides editing layout system specific editing experiences like Drag and Drop, Drag to Select, Widget Grouping, etc.
|
||
|
|
* This Component Hydrates canvas with enhanced properties from withWidgetProps and picks the layout system specific Canvas Implementation.
|
||
|
|
*/
|
||
|
|
|
||
|
|
const LayoutSystemBasedCanvas = memo((props: WidgetProps) => {
|
||
|
|
const renderMode = useSelector(getRenderMode);
|
||
|
|
const layoutSystemType = useSelector(getLayoutSystemType);
|
||
|
|
const { canvasSystem } = useMemo(
|
||
|
|
() => getLayoutSystem(renderMode, layoutSystemType),
|
||
|
|
[
|
||
|
|
{
|
||
|
|
renderMode,
|
||
|
|
layoutSystemType,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
);
|
||
|
|
const { Canvas, propertyEnhancer } = canvasSystem;
|
||
|
|
return <Canvas {...propertyEnhancer(props)} />;
|
||
|
|
});
|
||
|
|
|
||
|
|
const HydratedLayoutSystemBasedCanvas = withWidgetProps(
|
||
|
|
LayoutSystemBasedCanvas as any,
|
||
|
|
);
|
||
|
|
|
||
|
|
export const renderAppsmithCanvas = (props: WidgetProps) => {
|
||
|
|
return <HydratedLayoutSystemBasedCanvas {...props} />;
|
||
|
|
};
|