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