PromucFlow_constructor/app/client/src/layoutSystems/common/utils/canvasUtils.ts
Preet Sidhu 69f4a412bf
chore: add highlight calculation logic for layouts. (#27980)
## 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>
2023-10-19 16:27:40 -04:00

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,
}),
);
};