Allow enable/disable on create. Enabled=>Status header

[osm/UI.git] / skyquake / framework / widgets / form_controls / input.jsx

diff --git a/skyquake/framework/widgets/form_controls/input.jsx b/skyquake/framework/widgets/form_controls/input.jsx
index b758242..9b5e685 100644 (file)
--- a/skyquake/framework/widgets/form_controls/input.jsx
+++ b/skyquake/framework/widgets/form_controls/input.jsx
@@ -17,7 +17,7 @@
  */
 import './formControls.scss';
 import SelectOption from 'widgets/form_controls/selectOption.jsx';
-
+import CircleSVG from '../../../node_modules/open-iconic/svg/media-record.svg'
 import React, {Component} from 'react';
 
 export default class Input extends Component {
@@ -59,14 +59,31 @@ export default class Input extends Component {
                                 onChange={props.onChange}
                             />
                 break;
+            case 'radiogroup':
+                inputType = buildRadioButtons(this.props);
+                break;
             default:
                 inputType = <input key={props.key} type={props.type} {...inputProperties} onChange={props.onChange} placeholder={props.placeholder}/>;
         }
+        let displayedValue;
+        if(value === null) {
+            displayedValue = null;
+        } else {
+            displayedValue = value.toString();
+        }
+        if( props.readonly && props.type == "checkbox" && props.checked ) {
+            displayedValue = <img src={CircleSVG} />
+        }
+
+        if( props.readonly && props.type == "radiogroup" && props.readonlydisplay ) {
+            displayedValue = props.readonlydisplay
+        }
+
         let html = (
             <label className={className} style={props.style}>
               <span> { label } {isRequired}</span>
               {
-                !props.readonly ? inputType : <div className="readonly">{value}</div>
+                !props.readonly ? inputType : <div className="readonly">{displayedValue}</div>
               }
 
             </label>
@@ -76,8 +93,28 @@ export default class Input extends Component {
 }
 
 
-function buildDropDown() {
+function buildRadioButtons(props) {
+    let className = 'sqCheckBox';
+    if (props.className) {
+        className = `${className} ${props.className}`;
+    }
+    return(
+       <div className={className}>
+            {
+                props.options.map((o,i) => {
+                    let label = o.label || o;
+                    let value = o.value || o;
+                    return (
+                        <label key={i}>
+                            {label}
+                            <input type="radio" checked={props.value == value} value={value} onChange={props.onChange} />
+                        </label>
+                    )
+                })
+            }
+       </div>
 
+    )
 }
 
 Input.defaultProps = {