cluedin-widget/core/components/generics/Gutter.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { Component } from 'react';

export default class Gutter extends Component {
  static defaultProps = {
    style: {},
  };

  render() {
    const {
      type,
      top,
      bottom,
      left,
      right,
      style,
      center,
    } = this.props;

    let size = '15px';
    let result;
    let topSize = 0;
    let bottomSize = 0;
    let leftSize = 0;
    let rightSize = 0;
    let align = 'left';

    if (type === 'small') {
      size = '5px';
    }

    if (top) {
      topSize = size;
    }

    if (bottom) {
      bottomSize = size;
    }

    if (left) {
      leftSize = size;
    }

    if (right) {
      rightSize = size;
    }

    if (!top && !bottom && !left && !right) {
      topSize = size;
      rightSize = size;
      bottomSize = size;
      leftSize = size;
    }

    if (top && bottom && left && right) {
      topSize = size;
      rightSize = size;
      bottomSize = size;
      leftSize = size;
    }

    result = `${topSize} ${rightSize} ${bottomSize} ${leftSize}`;

    if (center) {
      align = 'center';
    }

    const styleResult = Object.assign(style, { margin: result, textAlign: align });

    return (<div style={styleResult}>
      {this.props.children}
    </div>);
  }
}