skyquake/plugins/logging/src/gridWidgets.jsx

   1  /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18 import React from 'react';
  19
  20 /*
  21  Simple helper to avoid 'undefined' in class name rendered in the html
  22
  23  * First incarnation expects additionalClassNames to be a string
  24  * Later, we'll improve to take a string or array
  25
  26  * And move this into a different file/module, uiHelers.js maybe for now
  27 */
  28 function buildClassName(baseClassName, additionalClassNames) {
  29   if (additionalClassNames) {
  30     return baseClassName + " " + additionalClassNames;
  31   } else {
  32    return baseClassName;
  33   }
  34 }
  35
  36 class GridCell extends React.Component {
  37   render() {
  38     const {baseClassName, className, children, ...props} = this.props;
  39     return (
  40       <div className={buildClassName(baseClassName, className)}>
  41       {children}
  42       </div>
  43     );
  44   }
  45 }
  46 GridCell.defaultProps = {
  47   baseClassName: "gridCell"
  48 }
  49
  50 class GridRow extends React.Component {
  51
  52   columnClass(columnClasses, index) {
  53     // starting point for sanity check
  54     if (columnClasses && index >= 0 && index < columnClasses.length) {
  55       return columnClasses[index];
  56     } else {
  57       return null;
  58     }
  59   }
  60   render() {
  61     let self = this;
  62     const {className, cells, columnClasses, ...props} = this.props;
  63     return (
  64       <div className={className} >
  65         {
  66           cells.map( (cell, index) =>
  67             <GridCell key={index}
  68               className={self.columnClass(columnClasses, index)}>{cell}</GridCell>)
  69         }
  70       </div>
  71     );
  72   }
  73 }
  74
  75 /**
  76 * Maybe we can do without GridHead as it is a specialized version of GridRow
  77 */
  78 class GridHead extends React.Component {
  79   render() {
  80     const {className, cellLabels, columnClasses, ...props} = this.props;
  81     return (
  82       <GridRow className={className} cells={cellLabels}
  83       columnClasses={columnClasses} />
  84     );
  85   }
  86 }
  87
  88
  89 class GridBody extends React.Component {
  90   render() {
  91     let self = this;
  92     const {className, rows, columnClasses, ...props} = this.props;
  93     return (
  94       <div className={className}>
  95           {
  96             rows.map( (row, index) =>
  97               <GridRow key={index} className="gridRow"
  98                 cells={row} columnClasses={columnClasses} />
  99             )
 100           }
 101         </div>
 102     );
 103   }
 104 }
 105
 106 /**
 107  *
 108  * TODO: Consider merging cellLabels and columnClasses into array of single structure
 109  */
 110 class Grid extends React.Component {
 111
 112   renderHasNoRows() {
 113     return (<div className="noRows">No Data</div>);
 114   }
 115   render() {
 116     const {baseClassName, className, cellLabels, rows, columnClasses,
 117       ...props} = this.props;
 118
 119     return (
 120       <div className={buildClassName(baseClassName, className)}>
 121         <GridHead className="gridHead"
 122           cellLabels={cellLabels} columnClasses={columnClasses} />
 123         {
 124           (rows) ? <GridBody className="gridBody" rows={rows}
 125             columnClasses={columnClasses} />
 126             : this.renderHasNoRows()
 127         }
 128       </div>
 129     );
 130   }
 131 }
 132 Grid.defaultProps = {
 133   baseClassName: "grid"
 134 }
 135
 136 module.exports = {
 137   Grid: Grid,
 138   GridBody: GridBody,
 139   GridCell: GridCell,
 140   GridHead: GridHead,
 141   GridRow: GridRow
 142 }