cluedin-widget/core/components/WidgetManagment/subPage/LayoutMain.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';
import CurrentWidgetList from '../components/CurrentWidgetList.jsx';
import CurrentLayout from '../components/CurrentLayout.jsx';
import CluedInMiniLayout from '../../Layouts/CluedInMiniLayout.jsx';
import RaisedButton from 'material-ui/RaisedButton';
import AddIcon from 'material-ui/svg-icons/content/add-circle-outline';

const LayoutMainStyle = {
  title: {
    margin: '0 0 15px 0',
    padding: '10px 0 5px 0',
    fontSize: '16px',
    borderBottom: '1px solid #ccc',
  },
};

class LayoutMain extends Component {

  render() {
    const {
      widgetConfiguration,
      layout,
      onAddWidgetClick,
      onDeleteWidget,
    } = this.props;

    const miniLayoutPreview = (<div>
      <h4 style={LayoutMainStyle.title}>Layout Preview</h4>
      <CluedInMiniLayout layout={layout} widgetConfiguration={widgetConfiguration}></CluedInMiniLayout>
    </div>);

    return (<div>
      <h4 style={LayoutMainStyle.title}>Current Widget List</h4>
      <RaisedButton onClick={onAddWidgetClick}
                    label="Add Widget"
                    primary={true}
                    icon={<AddIcon/>}
                    labelPosition="after"></RaisedButton>
      <CurrentWidgetList onDeleteWidget={onDeleteWidget} widgets={widgetConfiguration.widgets}></CurrentWidgetList>
      <h4 style={LayoutMainStyle.title}>Current Layout</h4>
      <CurrentLayout layout={layout}></CurrentLayout>
    </div>);
  }
}

export default LayoutMain;