Example ReactJS app using some custom components

App.jsx

'use strict'

import React, { Component } from 'react'
import PageLoader from './PageLoader'
import IconFactory from './IconFactory'
import Tree from 'react-ui-tree'
//import Panel from './Panel'
import Header from './Header'
import Sidebar from './Sidebar'
import TreeView from './TreeView'

//import Console from 'react-console-wrapper'

//import ReactBootstrap, { Button, ButtonGroup, DropdownButton, MenuItem, ButtonToolbar } from 'react-bootstrap';
import ReactBootstrap, { 
  Button, ButtonGroup, DropdownButton, ButtonToolbar,  OverlayTrigger, Tooltip, Popover,
  MenuItem, Nav, NavItem, Breadcrumb, PageHeader, Table, Panel, 
  ListGroup, ListGroupItem, Jumbotron, Grid, Row, Col, Alert, Glyphicon, 
} from 'react-bootstrap'

import {
  Stat, 
  //StatRow, 
  ItemsWithSeparator 
} from './Widgets'

import FontAwesome from './FontAwesome'
import cx from 'classnames'
import _ from './ReactMixins'
import ReactDOM from 'react-dom'
//import * as d3 from 'd3'

import './assets/plugins/bootstrap/css/bootstrap.min.css'
import './assets/plugins/font-awesome/css/font-awesome.min.css'
import './assets/css/animate.min.css'
import './assets/css/style.css'
import './assets/css/style-responsive.min.css'
import './assets/css/theme/default.css'
import './assets/css/font.css'
import './assets/css/icons.css'
import './assets/plugins/jstree/demo/filebrowser/data/root/assets/bootstrap/css/bootstrap-theme.css'
import './assets/plugins/jstree/dist/themes/default/style.min.css'


const Console = require('react-console-wrapper')

//var cx = require('classnames');
//var React = require('react');
//var ReactDOM = require('react-dom');

require('./tmp/react-ui-tree.less')
require('./tmp/theme.less')
require('./tmp/app.less')

//var Tree = require('../lib/react-ui-tree.js');
//let treedata = require('./meta/treedata');

//const _ = require('./ReactMixins')

console.log('FontAwesome.metadata:',FontAwesome.metadata)

function handleClick() {
  alert('You have clicked on me');
}

const Lbl = props => {
  let title = null

  if ( props.children )
    title = props.children
    
  else if ( props.title )
    title = props.title

  else
    return false

  return ( <span className="label label-theme m-l-5">{title}</span> )
}

class PageContent extends Component {

  constructor(props) {
    super(props)
    this.state = {}

    this.state.myConst = 'works!';
  }

