skyquake/framework/widgets/form_controls/input.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 './formControls.scss';
  19 import SelectOption from 'widgets/form_controls/selectOption.jsx';
  20
  21 import React, {Component} from 'react';
  22
  23 export default class Input extends Component {
  24     render() {
  25         let {label, value, defaultValue, ...props} = this.props;
  26         let inputProperties = {
  27             value: value
  28         }
  29         let isRequired;
  30         let inputType;
  31         let className = `sqTextInput ${props.className}`;
  32
  33         if(this.props.required) {
  34            isRequired = <span className="required">*</span>
  35         }
  36         if (defaultValue) {
  37             inputProperties.defaultValue = defaultValue;
  38         }
  39         if (props.pattern) {
  40             inputProperties.pattern = props.pattern;
  41         }
  42         if(props.hasOwnProperty('type') && (props.type.toLowerCase() == 'checkbox')) {
  43             inputProperties.checked = props.checked;
  44             className = `${className} checkbox`;
  45         }
  46         if (value == undefined) {
  47             value = defaultValue;
  48         }
  49         switch(props.type) {
  50             case 'textarea':
  51                 inputType = <textarea key={props.key} {...inputProperties} value={value} onChange={props.onChange} />
  52                 break;
  53             case 'select':
  54                 inputType = <SelectOption
  55                                 key={props.key}
  56                                 initial={props.initial}
  57                                 defaultValue={defaultValue}
  58                                 options={props.options}
  59                                 onChange={props.onChange}
  60                             />
  61                 break;
  62             default:
  63                 inputType = <input key={props.key} type={props.type} {...inputProperties} onChange={props.onChange} placeholder={props.placeholder}/>;
  64         }
  65         let html = (
  66             <label className={className} style={props.style}>
  67               <span> { label } {isRequired}</span>
  68               {
  69                 !props.readonly ? inputType : <div className="readonly">{value}</div>
  70               }
  71
  72             </label>
  73         );
  74         return html;
  75     }
  76 }
  77
  78
  79 function buildDropDown() {
  80
  81 }
  82
  83 Input.defaultProps = {
  84     onChange: function(e) {
  85         console.log(e.target.value, e);
  86         console.dir(e.target);
  87     },
  88     label: '',
  89     defaultValue: null,
  90     type: 'text',
  91     readonly: false,
  92     style:{},
  93     className: ''
  94
  95 }
  96