3 * Copyright 2016 RIFT.IO Inc
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
9 * http://www.apache.org/licenses/LICENSE-2.0
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.
18 import './formControls.scss';
19 import SelectOption from 'widgets/form_controls/selectOption.jsx';
20 import CircleSVG from '../../../node_modules/open-iconic/svg/media-record.svg'
21 import React, {Component} from 'react';
23 export default class Input extends Component {
25 let {label, value, defaultValue, ...props} = this.props;
26 let inputProperties = {
31 let className = `sqTextInput ${props.className}`;
33 if(this.props.required) {
34 isRequired = <span className="required">*</span>
37 inputProperties.defaultValue = defaultValue;
40 inputProperties.pattern = props.pattern;
42 if(props.hasOwnProperty('type') && (props.type.toLowerCase() == 'checkbox')) {
43 inputProperties.checked = props.checked;
44 className = `${className} checkbox`;
46 if (value == undefined) {
51 inputType = <textarea key={props.key} {...inputProperties} value={value} onChange={props.onChange} />
54 inputType = <SelectOption
56 initial={props.initial}
57 defaultValue={defaultValue}
58 options={props.options}
59 onChange={props.onChange}
63 inputType = buildRadioButtons(this.props);
66 inputType = <input key={props.key} type={props.type} {...inputProperties} onChange={props.onChange} placeholder={props.placeholder}/>;
70 displayedValue = null;
72 displayedValue = value.toString();
74 if( props.readonly && props.type == "checkbox" && props.checked ) {
75 displayedValue = <img src={CircleSVG} />
78 <label className={className} style={props.style}>
79 <span> { label } {isRequired}</span>
81 !props.readonly ? inputType : <div className="readonly">{displayedValue}</div>
91 function buildRadioButtons(props) {
92 let className = 'sqCheckBox';
93 if (props.className) {
94 className = `${className} ${props.className}`;
97 <div className={className}>
99 props.options.map((o,i) => {
100 let label = o.label || o;
101 let value = o.value || o;
105 <input type="radio" checked={props.value == value} value={value} onChange={props.onChange} />
115 Input.defaultProps = {
116 onChange: function(e) {
117 console.log(e.target.value, e);
118 console.dir(e.target);