  render() {
    const BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger'];
    function renderDropdownButton(title, i) {
      return (
        <DropdownButton pullRight bsStyle={title.toLowerCase()} title={title} key={i} id={`dropdown-basic-${i}`}>
          <MenuItem eventKey="1">Action</MenuItem>
          <MenuItem eventKey="2">Another action</MenuItem>
          <MenuItem eventKey="3" active>Active Item</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey="4">Separated link</MenuItem>
        </DropdownButton>
      );
    }

    const perRow = 8
    let rowCells = []

    const iconRows = _.chunk( FontAwesome.metadata.icons, perRow )

    const tooltip = (
      <Tooltip id="tooltip"><strong>Holy guacamole!</strong> Check this info.</Tooltip>
    );

    const iconTooltip = (iconName, size) => {
      let iconClasses = [ 
        FontAwesome.metadata.baseClass, 
        FontAwesome.metadata.prefix+iconName
      ]

      const tooltipData = {
        name: iconName
      }

      if ( size && Object.values(FontAwesome.metadata.sizes).indexOf( size ) !== -1 ){
        iconClasses.push( FontAwesome.metadata.prefix + size )
        tooltipData.size = size
      }


      return (
        <Popover id="popover-trigger-hover-focus" title={iconName}>
          <dl className="dl-horizontal2 full-width">
            {_.transform(tooltipData, (result, value, key) => {
              result.push( <dt className="half-width">{key}</dt> )
              result.push( <dd className="half-width">{value}</dd> )
            }, [])}
          </dl>
        </Popover>
      )
  
    }

    const popoverHoverFocus = (
      <Popover id="popover-trigger-hover-focus" title="Popover top">
        <strong>Holy guacamole!</strong> Check this info.
      </Popover>
    );

    const title = (
      <h3>Panel title</h3>
    );

    let cellIdx = 0


    const IconTrigger = props => {
      let _classes = [ 
        FontAwesome.metadata.baseClass, 
        FontAwesome.metadata.prefix + props.name
      ]

      if ( props.size  && Object.values(FontAwesome.metadata.sizes).indexOf( props.size ) !== -1 )
        _classes.push( FontAwesome.metadata.prefix + props.size )

      return ( 
        <OverlayTrigger placement="top" trigger={['hover', 'focus']} overlay={iconTooltip( props.name, props.size )}>
          <i className={"margin-2 " + _classes.join(' ')}></i> 
        </OverlayTrigger> 
      )
    }

    return (
      <div id="content" className="content">
        <Breadcrumb className="pull-right">
          <Breadcrumb.Item href="#">
            Home
          </Breadcrumb.Item>
          <Breadcrumb.Item href="http://getbootstrap.com/components/#breadcrumbs">
            UI Elements
          </Breadcrumb.Item>
          <Breadcrumb.Item active>
            Cool Shit
          </Breadcrumb.Item>
        </Breadcrumb>

        <PageHeader>
          Example page header 
          <small>Subtext for header</small>
        </PageHeader>
        
        <div className="row">
          <Stat 
            title     = "Todays Visits" 
            color     = "blue-grey" 
            value     = "123"
            desc      = "Better than last week (70.1%)" 
            icon      = "globe"
            type      = "percentage" 
            interval  = "3000" />
          <Stat 
            title     = "Todays Profit" 
            color     = "blue"
            value     = "123950" 
            desc      = "Better than last week" 
            icon      = "tags" 
            interval  = "30" />
          <Stat 
            title     = "New Orders"
            color     = "cyan"
            value     = "503242"
            desc      = "Blah blah"
            icon      = "shopping-cart" 
            interval  = "30" />
          <Stat 
            title     = "New Comments"
            value     = "3463"
            desc      = "Better than..."
            interval  = "30" />
        </div>
        <!-- Rendered HTML: https://gist.github.com/jhyland87/7cd50f81fc1bb82ec2ba9aafeb6040cf -->

        <Panel header="Foobar">
          <Table striped bordered condensed hover className="full-width">
            <tbody>
              <tr>
                <td className="half-width">
                  <div className="inspector">
                    <button onClick={this.updateTree}>update tree</button>
                    <pre>
                    {JSON.stringify(this.state.tree, null, '  ')}
                    </pre>
                  </div>
                </td>
                <td className="half-width">
                  <div className="tree">
                    <TreeView
                      paddingLeft={20}              // left padding for children nodes in pixels 
                      tree={require('./meta/treedata')}        // tree object 
                      onChange={this.handleChange}  // onChange(tree) tree object changed 
                      renderNode={this.renderNode}  // renderNode(node) return react element 
                    />
                  </div>
                </td>
              </tr>
            </tbody>
          </Table>
        </Panel>

        <Grid>
          <Row className="show-grid">
            <Col md={6} mdPush={6}>
              Hello
            </Col>
            <Col md={6} mdPull={6}>
              World!
            </Col>
          </Row>
        </Grid>

        <Panel collapsible defaultExpanded header="Icon Examples">
          Some default panel content here.
          <ListGroup fill>

            <ListGroupItem>
              <h3>Font Awesome</h3>
              <IconFactory type="fontawesome" icon="calendar" />
            </ListGroupItem>

            <ListGroupItem>
              <h3>Simple Line</h3>
              <IconFactory type="simpleline" icon="calendar" />
            </ListGroupItem>

            <ListGroupItem>
              <h3>Ion Icons</h3>
              <IconFactory type="ionicons" icon="calendar" />
            </ListGroupItem>

            <ListGroupItem>
              <h3>Glyph Icons</h3>
              <IconFactory type="glyphicons" icon="calendar" />
            </ListGroupItem>

          </ListGroup>
          Some more panel content here.
        </Panel>

        <Panel header="Table Examples" bsStyle="info" collapsible>
          <h3>Table with striped bordered condensed hover</h3>
          <Table striped bordered condensed hover>
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td colSpan="2">Larry the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </Table>

          <h3>Responsive Table</h3>
          <Table responsive>
            <thead>
              <tr>
                <th>#</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
              </tr>
            </tbody>
          </Table>
        </Panel>

        <Panel header="Font Awesome Icons" collapsible defaultExpanded>

          <FontAwesome icon="linux" size="0" color="red" />
          <FontAwesome icon="linux" size="1" color="green" />
          <FontAwesome icon="linux" size="2" color="blue" />
          <FontAwesome icon="linux" size="3" color="yellow" />
          <FontAwesome icon="linux" size="4" color="cyan" />


          <FontAwesome icon="linux" color="black" />
          <FontAwesome icon="linux" size="lg" color="default" />
          <FontAwesome icon="linux" size="2x" color="blue" />
          <FontAwesome icon="linux" size="3x" color="yellow" />
          <FontAwesome icon="linux" size="4x" color="red" />


          <Panel header="Select Icon Size">
            <Table striped bordered condensed hover>
              <tbody>
                <tr className="cells-content-center">
                  <td><i className="margin-2 fa fa-linux fa-lg"></i></td>
                  <td><i className="fa fa-2x fa-linux"></i></td>
                  <td><i className="fa fa-2x fa-linux"></i></td>
                  <td><i className="fa fa-2x fa-linux"></i></td>
                  <td><i className="fa fa-2x fa-linux"></i></td>
                </tr>
                <tr className="cells-content-center">
                  <td>Regular</td>
                  <td>Large</td>
                  <td>2x Large</td>
                  <td>3x Large</td>
                  <td>4x Large</td>
                </tr>
              </tbody>
            </Table>

          </Panel>

          <Table className="m-b-0" striped bordered condensed hover>
            <tbody>
              {iconRows.map(( iconRow, rowIdx ) => {
                return (<tr>{iconRow.map(( iconName, iconIdx ) => {
                  return (<td className="text-center">
                    <span className="media-object">
                      <IconTrigger name={iconName} />
                      <IconTrigger name={iconName} size="lg"/>
                      <IconTrigger name={iconName} size="2x"/>
                    </span>
                    <small>fa-{iconName}</small>
                  </td>)
                })}</tr>)
              })}
            </tbody>
          </Table>

          <ButtonToolbar>
            <ButtonGroup>
            <Button><Glyphicon glyph="align-left" /></Button>
            <Button><Glyphicon glyph="align-center" /></Button>
            <Button><Glyphicon glyph="align-right" /></Button>
            <Button><Glyphicon glyph="align-justify" /></Button>
          </ButtonGroup>
        </ButtonToolbar>
        <ButtonToolbar>
          <ButtonGroup>
            <Button bsSize="large"><Glyphicon glyph="star" /> Star</Button>
            <Button><Glyphicon glyph="star" /> Star</Button>
            <Button bsSize="small"><Glyphicon glyph="star" /> Star</Button>
            <Button bsSize="xsmall"><Glyphicon glyph="star" /> Star</Button>
          </ButtonGroup>
          </ButtonToolbar>
        </Panel>



        <Panel header="Grid" collapsible>
          <Grid>
            <Row className="show-grid">
              <Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>
              <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
            </Row>

            <Row className="show-grid">
              <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
              <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
              <Col xsHidden md={4}><code>&lt;{'Col xsHidden md={4}'} /&gt;</code></Col>
            </Row>

            <Row className="show-grid">
              <Col xs={6} xsOffset={6}><code>&lt;{'Col xs={6} xsOffset={6}'} /&gt;</code></Col>
            </Row>

            <Row className="show-grid">
              <Col md={6} mdPush={6}><code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code></Col>
              <Col md={6} mdPull={6}><code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code></Col>
            </Row>
          </Grid>
        </Panel>

        <PageHeader>Panel Types <small>Types: <i>default primary success info warning danger</i></small></PageHeader>
        <Panel header="Panel Style: default" collapsible bsStyle="default" >
          Panel Content
        </Panel>
        <Panel header="Panel Style: primary" collapsible bsStyle="primary" >
          Panel Content
        </Panel>
        <Panel header="Panel Style: success" collapsible bsStyle="success" >
          Panel Content
        </Panel>
        <Panel header="Panel Style: info" collapsible bsStyle="info" >
          Panel Content
        </Panel>
         <Panel header="Panel Style: warning" collapsible bsStyle="warning" >
          Panel Content
        </Panel>
         <Panel header="Panel Style: danger" collapsible bsStyle="danger" >
          Panel Content
        </Panel>

        <Panel header="Panel Style: info" collapsible bsStyle="info" >
          <Panel  header={title}>
            Panel content
          </Panel>

          <Panel header={title} bsStyle="primary">
            Panel content
          </Panel>

          <Panel header={title} bsStyle="success">
            Panel content
          </Panel>

          <Panel header={title} bsStyle="info">
            Panel content
          </Panel>

          <Panel header={title} bsStyle="warning">
            Panel content
          </Panel>

          <Panel header={title} bsStyle="danger">
            Panel content
          </Panel>

        </Panel>

        <Panel header="Table Test" bsStyle="inverse" collapsible defaultExpanded>
          <Table striped bordered condensed hover>
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td colSpan="2">Larry the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </Table>
        </Panel>

        <ContentRow>{this.props.children}</ContentRow>
        
        <ButtonToolbar>{BUTTONS.map(renderDropdownButton)}</ButtonToolbar>

        <ButtonToolbar>
          {/* Standard button */}
          <Button>Default</Button>

          {/* Provides extra visual weight and identifies the primary action in a set of buttons */}
          <Button bsStyle="primary">Primary</Button>

          {/* Indicates a successful or positive action */}
          <Button bsStyle="success">Success</Button>

          {/* Contextual button for informational alert messages */}
          <Button bsStyle="info">Info</Button>

          {/* Indicates caution should be taken with this action */}
          <Button bsStyle="warning">Warning</Button>

          {/* Indicates a dangerous or potentially negative action */}
          <Button bsStyle="danger">Danger</Button>

          {/* Deemphasize a button by making it look like a link while maintaining button behavior */}
          <Button bsStyle="link">Link</Button>
        </ButtonToolbar>
      </div>
    )
  }
}


class ContentRow extends Component {
  render(){
    return (
      <div className="row">
        <div className="col-md-12">
          <div className="panel panel-inverse">
           
            <div className="panel-body">
              {this.props.children}
            </div>
          </div>
        </div>
      </div>
    )
  }
}

class BreadCrumbs extends Component {
  static Crumb (props){
    return ( <a href={props.href}>{_.upperFirst(props.children)}</a> )
  }

  render(){
    var ch = this.props.children
    return (
      <ol className={ 'breadcrumb pull-' + _.defaultTo( this.props.pull, 'right' ) }>
        {ch.map(function(child, idx){
          return ( ch.length === idx+1 )
            ? <li className="active">{ _.upperFirst( child.props.children ) }</li>
            : <li>{child}</li>
        })}
      </ol>
    )
  }
}

export default PageContent