fix(reconciler): augment row/column with container props

Author: simonedevit

packages/generator/index.ts

@@ -43,8 +43,8 @@ type JsxElementsInfo = {
 // special elements for Grid layout (these elements are not in BabylonJS)
 function createJsxGridElements(jsxElements: JsxElementsInfo) {
     const importStatement = `import type { RowProps, ColumnProps } from '../types/props';`;
-    const rowDeclarationStatement = `row: React.DetailedHTMLProps<RowProps, any>;`;
-    const columnDeclarationStatement = `column: React.DetailedHTMLProps<ColumnProps, any>;`;
+    const rowDeclarationStatement = `row: React.DetailedHTMLProps<BabylonProps<ExcludeReadonlyAndPrivate<Container>,RowProps,Grid>, any>;`;
+    const columnDeclarationStatement = `column: React.DetailedHTMLProps<BabylonProps<ExcludeReadonlyAndPrivate<Container>,ColumnProps,Grid>, any>;`;
 
     jsxElements.imports.push(importStatement);
     jsxElements.declarations.push(rowDeclarationStatement, columnDeclarationStatement);

packages/library/src/_generated/babylon.gui.declarations.ts

@@ -419,6 +419,6 @@ name: ConstructorParameters<typeof VolumeBasedPanel>[0];
 parentClass: ConstructorParameters<typeof XmlLoader>[0];
 
     } & GuiProps,XmlLoader>, any>;
-  row: React.DetailedHTMLProps<RowProps, any>;
-  column: React.DetailedHTMLProps<ColumnProps, any>;
+  row: React.DetailedHTMLProps<BabylonProps<ExcludeReadonlyAndPrivate<Container>,RowProps,Grid>, any>;
+  column: React.DetailedHTMLProps<BabylonProps<ExcludeReadonlyAndPrivate<Container>,ColumnProps,Grid>, any>;
 }

packages/library/src/components/hosts/GridHost.tsx

@@ -29,6 +29,8 @@ type AugmentedGrid = BabylonEntity<
     }
 >;
 
+const excludedProps = ['children', 'ref', 'height', 'width', 'isPixel', ...Object.keys(GuiTriggers)];
+
 export class GridHost {
     static createInstance(type: 'row' | 'column', Class: any, props: RowProps | ColumnProps, rootContainer: RootContainer) {
         const scene = rootContainer.scene;
@@ -46,6 +48,15 @@ export class GridHost {
         };
         nestedGrid.parent = null;
 
+        // mainly styling purpose
+        Object.keys(props)
+            .filter(propName => !excludedProps.includes(propName))
+            .forEach(_key => {
+                const key = _key as keyof (RowProps | ColumnProps);
+                const value = props[key];
+                nestedGrid[key] = value;
+            });
+
         handleEvents(props, nestedGrid);
 
         return nestedGrid;

packages/library/src/types/props.ts

@@ -158,22 +158,16 @@ export type GuiProps =
         // add here other gui props
     };
 
-type WithChildren<T> = T & {
-    children?: React.ReactNode;
-};
-
 // Grid Layout Props
-export type RowProps = WithChildren<{
+export type RowProps = {
     height: Parameters<Grid['addRowDefinition']>[0];
     isPixel?: Parameters<Grid['addRowDefinition']>[1];
-}> &
-    GuiProps;
+} & GuiProps;
 
-export type ColumnProps = WithChildren<{
+export type ColumnProps = {
     width: Parameters<Grid['addColumnDefinition']>[0];
     isPixel?: Parameters<Grid['addColumnDefinition']>[1];
-}> &
-    GuiProps;
+} & GuiProps;
 
 // MinimalHostProps don't contain JSXElements[keyof JSXElements] to avoid long TypeScript checking times, but image it like it (useful representation for Host.ts and GuiHost.ts)
 type MinimalHostProps = CommonProps & Pick<Node, 'name'>;