Added Input errors support. Merged LabeledInput into Input

src/components/profile/changePassword/ChangePassword.jsx

@@ -4,7 +4,7 @@ import { FormattedMessage as Message } from 'react-intl';
 import { Link } from 'react-router';
 import Helmet from 'react-helmet';
 
-import { LabeledInput, Button, Checkbox } from 'components/ui/Form';
+import { Input, Button, Checkbox } from 'components/ui/Form';
 import FormModel from 'models/Form';
 import { Form } from 'components/ui/Form';
 
@@ -50,7 +50,7 @@ export default class ChangePassword extends Component {
                             </div>
 
                             <div className={styles.formRow}>
-                                <LabeledInput {...form.bindField('newPassword')}
+                                <Input {...form.bindField('newPassword')}
                                     type="password"
                                     required
                                     skin="light"
@@ -65,7 +65,7 @@ export default class ChangePassword extends Component {
                             </div>
 
                             <div className={styles.formRow}>
-                                <LabeledInput {...form.bindField('newRePassword')}
+                                <Input {...form.bindField('newRePassword')}
                                     type="password"
                                     required
                                     skin="light"

src/components/ui/Form.jsx

@@ -3,6 +3,8 @@ import React, { Component, PropTypes } from 'react';
 import classNames from 'classnames';
 import { intlShape } from 'react-intl';
 
+import { uniqueId } from 'functions';
+
 import icons from './icons.scss';
 import styles from './form.scss';
 import buttons from './buttons.scss';
@@ -17,6 +19,13 @@ export class Input extends Component {
             }),
             PropTypes.string
         ]),
+        label: PropTypes.oneOfType([
+            PropTypes.shape({
+                id: PropTypes.string
+            }),
+            PropTypes.string
+        ]).isRequired,
+        error: PropTypes.string,
         icon: PropTypes.string,
         skin: PropTypes.oneOf(['dark', 'light']),
         color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue'])
@@ -27,13 +36,29 @@ export class Input extends Component {
     };
 
     render() {
-        let { icon, color = 'green', skin = 'dark' } = this.props;
+        let { icon, color = 'green', skin = 'dark', error, label } = this.props;
 
         const props = {
             type: 'text',
             ...this.props
         };
 
+        if (label) {
+            if (!props.id) {
+                props.id = uniqueId('input');
+            }
+
+            if (label.id) {
+                label = this.context.intl.formatMessage(label);
+            }
+
+            label = (
+                <label className={styles.textFieldLabel} htmlFor={props.id}>
+                    {label}
+                </label>
+            );
+        }
+
         if (props.placeholder && props.placeholder.id) {
             props.placeholder = this.context.intl.formatMessage(props.placeholder);
         }
@@ -46,13 +71,25 @@ export class Input extends Component {
             );
         }
 
+        if (error) {
+            error = (
+                <div className={styles.fieldError}>
+                    error
+                </div>
+            );
+        }
+
         return (
             <div className={baseClass}>
-                <input ref={this.setEl} className={classNames(
-                    styles[`${skin}TextField`],
-                    styles[`${color}TextField`]
-                )} {...props} />
-                {icon}
+                {label}
+                <div className={styles.textFieldContainer}>
+                    <input ref={this.setEl} className={classNames(
+                        styles[`${skin}TextField`],
+                        styles[`${color}TextField`]
+                    )} {...props} />
+                    {icon}
+                </div>
+                {error}
             </div>
         );
     }
@@ -71,62 +108,6 @@ export class Input extends Component {
     }
 }
 
-export class LabeledInput extends Component {
-    static displayName = 'LabeledInput';
-
-    static propTypes = {
-        label: PropTypes.oneOfType([
-            PropTypes.shape({
-                id: PropTypes.string
-            }),
-            PropTypes.string
-        ]).isRequired,
-        id: PropTypes.string,
-        icon: PropTypes.string,
-        skin: PropTypes.oneOf(['dark', 'light']),
-        color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue'])
-    };
-
-    static contextTypes = {
-        intl: intlShape.isRequired
-    };
-
-    render() {
-        let { label } = this.props;
-
-        let props = Object.assign({}, this.props);
-
-        if (!props.id) {
-            props.id = uniqueId('input');
-        }
-
-        if (label && label.id) {
-            label = this.context.intl.formatMessage(label);
-        }
-
-        return (
-            <div className={styles.formLabeledRow}>
-                <label className={styles.textFieldLabel} htmlFor={props.id}>
-                    {label}
-                </label>
-                <Input ref={this.setEl} {...props} />
-            </div>
-        );
-    }
-
-    setEl = (el) => {
-        this.el = el;
-    };
-
-    getValue() {
-        return this.el.getValue();
-    }
-
-    focus() {
-        this.el.focus();
-    }
-}
-
 export class Checkbox extends Component {
     static displayName = 'Checkbox';
 
@@ -297,9 +278,3 @@ export class Form extends Component {
         }
     };
 }
-
-
-let lastId = 0;
-function uniqueId(prefix = 'id') {
-    return `${prefix}${++lastId}`;
-}

src/components/ui/form.scss

@@ -30,9 +30,6 @@
 }
 
 .formRow {
-    position: relative;
-    height: 50px;
-    max-width: 100%;
     margin: 10px 0;
 }
 
@@ -44,6 +41,12 @@
     }
 }
 
+.textFieldContainer {
+    position: relative;
+    height: 50px;
+    max-width: 100%;
+}
+
 .textField {
     box-sizing: border-box;
     position: absolute;
@@ -120,11 +123,20 @@
 }
 
 .textFieldLabel {
+    margin: 10px 0;
+    display: block;
+
     font-family: $font-family-title;
     color: #666;
     font-size: 18px;
 }
 
+.fieldError {
+    color: $red;
+    font-size: 12px;
+    margin: 3px 0;
+}
+
 @include input-theme('green', $green);
 @include input-theme('blue', $blue);
 @include input-theme('red', $red);

src/functions.js

@@ -0,0 +1,4 @@
+let lastId = 0;
+export function uniqueId(prefix = 'id') {
+    return `${prefix}${++lastId}`;
+}

tests/components/profile/changePassword/ChangePassword.test.jsx

@@ -5,10 +5,10 @@ import { shallow } from 'enzyme';
 import ChangePassword from 'components/profile/changePassword/ChangePassword';
 
 describe('<ChangePassword />', () => {
-    it('renders two <LabeledInput /> components', () => {
+    it('renders two <Input /> components', () => {
         const component = shallow(<ChangePassword onSubmit={() => {}} />);
 
-        expect(component.find('LabeledInput')).to.have.length(2);
+        expect(component.find('Input')).to.have.length(2);
     });