skyquake/framework/widgets/form_controls/selectOption.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 export default class SelectOption extends React.Component {
  21   constructor(props){
  22     super(props);
  23     this.state = {};
  24   }
  25   handleOnChange = (e) => {
  26     this.props.onChange(e);
  27   }
  28   render() {
  29     let html;
  30     let defaultValue = this.props.defaultValue;
  31     let options =  this.props.options && this.props.options.map(function(op, i) {
  32     let value;
  33     let label;
  34     if(typeof(op) == 'object') {
  35       value = JSON.stringify(op.value);
  36       label = op.label;
  37     } else {
  38       value = op;
  39       label = op;
  40     }
  41
  42       return <option key={i} value={JSON.stringify(value)}>{label}</option>
  43     }) || [];
  44     if (this.props.initial) {
  45       options.unshift(<option key='blank' value={JSON.stringify(this.props.defaultValue)}></option>);
  46     }
  47     html = (
  48         <label key={this.props.key} className={this.props.className}>
  49             <span>{this.props.label}</span>
  50             {
  51               this.props.readonly ? defaultValue
  52               : (
  53                   <select
  54                     className={this.props.className}
  55                     onChange={this.handleOnChange}
  56                     value={JSON.stringify(this.props.value)}
  57                     defaultValue={JSON.stringify(defaultValue)}>
  58                       {
  59                        options
  60                       }
  61                   </select>
  62                 )
  63             }
  64         </label>
  65     );
  66     return html;
  67   }
  68 }
  69 SelectOption.defaultProps = {
  70   /**
  71    * [options description]
  72    * @type {Array} - Expects items to contain objects with the properties 'label' and 'value' which are both string types. Hint: JSON.stringify()
  73    */
  74   options: [],
  75   onChange: function(e) {
  76     console.log(e.target.value)
  77     console.dir(e)
  78   },
  79   readonly: false,
  80   /**
  81    *  Selected or default value
  82
  83    * @type {[type]}
  84    */
  85   defaultValue: null,
  86   /**
  87    * True if first entry in dropdown should be blank
  88    * @type {Boolean}
  89    */
  90   initial: false,
  91   label: null
  92 }