diff --git a/app/client/src/actions/pageActions.tsx b/app/client/src/actions/pageActions.tsx index 29d9137f59..248edb4d5f 100644 --- a/app/client/src/actions/pageActions.tsx +++ b/app/client/src/actions/pageActions.tsx @@ -92,12 +92,13 @@ export type WidgetMove = { widgetId: string; leftColumn: number; topRow: number; + parentId: string; /* - If parentWidgetId is different from what we have in redux store, + If newParentId is different from what we have in redux store, then we have to delete this, as it has been dropped in another container somewhere. */ - parentWidgetId: string; + newParentId: string; }; export type WidgetRemoveChild = { @@ -107,6 +108,7 @@ export type WidgetRemoveChild = { export type WidgetDelete = { widgetId: string; + parentId: string; }; export type WidgetResize = { diff --git a/app/client/src/editorComponents/DraggableComponent.tsx b/app/client/src/editorComponents/DraggableComponent.tsx index f45d20d5b6..11892cfbfb 100644 --- a/app/client/src/editorComponents/DraggableComponent.tsx +++ b/app/client/src/editorComponents/DraggableComponent.tsx @@ -60,7 +60,10 @@ const DraggableComponent = (props: DraggableComponentProps) => { const { updateWidget } = useContext(WidgetFunctionsContext); const [isResizing, setIsResizing] = useState(false); const deleteWidget = () => { - updateWidget && updateWidget(WidgetOperations.DELETE, props.widgetId); + updateWidget && + updateWidget(WidgetOperations.DELETE, props.widgetId, { + parentId: props.parentId, + }); }; const [{ isDragging }, drag, preview] = useDrag({ item: props, diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx index 1c5a08634d..d7c42a9c2d 100644 --- a/app/client/src/sagas/WidgetOperationSagas.tsx +++ b/app/client/src/sagas/WidgetOperationSagas.tsx @@ -10,12 +10,7 @@ import { WidgetDelete, } from "../actions/pageActions"; import { FlattenedWidgetProps } from "../reducers/entityReducers/canvasWidgetsReducer"; -import { - getWidgets, - getWidget, - getWidgetParent, - getDefaultWidgetConfig, -} from "./selectors"; +import { getWidgets, getWidget, getDefaultWidgetConfig } from "./selectors"; import { generateWidgetProps, updateWidgetPosition, @@ -72,14 +67,14 @@ export function* addChildSaga(addChildAction: ReduxAction) { export function* deleteSaga(deleteAction: ReduxAction) { try { - const { widgetId } = deleteAction.payload; + const { widgetId, parentId } = deleteAction.payload; const widgets = yield select(getWidgets); - delete widgets[widgetId]; - const parent = yield select(getWidgetParent, widgetId); + const parent = yield select(getWidget, parentId); parent.children = parent.children.filter( (child: string) => child !== widgetId, ); - widgets[parent.widgetId] = parent; + delete widgets[widgetId]; + widgets[parentId] = parent; yield put({ type: ReduxActionTypes.UPDATE_LAYOUT, payload: { widgets }, @@ -97,25 +92,31 @@ export function* deleteSaga(deleteAction: ReduxAction) { export function* moveSaga(moveAction: ReduxAction) { try { - const { widgetId, leftColumn, topRow, parentWidgetId } = moveAction.payload; + const { + widgetId, + leftColumn, + topRow, + parentId, + newParentId, + } = moveAction.payload; let widget: FlattenedWidgetProps = yield select(getWidget, widgetId); // Get all widgets from DSL/Redux Store const widgets = yield select(getWidgets) as any; // Get parent from DSL/Redux Store - const parent = yield select(getWidgetParent, widgetId); + const parent = yield select(getWidget, parentId); // Update position of widget widget = updateWidgetPosition(widget, leftColumn, topRow, parent); // Replace widget with update widget props widgets[widgetId] = widget; // If the parent has changed i.e parentWidgetId is not parent.widgetId - if (parent.widgetId !== parentWidgetId && widgetId !== parentWidgetId) { + if (parent.widgetId !== newParentId && widgetId !== newParentId) { // Remove from the previous parent parent.children = parent.children.filter( (child: string) => child !== widgetId, ); widgets[parent.widgetId] = parent; // Add to new parent - widgets[parentWidgetId].children.push(widgetId); + widgets[newParentId].children.push(widgetId); } yield put({ type: ReduxActionTypes.UPDATE_LAYOUT, diff --git a/app/client/src/sagas/selectors.tsx b/app/client/src/sagas/selectors.tsx index fc1c5eacf8..86fa24db4c 100644 --- a/app/client/src/sagas/selectors.tsx +++ b/app/client/src/sagas/selectors.tsx @@ -22,20 +22,6 @@ export const getEditorConfigs = ( }; }; -export const getWidgetParent = ( - state: AppState, - widgetId: string, -): FlattenedWidgetProps | undefined => { - const widgets = state.entities.canvasWidgets; - return Object.values(widgets).find( - (widget: FlattenedWidgetProps) => - widget && - widget.children && - widget.children.length > 0 && - widget.children.indexOf(widgetId) > -1, - ); -}; - export const getDefaultWidgetConfig = ( state: AppState, type: WidgetType, diff --git a/app/client/src/utils/WidgetPropsUtils.tsx b/app/client/src/utils/WidgetPropsUtils.tsx index 5395d90b88..3e974980f8 100644 --- a/app/client/src/utils/WidgetPropsUtils.tsx +++ b/app/client/src/utils/WidgetPropsUtils.tsx @@ -142,7 +142,8 @@ export const widgetOperationParams = ( { leftColumn, topRow, - parentWidgetId: widgetId, + parentId: widget.parentId, + newParentId: widgetId, }, ]; // If this is not an existing widget, we'll not have the widgetId