From e6e41478bf50aa8c0b0156a0ac0754b8d50b2964 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Wed, 17 Aug 2022 10:30:53 +0100
Subject: [PATCH] Fix default values with bindings

---
 .../toolpad-app/src/runtime/ToolpadApp.tsx    | 20 +++++++++++++------
 .../AppEditor/PageEditor/ComponentEditor.tsx  |  9 +++------
 .../PageEditor/NodeAttributeEditor.tsx        |  5 +----
 .../src/toolpadComponents/layoutBox.ts        |  9 +++++++--
 4 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
index 64207bdaa90..01c06a7b605 100644
--- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx
+++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
@@ -63,10 +63,7 @@ import usePageTitle from '../utils/usePageTitle';
 import ComponentsContext, { useComponents, useComponent } from './ComponentsContext';
 import { AppModulesProvider, useAppModules } from './AppModulesProvider';
 import Pre from '../components/Pre';
-import {
-  layoutBoxAlignArgTypeDef,
-  layoutBoxJustifyArgTypeDef,
-} from '../toolpadComponents/layoutBox';
+import { layoutBoxArgTypes } from '../toolpadComponents/layoutBox';
 
 const USE_DATA_QUERY_CONFIG_KEYS: readonly (keyof UseDataQueryConfig)[] = [
   'enabled',
@@ -315,10 +312,10 @@ function RenderedNodeContent({ node, childNodeGroups, Component }: RenderedNodeC
             display: 'flex',
             alignItems:
               (componentConfig.hasLayoutBoxAlign && node.layout?.boxAlign?.value) ||
-              layoutBoxAlignArgTypeDef.defaultValue,
+              layoutBoxArgTypes.boxAlign.defaultValue,
             justifyContent:
               (componentConfig.hasLayoutBoxJustify && node.layout?.boxJustify?.value) ||
-              layoutBoxJustifyArgTypeDef.defaultValue,
+              layoutBoxArgTypes.boxJustify.defaultValue,
           }}
         >
           <Component {...props} />
@@ -466,6 +463,17 @@ function parseBindings(
           }
         }
       }
+
+      if (!isPageLayoutComponent(elm)) {
+        for (const [propName, argType] of Object.entries(layoutBoxArgTypes)) {
+          const binding =
+            elm.layout?.[propName as keyof typeof layoutBoxArgTypes] ||
+            appDom.createConst(argType?.defaultValue ?? undefined);
+          const bindingId = `${elm.id}.layout.${propName}`;
+          const scopePath = `${elm.name}.${propName}`;
+          parsedBindingsMap.set(bindingId, parseBinding(binding, { scopePath }));
+        }
+      }
     }
 
     if (appDom.isQuery(elm)) {
diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx
index 130f6448399..8b9f8ca2291 100644
--- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx
+++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx
@@ -11,10 +11,7 @@ import ErrorAlert from './ErrorAlert';
 import NodeNameEditor from '../NodeNameEditor';
 import { useToolpadComponent } from '../toolpadComponents';
 import { getElementNodeComponentId } from '../../../toolpadComponents';
-import {
-  layoutBoxAlignArgTypeDef,
-  layoutBoxJustifyArgTypeDef,
-} from '../../../toolpadComponents/layoutBox';
+import { layoutBoxArgTypes } from '../../../toolpadComponents/layoutBox';
 
 const classes = {
   control: 'Toolpad_Control',
@@ -55,7 +52,7 @@ function ComponentPropsEditor<P>({ componentConfig, node }: ComponentPropsEditor
                 node={node}
                 namespace="layout"
                 name="boxJustify"
-                argType={layoutBoxJustifyArgTypeDef}
+                argType={layoutBoxArgTypes.boxJustify}
               />
             </div>
           ) : null}
@@ -65,7 +62,7 @@ function ComponentPropsEditor<P>({ componentConfig, node }: ComponentPropsEditor
                 node={node}
                 namespace="layout"
                 name="boxAlign"
-                argType={layoutBoxAlignArgTypeDef}
+                argType={layoutBoxArgTypes.boxAlign}
               />
             </div>
           ) : null}
diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx
index b3396b52d9f..5f09f4d3273 100644
--- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx
+++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx
@@ -29,10 +29,7 @@ export default function NodeAttributeEditor({
     [domApi, node, namespace, name],
   );
 
-  const propValue: BindableAttrValue<unknown> | null =
-    (node as any)[namespace]?.[name] ??
-    (argType.defaultValue && appDom.createConst(argType.defaultValue)) ??
-    null;
+  const propValue: BindableAttrValue<unknown> | null = (node as any)[namespace]?.[name] ?? null;
 
   const bindingId = `${node.id}${namespace ? `.${namespace}` : ''}.${name}`;
   const { bindings, pageState } = usePageEditorState();
diff --git a/packages/toolpad-app/src/toolpadComponents/layoutBox.ts b/packages/toolpad-app/src/toolpadComponents/layoutBox.ts
index 806e51e5abc..84098e59e8c 100644
--- a/packages/toolpad-app/src/toolpadComponents/layoutBox.ts
+++ b/packages/toolpad-app/src/toolpadComponents/layoutBox.ts
@@ -1,7 +1,7 @@
 import { BoxProps } from '@mui/material';
 import { ArgTypeDefinition } from '@mui/toolpad-core';
 
-export const layoutBoxAlignArgTypeDef: ArgTypeDefinition<BoxProps['alignItems']> = {
+const layoutBoxAlignArgTypeDef: ArgTypeDefinition<BoxProps['alignItems']> = {
   typeDef: {
     type: 'string',
     enum: ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'],
@@ -11,7 +11,7 @@ export const layoutBoxAlignArgTypeDef: ArgTypeDefinition<BoxProps['alignItems']>
   defaultValue: 'center',
 };
 
-export const layoutBoxJustifyArgTypeDef: ArgTypeDefinition<BoxProps['justifyContent']> = {
+const layoutBoxJustifyArgTypeDef: ArgTypeDefinition<BoxProps['justifyContent']> = {
   typeDef: {
     type: 'string',
     enum: ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'],
@@ -20,3 +20,8 @@ export const layoutBoxJustifyArgTypeDef: ArgTypeDefinition<BoxProps['justifyCont
   control: { type: 'HorizontalAlign' },
   defaultValue: 'start',
 };
+
+export const layoutBoxArgTypes = {
+  boxAlign: layoutBoxAlignArgTypeDef,
+  boxJustify: layoutBoxJustifyArgTypeDef,
+};