skyquake/framework/widgets/dashboard_card/dashboard_card.jsx

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 import React from 'react';
  20 import './dashboard_card.scss';
  21
  22 var cardClass = 'dashboardCard'//classSet(this.props.class);
  23
  24 var CardHeader = React.createClass({
  25   render() {
  26     var cardClassHeader = cardClass + '_header';
  27     if(this.props.className) {
  28         cardClassHeader += ' ' + this.props.className + '_header';
  29     }
  30    return (
  31     <header className={cardClassHeader}>
  32       <h3>
  33         {this.props.title}
  34       </h3>
  35     </header>
  36     )
  37   }
  38 });
  39  CardHeader.defaultProps = {
  40   title: ' Loading...'
  41  }
  42
  43
  44
  45 var dashboardCard = React.createClass({
  46     componentDidMount: function() {
  47
  48     },
  49     getDefaultProps: function() {
  50       return {
  51         isHidden: false
  52       }
  53     },
  54     render() {
  55       var cardClassWrapper = cardClass;
  56       var cardClassContent = cardClass + '_content';
  57       var cardClassContentBody = cardClassContent + '-body';
  58       var hasHeader;
  59       var cardClasses = [];
  60       if(this.props.className) {
  61         cardClasses = this.props.className.split(' ');
  62         cardClasses.map(function(c, i) {
  63           cardClassWrapper += ' ' + c;
  64           cardClassContent += ' ' + c + '_content';
  65           cardClassContentBody += ' ' + c + '-body';
  66         })
  67
  68       }
  69       let closeCard = null;
  70     if (this.props.showHeader) {
  71       hasHeader = <CardHeader className={this.props.className} title={this.props.title}/>;
  72     };
  73     if (this.props.closeCard) {
  74       closeCard = this.props.closeCard;
  75     }
  76     return (
  77         <div className={cardClassWrapper} style={{display: this.props.isHidden ? 'none':'inherit'}}>
  78           {closeCard}
  79           <i className="corner-accent top left"></i>
  80           <i className="corner-accent top right"></i>
  81             {hasHeader}
  82             <div className={cardClassContent}>
  83               <div className={cardClassContentBody}>
  84                 {this.props.children}
  85               </div>
  86             </div>
  87           <i className="corner-accent bottom left"></i>
  88           <i className="corner-accent bottom right"></i>
  89         </div>
  90       )
  91   }
  92 })
  93
  94
  95 // class DashboardCard extends React.Component {
  96 //   constructor(props) {
  97 //     super(props)
  98 //   }
  99 //   render() {
 100
 101 //   }
 102 // }
 103
 104
 105 export default dashboardCard;