Handle children property in the user components.

Author: ipselon

src/framework/components/ComponentComposer/ComponentComposer.js

@@ -1,5 +1,6 @@
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
+import isArray from 'lodash/isArray';
 import React from 'react';
 import PropTypes from 'prop-types';
 import ComponentWrapper from './ComponentWrapper';
@@ -64,9 +65,15 @@ const renderComponent = (userComponents, description, rootProps) => {
             propsComponent = renderComponent(userComponents, child, propsComponent);
           });
         }
+        let nestedComponents = [];
+        if (propsComponent.children && isArray(propsComponent.children)) {
+          nestedComponents = propsComponent.children;
+          delete propsComponent.children;
+        }
         newElement = React.createElement(
           ComponentWrapper,
-          {wrappedComponent: component, propsComponent, key}
+          {wrappedComponent: component, propsComponent, key},
+          nestedComponents
         );
       } else {
         newElement = React.createElement(NotFoundComponent, {componentName});

src/framework/components/PageComposer/PageComposer.js

@@ -1,5 +1,6 @@
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
+import isArray from 'lodash/isArray';
 import React from 'react';
 import PropTypes from 'prop-types';
 import queryString from 'query-string';
@@ -77,7 +78,12 @@ const renderComponent = (userComponents, description, serviceComponentOptions, r
           isSelected,
           ...serviceComponentOptions,
         };
-        newElement = React.createElement(ComponentWrapper, wrapperProps);
+        let nestedComponents = [];
+        if (propsComponent.children && isArray(propsComponent.children)) {
+          nestedComponents = propsComponent.children;
+          delete propsComponent.children;
+        }
+        newElement = React.createElement(ComponentWrapper, wrapperProps, nestedComponents);
       } else {
         newElement = React.createElement(NotFoundComponent, {componentName});
       }

src/framework/components/PageComposition/PageComposition.js

@@ -122,6 +122,10 @@ class PageComposition extends Component {
         return this.renderComponent(child);
       });
     }
+    if (propsComponents.children && isArray(propsComponents.children)) {
+      nestedComponents = nestedComponents.concat(propsComponents.children);
+      delete propsComponents.children;
+    }
     const validType = type || 'div';
     if (validType.charAt(0) === '_') {
       const pageComponentType = validType.substr(1);