feat: use page elements if possible

webiny · Oct 12, 2021 · fc6dae6 · fc6dae6
1 parent 1da0792
commit fc6dae6
Showing 1 changed file with 42 additions and 4 deletions.
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/EditorResponsiveBar.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/EditorResponsiveBar.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { useRecoilState } from "recoil";
 import { css } from "emotion";
 import classNames from "classnames";
@@ -9,6 +9,8 @@ import { Typography } from "@webiny/ui/Typography";
 import { PbEditorResponsiveModePlugin } from "~/types";
 import { uiAtom, setDisplayModeMutation } from "../../../recoil/modules";
 import { usePageBuilder } from "~/hooks/usePageBuilder";
+import { usePageElements } from "@webiny/app-page-builder-elements/hooks/usePageElements";
+import { isPerBreakpointStylesObject } from "@webiny/app-page-builder-elements/utils";
 
 const classes = {
     wrapper: css({
@@ -100,10 +102,46 @@ const EditorResponsiveBar = () => {
         [uiAtom]
     );
 
+    const editorModes = useMemo(
+        () => plugins.byType<PbEditorResponsiveModePlugin>("pb-editor-responsive-mode"),
+        []
+    );
+
+    const pageElements = usePageElements();
+    if (pageElements) {
+        // By default, we want to only assign styles for the first breakpoint in line, which is "desktop".
+        // We only care about tablet, mobile-landscape, and mobile-portrait if user selects one of those.
+        useEffect(() => {
+            pageElements.setAssignStylesCallback(params => {
+                const whitelistedBreakpoints = [];
+                for (let i = 0; i < editorModes.length; i++) {
+                    const current = editorModes[i];
+                    whitelistedBreakpoints.push(current.config.displayMode);
+                    if (current.config.displayMode === displayMode) {
+                        break;
+                    }
+                }
+
+                const { breakpoints, styles = {}, assignTo = {} } = params;
+                if (isPerBreakpointStylesObject({ breakpoints, styles })) {
+                    for (const breakpointName in breakpoints) {
+                        if (
+                            styles[breakpointName] &&
+                            whitelistedBreakpoints.includes(breakpointName)
+                        ) {
+                            Object.assign(assignTo, styles[breakpointName]);
+                        }
+                    }
+                } else {
+                    Object.assign(assignTo, styles);
+                }
+
+                return assignTo;
+            });
+        }, [displayMode]);
+    }
+
     const responsiveBarContent = useMemo(() => {
-        const editorModes = plugins.byType<PbEditorResponsiveModePlugin>(
-            "pb-editor-responsive-mode"
-        );
         return editorModes.map(({ config: { displayMode: mode, icon, toolTip } }) => {
             return (
                 <Tooltip