## Description 1. Add LayoutComponent functionality. 2. Create Basic LayoutComponents. 3. Create LayoutPresets needed for Container-like widgets. 4. Add highlight calculation logic for all basic Layout Components. 5. Create dragging sagas for Anvil. 6. Create DraggingArena associated functionality to handle DnD in Anvil. #### PR fixes following issue(s) Fixes #27004 #### Type of change > Please delete options that are not relevant. - New feature (non-breaking change which adds functionality) ## Testing #### How Has This Been Tested? - [ ] Manual - [ ] JUnit - [x] Jest - [ ] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: Aswath K <aswath.sana@gmail.com> Co-authored-by: rahulramesha <rahul@appsmith.com> Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import type { RenderModes } from "constants/WidgetConstants";
|
|
import type { AdditionalAnvilProperties } from "layoutSystems/anvil/canvas/types";
|
|
import type { AdditionalAutoLayoutProperties } from "layoutSystems/autolayout/canvas/types";
|
|
import type { AdditionalFixedLayoutProperties } from "layoutSystems/fixedlayout/canvas/types";
|
|
import { map } from "lodash";
|
|
import WidgetFactory from "WidgetProvider/factory";
|
|
import type { WidgetProps } from "widgets/BaseWidget";
|
|
|
|
type LayoutSystemProps =
|
|
| AdditionalFixedLayoutProperties
|
|
| AdditionalAutoLayoutProperties
|
|
| AdditionalAnvilProperties;
|
|
|
|
/**
|
|
* This utility function renders a child widget based on the widget data passed to it.
|
|
* when enhancing a child widget properties
|
|
* layoutSystemProps override childWidgetData and defaultWidgetProps,
|
|
* childWidgetData override defaultWidgetProps.
|
|
*
|
|
* @returns
|
|
*/
|
|
function renderChildWidget({
|
|
childWidgetData,
|
|
defaultWidgetProps,
|
|
layoutSystemProps,
|
|
noPad,
|
|
renderMode,
|
|
widgetId,
|
|
}: {
|
|
childWidgetData: WidgetProps;
|
|
widgetId: string;
|
|
renderMode: RenderModes;
|
|
layoutSystemProps: LayoutSystemProps;
|
|
defaultWidgetProps: Record<string, any>;
|
|
noPad: boolean;
|
|
}): React.ReactNode {
|
|
const childWidget = {
|
|
...defaultWidgetProps,
|
|
...childWidgetData,
|
|
...layoutSystemProps,
|
|
};
|
|
if (!childWidgetData) return null;
|
|
if (noPad) childWidget.noContainerOffset = true;
|
|
childWidget.parentId = widgetId;
|
|
return WidgetFactory.createWidget(childWidget, renderMode);
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param children - array of props of the children.
|
|
* @param widgetId - id of the parent canvas.
|
|
* @param renderMode - current render mode.
|
|
* @param defaultWidgetProps - default props of the child widget.
|
|
* @param layoutSystemProps - props of the layout system.
|
|
* @param noPad - if true, noContainerOffset is set to true to the child widget.
|
|
*
|
|
* children is an array of childWidgetData
|
|
* childWidgetData is props of each individual child widget.
|
|
* layoutSystemProps override childWidgetData, childWidgetData override defaultWidgetProps.
|
|
*
|
|
* @returns array of child widgets.
|
|
*/
|
|
export const renderChildren = (
|
|
children: WidgetProps[],
|
|
widgetId: string,
|
|
renderMode: RenderModes,
|
|
defaultWidgetProps: Partial<WidgetProps> = {},
|
|
layoutSystemProps: LayoutSystemProps,
|
|
noPad = false,
|
|
): React.ReactNode[] => {
|
|
return map(children, (childWidgetData: WidgetProps) =>
|
|
renderChildWidget({
|
|
childWidgetData,
|
|
layoutSystemProps,
|
|
defaultWidgetProps,
|
|
noPad,
|
|
renderMode,
|
|
widgetId,
|
|
}),
|
|
);
|
|
};
|