svg-layout-designer-react/src/Components/SVG/Elements/Container.tsx

import * as React from 'react';
import { getDepth, IContainerModel } from '../../../Interfaces/ContainerModel';
import { Dimension } from './Dimension';

export interface IContainerProps {
  model: IContainerModel
}

const GAP = 50;

export class Container extends React.PureComponent<IContainerProps> {
  /**
   * Render the container
   * @returns Render the container
   */
  public render(): React.ReactNode {
    const containersElements = this.props.model.children.map(child => <Container key={`container-${child.properties.id}`} model={child} />);
    const xText = Number(this.props.model.properties.width) / 2;
    const yText = Number(this.props.model.properties.height) / 2;
    const transform = `translate(${Number(this.props.model.properties.x)}, ${Number(this.props.model.properties.y)})`;

    // g style
    const defaultStyle = {
      transitionProperty: 'all',
      transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
      transitionDuration: '150ms'
    } as React.CSSProperties;

    // Rect style
    const style = Object.assign(
      JSON.parse(JSON.stringify(defaultStyle)),
      this.props.model.properties
    );
    style.x = 0;
    style.y = 0;
    delete style.height;
    delete style.width;

    // Dimension props
    const id = `dim-${this.props.model.properties.id}`;
    const xStart: number = 0;
    const xEnd = Number(this.props.model.properties.width);
    const y = -(GAP * (getDepth(this.props.model) + 1));
    const strokeWidth = 1;
    const text = (this.props.model.properties.width ?? 0).toString();

    return (
      <g
        style={defaultStyle}
        transform={transform}
        key={`container-${this.props.model.properties.id}`}
      >
        <Dimension
          id={id}
          xStart={xStart}
          xEnd={xEnd}
          y={y}
          strokeWidth={strokeWidth}
          text={text}
        />
        <rect
          width={this.props.model.properties.width}
          height={this.props.model.properties.height}
          style={style}
        >
        </rect>
        <text
          x={xText}
          y={yText}
        >
          {this.props.model.properties.id}
        </text>
        { containersElements }
      </g>
    );
  }
}