cluedin-widget/core/components/Layouts/CluedInMiniLayout.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 Col from './Col.jsx';
import Row from './Row.jsx';
import ReactTabs from 'react-tabs';
import wms from '../../../wms/index';
import radium from 'radium';

const Tab = ReactTabs.Tab;
const Tabs = ReactTabs.Tabs;
const TabList = ReactTabs.TabList;
const TabPanel = ReactTabs.TabPanel;

const CluedInMiniLayoutStyle = {
  cell: {
    textAlign: 'center',
    padding: '10px',
    border: '1px solid #ccc',
    margin: '5px',
  },
  selectable: {
    cursor: 'pointer',
    '&:hover': {
      background: '#06979e',
      color: '#fff',
    }
  },
  selected: {
    background: '#06979e',
    color: '#fff',
  },
};

class CluedInMiniLayout extends Component {

  buildTabMenu(tab, index) {
    return ( <Tab key={index}>{tab.displayName}</Tab>);
  }

  getTabMenu(tabs) {
    let result = tabs.map(this.buildTabMenu, this);

    result.unshift(<Tab key={-1}><i style={{fontSize:'20px'}} className="fa fa-arrow-left"></i></Tab>);

    return result;
  }

  getTabContent(tabs) {
    let result = tabs.map(this.buildTab, this);

    result.unshift(<TabPanel key={-1}></TabPanel>);

    return result;
  }

  getTabConfig(tab) {
    return {
      includeSuggestedSearches: tab.includeSuggestedSearches,
      suggestedSearchFilter: tab.suggestedSearchFilter,
      layout: {
        name: tab.layout ? tab.layout.name : ''
      }
    };
  }

  buildTab(tab, tabIndex) {
    let tabConfiguration = this.getTabConfig(tab);
    let tabLayout = wms.getLayout(tabConfiguration.layout.name);

    return (<TabPanel key={tabIndex}>
      <div className="cluedIn_container">
        <CluedInMiniLayout widgetConfiguration={tabConfiguration} layout={tabLayout}></CluedInMiniLayout>
      </div>
    </TabPanel>);
  }

  selectCell(cell) {
    const {onSelectCell} = this.props;

    if (onSelectCell) {
      onSelectCell(cell);
    }
  }

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

    let tabContentPlaceholder;
    let letTabContent;
    let layoutContent;

    if (widgetConfiguration.tabs && widgetConfiguration.tabs[0] && widgetConfiguration.tabs[0].children) {
      tabContentPlaceholder = widgetConfiguration.tabs.place || 'main';

      let tabMenuContent = this.getTabMenu(widgetConfiguration.tabs[0].children);
      let tabListContent = this.getTabContent(widgetConfiguration.tabs[0].children);

      if (tabListContent) {
        letTabContent = (<Row>
          <Col size={12} mobileSize={12}>
            <Tabs selectedIndex={1}>
              <TabList>
                <div style={{textAlign: 'left'}}>
                  {tabMenuContent}
                </div>
              </TabList>
              {tabListContent}
            </Tabs>
          </Col>
        </Row>);
      }
    }

    layoutContent = layout.children.map((row, index)=> {
      if (row.type === "row") {
        return (<Row key={index}>
          {row.columns.map((col, i)=> {
            let styleCellName = [CluedInMiniLayoutStyle.cell, CluedInMiniLayoutStyle.selectable];

            if (selectedCell && col.name === selectedCell.name) {
              styleCellName.push(CluedInMiniLayoutStyle.selected);
            }

            return (<Col key={i} size={col.size} mobileSize={col.mobileSize}>

              <div style={styleCellName} onClick={this.selectCell.bind(this, col)}>{col.name} (row)
              </div>
              <div>{(letTabContent && col.name === tabContentPlaceholder) ? letTabContent : void 0 }</div>
            </Col>);
          })}
        </Row>);
      } else {

        return (<Row key={index}>
          <div key="${index}-container"
               style={[CluedInMiniLayoutStyle.cell, CluedInMiniLayoutStyle.selectable]}>{index} (grid)
          </div>
        </Row>)
      }
    });

    return <div style={CluedInMiniLayoutStyle.cell}>{layoutContent}</div>;
  }
}

export default radium(CluedInMiniLayout);