From 4c99586c749623716ed4c8e9dbbb8910932a8949 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Villel=C3=A9gier?= <x.villelegier@gmail.com>
Date: Sun, 1 Apr 2018 15:43:30 +0200
Subject: [PATCH] Add `label` for the Input component (#990)

* Add label to Input

* Remove `displayError` props

* Update the docs

* Update typescript def

* Remove default in typescript

* Fix typo

* Update falsy props checking

* Add label to Input
---
 docs/input.md      | 10 +++++-----
 src/index.d.ts     | 17 ++++++++++-------
 src/input/Input.js | 35 +++++++++++++++++++++++++++++------
 3 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/docs/input.md b/docs/input.md
index 73cfebcde5..3cdcf81750 100644
--- a/docs/input.md
+++ b/docs/input.md
@@ -15,7 +15,7 @@ import { Input } from 'react-native-elements';
 
 <Input
   placeholder='INPUT WITH ICON'
-  icon={
+  leftIcon={
     <Icon
       name='user'
       size={24}
@@ -31,7 +31,6 @@ import { Input } from 'react-native-elements';
 
 <Input
   placeholder='INPUT WITH ERROR MESSAGE'
-  displayError={true}
   errorStyle={{ color: 'red' }}
   errorMessage='ENTER A VALID ERROR HERE'
 />
@@ -50,6 +49,7 @@ import { Input } from 'react-native-elements';
 | leftIconContainerStyle  | none    | View style (object)    | styling for left Icon Component container        |
 | inputStyle              | none    | object                 | add styling to input component (optional)        |
 | shake                   | none    | any                    | add shaking effect to input component (optional) |
-| displayError            | none    | bool                   | displays error (optional)                        |
-| errorStyle              | none    | object                 | add styling to error message (optional)          |
-| errorMessage            | none    | string                 | adds error message (optional)                    |
+| label                   | none    | string                 | add a label on top of the input (optional)       |
+| labelStyle              | none    | object                 | styling for the label (optional)         |
+| errorMessage            | none    | string                 | add error message (optional)                     |
+| errorStyle              | none    | object                 | styling for the error message (optional)         |
diff --git a/src/index.d.ts b/src/index.d.ts
index 51f594a318..40a8b9e96d 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -785,11 +785,6 @@ export interface InputProps extends TextInputProperties {
    */
   shake?: any;
 
-  /**
-   *  Displays error (optional)
-   */
-  displayError?: boolean;
-
   /**
    * 	Add styling to error message (optional)
    */
@@ -797,10 +792,18 @@ export interface InputProps extends TextInputProperties {
 
   /**
    * 	Adds error message (optional)
-   * *
-   * @default 'Error!'
    */
   errorMessage?: string;
+
+  /**
+   * 	Add styling to label (optional)
+   */
+  labelStyle?: StyleProp<TextStyle>;
+
+  /**
+   * 	Adds label (optional)
+   */
+  label?: string;
 }
 
 export class Input extends React.Component<InputProps, any> {
diff --git a/src/input/Input.js b/src/input/Input.js
index a8a1960f99..b24ad585f4 100644
--- a/src/input/Input.js
+++ b/src/input/Input.js
@@ -9,9 +9,12 @@ import {
   Dimensions,
   Animated,
   Easing,
+  Platform,
 } from 'react-native';
 
 import ViewPropTypes from '../config/ViewPropTypes';
+import fonts from '../config/fonts';
+import colors from '../config/colors';
 
 const SCREEN_WIDTH = Dimensions.get('window').width;
 
@@ -57,9 +60,10 @@ class Input extends Component {
       rightIcon,
       rightIconContainerStyle,
       inputStyle,
-      displayError,
       errorStyle,
       errorMessage,
+      labelStyle,
+      label,
       ...attributes
     } = this.props;
     const translateX = this.shakeAnimationValue.interpolate({
@@ -69,6 +73,11 @@ class Input extends Component {
 
     return (
       <View>
+        {label && (
+          <Text style={[styles.label, labelStyle]}>
+            {label}
+          </Text>
+        )}
         <Animated.View
           style={[
             styles.container,
@@ -103,9 +112,9 @@ class Input extends Component {
             </View>
           )}
         </Animated.View>
-        {displayError && (
+        {errorMessage && (
           <Text style={[styles.error, errorStyle && errorStyle]}>
-            {errorMessage || 'Error!'}
+            {errorMessage}
           </Text>
         )}
       </View>
@@ -125,16 +134,18 @@ Input.propTypes = {
   inputStyle: Text.propTypes.style,
 
   shake: PropTypes.any,
-  displayError: PropTypes.bool,
   errorStyle: Text.propTypes.style,
   errorMessage: PropTypes.string,
+
+  label: PropTypes.string,
+  labelStyle: Text.propTypes.style,
 };
 
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     borderBottomWidth: 1,
-    borderColor: 'rgba(171, 189, 219, 1)',
+    borderColor: colors.grey3,
     alignItems: 'center',
   },
   iconContainer: {
@@ -147,7 +158,7 @@ const styles = StyleSheet.create({
     color: 'black',
     fontSize: 18,
     marginLeft: 10,
-    width: '100%',
+    flex: 1,
     height: 40,
   },
   error: {
@@ -155,6 +166,18 @@ const styles = StyleSheet.create({
     margin: 5,
     fontSize: 12,
   },
+  label: {
+    color: colors.grey3,
+    fontSize: 16,
+    ...Platform.select({
+      ios: {
+        fontWeight: 'bold',
+      },
+      android: {
+        ...fonts.android.bold,
+      },
+    }),
+  },
 });
 
 export default Input;