From 107a2bdd7068ea830efeac4302da8a05b78badb3 Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Sun, 17 Apr 2016 12:21:37 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20La?=
 =?UTF-8?q?beledInput=20=D0=B2=20Form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/Form.jsx  | 62 +++++++++++++++++++++++++++++++++++++
 src/components/ui/form.scss |  6 ++++
 2 files changed, 68 insertions(+)

diff --git a/src/components/ui/Form.jsx b/src/components/ui/Form.jsx
index 0d671ec..23af7ac 100644
--- a/src/components/ui/Form.jsx
+++ b/src/components/ui/Form.jsx
@@ -70,6 +70,62 @@ 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';
 
@@ -185,3 +241,9 @@ export class Form extends Component {
         }
     };
 }
+
+
+let lastId = 0;
+function uniqueId(prefix = 'id') {
+    return `${prefix}${++lastId}`;
+}
diff --git a/src/components/ui/form.scss b/src/components/ui/form.scss
index 1ce8386..a209918 100644
--- a/src/components/ui/form.scss
+++ b/src/components/ui/form.scss
@@ -111,6 +111,12 @@
     @include form-transition();
 }
 
+.textFieldLabel {
+    font-family: $font-family-title;
+    color: #666;
+    font-size: 18px;
+}
+
 @include input-theme('green', $green);
 @include input-theme('blue', $blue);
 @include input-theme('red', $red);