fields.jsx in hippo-fw-0.9.6

- old
+ new

@@ -1,36 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import invariant from 'invariant';
+import { action } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import classnames from 'classnames';
 import { Col, getColumnProps } from 'react-flexbox-grid';
-
-import invariant from 'invariant';
 import Field     from 'grommet/components/FormField';
 import NumberInput from 'grommet/components/NumberInput';
-
 import { titleize } from '../../lib/util';
-
-import { FormField as FormFieldModel }   from './model';
 import DateWrapper     from './fields/date-wrapper';
 import SelectWrapper   from './fields/select-wrapper';
 import TextWrapper     from './fields/text-wrapper';
 import CheckBoxWrapper from './fields/checkbox-wrapper';
-
+import Label           from './fields/label';
 import './fields/form-field.scss';
 
 const TypesMapping = {
     text:     TextWrapper,
     date:     DateWrapper,
+    label:    Label,
     select:   SelectWrapper,
     number:   NumberInput,
     checkbox: CheckBoxWrapper,
-
 };
 
-
 @inject('formState')
 @observer
 export default class FormField extends React.PureComponent {
     static propTypes = Object.assign({
         label: PropTypes.string,
@@ -53,19 +48,25 @@
         this.field = this.props.formState.setField(this.props.name, this.props);
     }
 
     componentWillReceiveProps(nextProps) {
         invariant(nextProps.name === this.props.name,
-                  `cannot update 'name' prop from ${this.props.name} to ${nextProps.name}`);
+            `cannot update 'name' prop from ${this.props.name} to ${nextProps.name}`);
         this.field.update(this.props);
     }
 
+    @action.bound
+    setRef(input) {
+        this.inputRef = input;
+    }
+
     render() {
         const {
             name, className, autoFocus, type, children, label,
             validate: _, formState: __, help: ___, ...otherProps
         } = getColumnProps(this.props);
+
         const InputTag = TypesMapping[type] || TypesMapping.text;
 
         return (
             <div className={classnames('form-field', className)}>
                 <Field
@@ -74,10 +75,10 @@
                     help={this.field.help}
                 >
                     <InputTag
                         name={name}
                         autoFocus={autoFocus}
-                        ref={f => (this.inputRef = f)}
+                        ref={this.setRef}
                         value={this.field.value || ''}
                         type={InputTag === TypesMapping.text ? this.props.type : undefined}
                         {...this.field.events}
                         {...otherProps}
                     />