75cf47b8c5
## Description Core features of Auto Layout and mobile responsiveness, hidden under a feature flag. > Add a TL;DR when description is extra long (helps content team) Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video ## Type of change > Please delete options that are not relevant. - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? > Manual regression and sanity tests for all fixed canvas functionality. - Manual - 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 - [ ] 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 - [ ] 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 --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: Arsalan <arsalanyaldram0211@outlook.com> Co-authored-by: Aswath K <aswath.sana@gmail.com> Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { updateAndSaveLayout } from "actions/pageActions";
|
|
import {
|
|
ReduxAction,
|
|
ReduxActionErrorTypes,
|
|
ReduxActionTypes,
|
|
} from "ce/constants/ReduxActionConstants";
|
|
import log from "loglevel";
|
|
import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
|
|
import { all, put, select, takeLatest } from "redux-saga/effects";
|
|
import {
|
|
alterLayoutForDesktop,
|
|
alterLayoutForMobile,
|
|
} from "utils/autoLayout/AutoLayoutUtils";
|
|
import { getWidgets } from "./selectors";
|
|
|
|
export function* updateLayoutForMobileCheckpoint(
|
|
actionPayload: ReduxAction<{
|
|
parentId: string;
|
|
isMobile: boolean;
|
|
canvasWidth: number;
|
|
}>,
|
|
) {
|
|
try {
|
|
const start = performance.now();
|
|
const { canvasWidth, isMobile, parentId } = actionPayload.payload;
|
|
const allWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
|
|
const updatedWidgets: CanvasWidgetsReduxState = isMobile
|
|
? alterLayoutForMobile(allWidgets, parentId, canvasWidth)
|
|
: alterLayoutForDesktop(allWidgets, parentId);
|
|
yield put(updateAndSaveLayout(updatedWidgets));
|
|
log.debug(
|
|
"Auto Layout : updating layout for mobile viewport took",
|
|
performance.now() - start,
|
|
"ms",
|
|
);
|
|
} catch (error) {
|
|
yield put({
|
|
type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR,
|
|
payload: {
|
|
action: ReduxActionTypes.RECALCULATE_COLUMNS,
|
|
error,
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
export default function* layoutUpdateSagas() {
|
|
yield all([
|
|
takeLatest(
|
|
ReduxActionTypes.RECALCULATE_COLUMNS,
|
|
updateLayoutForMobileCheckpoint,
|
|
),
|
|
]);
|
|
}
|