DM-5129: Create InputField for generic use cases.

src/firefly/js/ui/InputField.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import {InputFieldView} from './InputFieldView.jsx';
+
+
+export class InputField extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            fieldKey: 'undef',
+            valid: true,
+            message:'',
+            value: props.value
+        };
+
+        this.onChange = this.onChange.bind(this);
+    }
+
+    onChange(e) {
+        var {fieldKey, validator, onChange, label} = this.props;
+        const value = e.target.value;
+        var {valid, message} = validator ? validator(value) : {valid:true, message:''};
+        message = valid ? '' : (label + message).replace('::', ':');
+        const nState = {fieldKey, valid, message, value};
+        onChange && onChange(nState);
+        this.setState(nState);
+    }
+
+    render() {
+
+        var {label, labelWidth, tooltip, visible, inline, size} = this.props;
+        var {valid, value, message} = this.state;
+
+        return (
+            <InputFieldView
+                style={{}}
+                valid={valid}
+                visible= {visible}
+                message={message}
+                onChange={this.onChange}
+                value={value}
+                tooltip={tooltip}
+                label={label}
+                inline={inline}
+                labelWidth={labelWidth}
+                size={size}
+            />
+        );
+
+    };
+
+}
+
+
+InputField.propTypes = {
+    fieldKey: React.PropTypes.string,
+    label: React.PropTypes.string,
+    labelWidth: React.PropTypes.string,
+    validator: React.PropTypes.func,
+    tooltip: React.PropTypes.string,
+    visible: React.PropTypes.bool,
+    inline: React.PropTypes.bool,
+    size: React.PropTypes.number,
+    value: React.PropTypes.string,
+    onChange: React.PropTypes.func
+};
+
+InputField.defaultProps = {
+    labelWidth: '',
+    value: '',
+    inline: false,
+    visible: true
+};
+
+

src/firefly/js/ui/InputFieldView.jsx

@@ -89,7 +89,7 @@ export class InputFieldView extends Component {
 
     render() {
         var {hasFocus}= this.state;
-        var {visible,label,tooltip,labelWidth,value,style,valid,onChange}= this.props;
+        var {visible,label,tooltip,labelWidth,value,style,valid,size,onChange}= this.props;
         if (!visible) return null;
         return (
             <div style={{whiteSpace:'nowrap', display: this.props.inline?'inline-block':'block'} }>
@@ -101,6 +101,7 @@ export class InputFieldView extends Component {
                        onBlur={ () => this.setState({hasFocus:false, infoPopup:false})}
                        value={value}
                        title={tooltip}
+                       size={size}
                 />
                 {this.makeWarningArea(!valid)}
             </div>
@@ -118,12 +119,14 @@ InputFieldView.propTypes= {
     labelWidth: PropTypes.number,
     style: PropTypes.object,
     value   : PropTypes.string.isRequired,
+    size : PropTypes.number,
     onChange : PropTypes.func.isRequired
 };
 
 InputFieldView.defaultProps= {
     valid : true,
     visible : true,
+    size : 20,
     message: ''
 };
 

src/firefly/js/util/Validate.js

@@ -28,10 +28,9 @@ var typeInject= {
 
 
 var makePrecisionStr= function(value,precision) {
-    if (value !== undefined && value!==null && precision) {
-        return sprintf('%.'+precision+'f',value);
-    }
-    return (value || '')+ '';
+    if (value !== undefined && value!==null) {
+        return (precision) ? sprintf('%.'+precision+'f',value) : value;
+    } else return '';
 };
 
 var makeErrorMessage= function(description,min,max,precision) {
@@ -138,6 +137,28 @@ export const isHexColorStr = function(description, valStr) {
 
 };
 
+
+/*---------------------------- validator function used by InputField to validate a value -----------------------------*/
+/*---- these factory functions creates a validation function that takes a value and return {valid,message} -----------*/
+export const IntValidator = function(min,max,description) {
+    return (val) => intRange(min, max, description, val);
+};
+
+export const FloatValidator = function(min,max,description) {
+    return (val) => floatRange(min, max, description, val);
+};
+
+export const UrlValidator = function(description) {
+    return (val) => validateUrl(description, val);
+};
+
+export const EmailValidator = function(description) {
+    return (val) => validateEmail(description, val);
+};
+/*--------------------------------------------------------------------------------------------------------------------*/
+
+
+
 var Validate = {
     validateEmail, validateUrl, intRange, floatRange, isFloat, isInt
 };