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.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}>
  49             {this.props.label}
  50             {
  51               this.props.readonly ? defaultValue
  52               : (
  53                   <select
  54                     className={this.props.className}
  55                     onChange={this.handleOnChange}
  56                     defaultValue={JSON.stringify(defaultValue)}>
  57                       {
  58                        options
  59                       }
  60                   </select>
  61                 )
  62             }
  63         </label>
  64     );
  65     return html;
  66   }
  67 }
  68 SelectOption.defaultProps = {
  69   /**
  70    * [options description]
  71    * @type {Array} - Expects items to contain objects with the properties 'label' and 'value' which are both string types. Hint: JSON.stringify()
  72    */
  73   options: [],
  74   onChange: function(e) {
  75     console.log(e.target.value)
  76     console.dir(e)
  77   },
  78   readonly: false,
  79   /**
  80    *  Selected or default value
  81
  82    * @type {[type]}
  83    */
  84   defaultValue: null,
  85   /**
  86    * True if first entry in dropdown should be blank
  87    * @type {Boolean}
  88    */
  89   initial: false,
  90   label: null
  91 }