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 import CheckSVG from '../../../node_modules/open-iconic/svg/check.svg'
  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 tester = null;
  32         let className = `sqTextInput ${props.className}`;
  33
  34         if(this.props.required) {
  35            isRequired = <span className="required">*</span>
  36         }
  37         if (defaultValue) {
  38             inputProperties.defaultValue = defaultValue;
  39         }
  40         if (props.pattern) {
  41             inputProperties.pattern = props.pattern;
  42             tester = new RegExp(props.pattern);
  43         }
  44         if(props.hasOwnProperty('type') && (props.type.toLowerCase() == 'checkbox')) {
  45             inputProperties.checked = props.checked;
  46             className = `${className} checkbox`;
  47         }
  48         if (value == undefined) {
  49             value = defaultValue;
  50         }
  51         switch(props.type) {
  52             case 'textarea':
  53                 inputType = <textarea key={props.key} {...inputProperties} value={value} onChange={props.onChange} />
  54                 break;
  55             case 'select':
  56                 inputType = <SelectOption
  57                                 key={props.key}
  58                                 initial={props.initial}
  59                                 defaultValue={defaultValue}
  60                                 options={props.options}
  61                                 onChange={props.onChange}
  62                             />
  63                 break;
  64             case 'radiogroup':
  65                 inputType = buildRadioButtons(this.props);
  66                 break;
  67             default:
  68                 inputType = <input key={props.key} type={props.type} {...inputProperties} onChange={props.onChange} placeholder={props.placeholder}/>;
  69         }
  70         let displayedValue;
  71         if(value === null) {
  72             displayedValue = null;
  73         } else {
  74             displayedValue = value.toString();
  75         }
  76         if( props.readonly && props.type == "checkbox" && props.checked ) {
  77             displayedValue = <img src={CheckSVG} />
  78         }
  79
  80         if( props.readonly && props.type == "radiogroup" && props.readonlydisplay ) {
  81             displayedValue = props.readonlydisplay
  82         }
  83
  84         let html = (
  85             <label className={className} style={props.style}>
  86               <span> { label } {isRequired}</span>
  87               {
  88                 !props.readonly ? inputType : <div className="readonly">{displayedValue}</div>
  89               }
  90               {
  91                  !props.readonly && tester && value && !tester.test(value) ? <span className="invalid">The Value you entered is invalid</span> : null
  92               }
  93             </label>
  94         );
  95         return html;
  96     }
  97 }
  98
  99
 100 function buildRadioButtons(props) {
 101     let className = 'sqCheckBox';
 102     return(
 103        <div className={className}>
 104             {
 105                 props.options.map((o,i) => {
 106                     let label = o.label || o;
 107                     let value = o.value || o;
 108                     return (
 109                         <label key={i}>
 110                             {label}
 111                             <input type="radio" checked={props.value == value} value={value} onChange={props.onChange} />
 112                         </label>
 113                     )
 114                 })
 115             }
 116        </div>
 117
 118     )
 119 }
 120
 121 Input.defaultProps = {
 122     onChange: function(e) {
 123         console.log(e.target.value, e);
 124         console.dir(e.target);
 125     },
 126     label: '',
 127     defaultValue: null,
 128     type: 'text',
 129     readonly: false,
 130     style:{},
 131     className: ''
 132
 133 }
 134