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) {
    return tabs.map(this.buildTabMenu, this);
  }

  getTabContent(tabs) {
    return tabs.map(this.buildTab, this);
  }

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

  buildTab(tab, tabIndex) {
    const { onSelectCell, selectedCell, selectedType } = this.props;

    let tabConfiguration = this.getTabConfig(tab);
    let tabLayout = wms.getLayout(tabConfiguration.layout.name);
    let currentPrefix = tab.name;

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

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

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

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

    let tabContentPlaceholder;
    let letTabContent;
    let layoutContent;

    if (widgetConfiguration.tabs && widgetConfiguration.tabs[0] && widgetConfiguration.tabs[0].children) {
      tabContentPlaceholder = widgetConfiguration.tabs[0].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>
              <TabList>
                {tabMenuContent}
              </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];
              let classCellName = 'selectedClass';

              if (selectedCell && col.name === selectedCell.name && prefix === selectedType) {
                styleCellName.push(CluedInMiniLayoutStyle.selected);
                classCellName += ' selected';
              }

              let name = col.name;

              if (prefix) {
                name = `${prefix}.${col.name}`;
              }

              let keyStyle = `${i}${prefix}${col.name}`;

              return (
                <Col key={i} size={col.size} mobileSize={col.mobileSize}>
                  <div className={classCellName} key={keyStyle} style={styleCellName}
                       onClick={this.selectCell.bind(this, col, prefix)}>
                    {name} (row)
                  </div>
                  <div>
                    {(letTabContent && col.name === tabContentPlaceholder) ? letTabContent : void 0 }
                  </div>
                </Col>
              );
            })}
          </Row>
        );
      }

      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);