Container: Support for children

src/SVG/Elements/Container.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 interface IContainerProps {
+  // eslint-disable-next-line no-use-before-define
+  children: Container[],
   x: number,
   y: number,
   width: number,
@@ -9,15 +11,21 @@ interface IContainerProps {
 }
 
 export class Container extends React.Component<IContainerProps> {
-  public render() {
+  public render(): React.ReactNode {
+    const containersElements = this.props.children.map(child => child.render());
+
     return (
+      <g>
         <rect
           x={this.props.x}
           y={this.props.y}
           width={this.props.width}
           height={this.props.height}
           style={this.props.style}
-      />
+        >
+        </rect>
+        { containersElements }
+      </g>
     );
   }
 }

src/SVG/Elements/MainContainer.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Container } from './Container';
 
 interface IMainContainerProps {
+  children: Container[],
   width: number,
   height: number,
 }
@@ -20,7 +21,9 @@ export class MainContainer extends React.Component<IMainContainerProps> {
       width={this.props.width}
       height={this.props.height}
       style={style}
-      />
+      >
+        { this.props.children }
+      </Container>
     );
   }
 }

src/SVG/SVG.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { AvailableContainer } from '../Interfaces/AvailableContainer';
+import { Container } from './Elements/Container';
 import { MainContainer } from './Elements/MainContainer';
 
 interface ISVGProps {
@@ -21,12 +22,16 @@ export class SVG extends React.Component<ISVGProps> {
       xmlns
     };
 
+    const children: Container[] = [];
+
     return (
         <svg {...properties}>
           <MainContainer
             width={this.props.MainContainer.Width}
             height={this.props.MainContainer.Height}
-          />
+          >
+            { children }
+          </MainContainer>
         </svg>
     );
   };