3 * Copyright 2016 RIFT.IO Inc
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
9 * http://www.apache.org/licenses/LICENSE-2.0
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.
18 import React from 'react';
21 Simple helper to avoid 'undefined' in class name rendered in the html
23 * First incarnation expects additionalClassNames to be a string
24 * Later, we'll improve to take a string or array
26 * And move this into a different file/module, uiHelers.js maybe for now
28 function buildClassName(baseClassName, additionalClassNames) {
29 if (additionalClassNames) {
30 return baseClassName + " " + additionalClassNames;
36 class GridCell extends React.Component {
38 const {baseClassName, className, children, ...props} = this.props;
40 <div className={buildClassName(baseClassName, className)}>
46 GridCell.defaultProps = {
47 baseClassName: "gridCell"
50 class GridRow extends React.Component {
52 columnClass(columnClasses, index) {
53 // starting point for sanity check
54 if (columnClasses && index >= 0 && index < columnClasses.length) {
55 return columnClasses[index];
62 const {className, cells, columnClasses, ...props} = this.props;
64 <div className={className} >
66 cells.map( (cell, index) =>
68 className={self.columnClass(columnClasses, index)}>{cell}</GridCell>)
76 * Maybe we can do without GridHead as it is a specialized version of GridRow
78 class GridHead extends React.Component {
80 const {className, cellLabels, columnClasses, ...props} = this.props;
82 <GridRow className={className} cells={cellLabels}
83 columnClasses={columnClasses} />
89 class GridBody extends React.Component {
92 const {className, rows, columnClasses, ...props} = this.props;
94 <div className={className}>
96 rows.map( (row, index) =>
97 <GridRow key={index} className="gridRow"
98 cells={row} columnClasses={columnClasses} />
108 * TODO: Consider merging cellLabels and columnClasses into array of single structure
110 class Grid extends React.Component {
113 return (<div className="noRows">No Data</div>);
116 const {baseClassName, className, cellLabels, rows, columnClasses,
117 ...props} = this.props;
120 <div className={buildClassName(baseClassName, className)}>
121 <GridHead className="gridHead"
122 cellLabels={cellLabels} columnClasses={columnClasses} />
124 (rows) ? <GridBody className="gridBody" rows={rows}
125 columnClasses={columnClasses} />
126 : this.renderHasNoRows()
132 Grid.defaultProps = {
133 baseClassName: "grid"