skyquake/plugins/logging/src/loggingWidgets.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  // import sass
  21
  22
  23  // --- ---
  24 // Generalized component classes
  25 // --- ---
  26
  27 class DropList extends React.Component {
  28
  29   handleOnChange = (e) => {
  30     this.props.onChange(e.target.value);
  31   }
  32
  33   render() {
  34     const {className, selectedOption, options, ...props} = this.props;
  35     return (
  36       <select className={className} onChange={this.handleOnChange}
  37        value={selectedOption}>
  38         {
  39           options.map(function(op, i) {
  40             return (
  41              <option key={i} value={op}>{op}</option>
  42             );
  43           })
  44         }
  45       </select>
  46     );
  47   }
  48 }
  49 DropList.defaultProps = {
  50   options: [],
  51   onChange: function(e) {
  52     console.log("DropList defaultProps onChange called, e=", e);
  53   }
  54 }
  55
  56 class RadioButtonGroup extends React.Component {
  57
  58   /**
  59    *
  60    * TODO: Enable option to swap order of radio button and label
  61    */
  62   render() {
  63     const {className, items, selectedItem, radioGroupName, onChange, ...props} = this.props;
  64     return (
  65       <div className={className}>
  66         {
  67           items.map(function(item, index) {
  68             return (
  69               <div key={index} className="radioItem">
  70                 <input type="radio" name={radioGroupName}
  71                   value={item.value}
  72                   checked={selectedItem.value == item.value}
  73                   onChange={onChange} />
  74                 <label>{item.label}</label>
  75               </div>
  76             );
  77           })
  78         }
  79       </div>
  80     );
  81   }
  82 }
  83
  84 /**
  85  *
  86  */
  87 // TODO: support externally defined className(s)
  88 class CardSection extends React.Component {
  89
  90   render() {
  91     const {title, children, ...props} = this.props;
  92     return (
  93       <div className="cardSection">
  94         <div className="cardSectionHeader">{title}</div>
  95         {children}
  96       </div>
  97     );
  98   }
  99 }
 100
 101 module.exports = {
 102   DropList: DropList,
 103   RadioButtonGroup: RadioButtonGroup,
 104   CardSection: CardSection
 105 }