PromucFlow_constructor/app/client/src/layoutSystems/common/useLayoutSystemFeatures.ts

56 lines
2.1 KiB
TypeScript
Raw Normal View History

chore: Rename and cleanup of editor components (#26944) ## Description This PR is aimed at Renaming and cleanup of editor components. The changes include, - Rename Editor components to reflect more of it's function as an editor component - Rename all references of the container to wrapper so as to avoid confusion with Actual containers and canvases - Pass down few instances of selected properties to children instead of reselecting the same in the children - Remove all instances of `isAutolayout`, instead use `useLayoutSystemFeatures` to check if the particular feature is enabled in the particular layout type. P.S. please feel free to suggest better names that define the function of the components. #### PR fixes following issue(s) Fixes #26571 #### Type of change - Chore (housekeeping or task changes that don't impact user perception) #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] 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 - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] 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>
2023-09-12 14:14:02 +00:00
import { useSelector } from "react-redux";
import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
import { getCurrentAppPositioningType } from "selectors/editorSelectors";
export enum LayoutSystemFeatures {
ENABLE_MAIN_CONTAINER_RESIZER = "ENABLE_MAIN_CONTAINER_RESIZER", //enable main canvas resizer
ENABLE_FORKING_FROM_TEMPLATES = "ENABLE_FORKING_FROM_TEMPLATES", //enable forking pages from template directly inside apps
ENABLE_CANVAS_LAYOUT_CONTROL = "ENABLE_CANVAS_LAYOUT_CONTROL", //enables layout control option in property pane
}
const FIXED_LAYOUT_FEATURES = {
[LayoutSystemFeatures.ENABLE_FORKING_FROM_TEMPLATES]: true,
[LayoutSystemFeatures.ENABLE_CANVAS_LAYOUT_CONTROL]: true,
} as Record<LayoutSystemFeatures, boolean>;
const AUTO_LAYOUT_FEATURES = {
[LayoutSystemFeatures.ENABLE_MAIN_CONTAINER_RESIZER]: true,
} as Record<LayoutSystemFeatures, boolean>;
/**
* This Hook is mainly written to be used as a central control to enable
* layout specific features based on the type of current layout.
* This way the components using it need not be aware of what layout it is on
*
* @returns This hook returns a method, which can be used to get a boolean corresponding to the feature supplied as argument.
* The boolean will indicate if the feature is enabled for the current layout
*/
export const useLayoutSystemFeatures = () => {
const appPositioningType = useSelector(getCurrentAppPositioningType);
let currentFeatureSet = {} as Record<LayoutSystemFeatures, boolean>;
switch (appPositioningType) {
case AppPositioningTypes.FIXED:
currentFeatureSet = FIXED_LAYOUT_FEATURES;
break;
case AppPositioningTypes.AUTO:
currentFeatureSet = AUTO_LAYOUT_FEATURES;
break;
}
/**
* This method checks if the features requested in the method,
* can be enabled for the given particular layout type
*/
return (checkFeaturesArray: LayoutSystemFeatures[]) => {
const featuresArray: boolean[] = [];
for (const checkFeature of checkFeaturesArray) {
featuresArray.push(!!currentFeatureSet[checkFeature]);
}
return featuresArray;
};
};