diff --git a/src/SVG/Elements/Container.tsx b/src/SVG/Elements/Container.tsx index ab5f382..435c11c 100644 --- a/src/SVG/Elements/Container.tsx +++ b/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 { - public render() { + public render(): React.ReactNode { + const containersElements = this.props.children.map(child => child.render()); + return ( - + + + + { containersElements } + ); } } diff --git a/src/SVG/Elements/MainContainer.tsx b/src/SVG/Elements/MainContainer.tsx index 07a2711..26ba7cc 100644 --- a/src/SVG/Elements/MainContainer.tsx +++ b/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 { width={this.props.width} height={this.props.height} style={style} - /> + > + { this.props.children } + ); } } diff --git a/src/SVG/SVG.tsx b/src/SVG/SVG.tsx index ff83c9e..9b22089 100644 --- a/src/SVG/SVG.tsx +++ b/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 { xmlns }; + const children: Container[] = []; + return ( + > + { children } + ); };