Components/Input

CONTRIBUTING.md

@@ -12,7 +12,7 @@ Please don't hesitate to join us on [gitter](https://gitter.im/galio-community)!
 
 If you notice any bugs in the app, see some code that can be improved, or have features you would like to be added, please create a [bug report](https://github.com/galio-org/galio/issues/new?template=bug-report---.md) or a [feature request](https://github.com/galio-org/galio/issues/new?template=feature-request---.md)!
 
-If you want to open a PR that fixes a bug or adds a feature, then we can't thank you enough! 
+If you want to open a PR that fixes a bug or adds a feature, then we can't thank you enough!
 
 ## Working on issues
 
@@ -37,14 +37,14 @@ As you can see we have multiple branches:
  - **design**: Here we have design resources for everybody to download and use
  - **dev**: This is the `dev` branch of Galio, this is where everything is happening before releasing on master
 
-## Financial contributions 
+## Financial contributions
 
 We also welcome financial contributions in full transparency on our [open collective](https://opencollective.com/galio).
 Anyone can file an expense. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed.
 
 ## galio-starter-kit contribution
 
-You want to take part in this cool community and help the world by creating some cool screens using Galio? Then go ahead and hope on our [galio-starter-kit repo](https://github.com/galio-org/galio-starter-kit). 
+You want to take part in this cool community and help the world by creating some cool screens using Galio? Then go ahead and hop on our [galio-starter-kit repo](https://github.com/galio-org/galio-starter-kit). 
 
 ## Hacktoberfest 2018
 

src/atomic/atoms/Input.js

@@ -32,6 +32,8 @@ function Input({
   password,
   onRef,
   error,
+  containerStyle,
+  rightContent,
   ...rest
 }) {
   const [isPassword, setIsPassword] = React.useState(false);
@@ -45,7 +47,7 @@ function Input({
     bgColor && { backgroundColor: bgColor },
     rounded && styles.rounded,
     borderless && styles.borderless,
-    error && { borderColor: theme.COLORS.DANGER},
+    error && { borderColor: theme.COLORS.DANGER },
     style,
   ];
 
@@ -54,7 +56,7 @@ function Input({
     borderless && icon && styles.inputIcon,
     styles.inputText,
     color && { color },
-    textInputStyle || {}
+    textInputStyle || {},
   ];
 
   const iconInstance = icon ? (
@@ -63,7 +65,12 @@ function Input({
       family={family}
       size={iconSize || theme.SIZES.BASE * 1.0625}
       style={{ marginRight: left && !right ? 4 : 0 }}
-      color={(error && theme.COLORS.DANGER) || iconColor || placeholderTextColor || theme.COLORS.PLACEHOLDER}
+      color={
+        (error && theme.COLORS.DANGER) ||
+        iconColor ||
+        placeholderTextColor ||
+        theme.COLORS.PLACEHOLDER
+      }
     />
   ) : (
     iconContent
@@ -87,6 +94,7 @@ function Input({
       style={{
         marginVertical: theme.SIZES.BASE / 2,
         alignContent: 'center',
+        ...containerStyle,
       }}>
       {labelContent}
       {topHelp && !bottomHelp && helpContent}
@@ -103,6 +111,7 @@ function Input({
         />
         {right && iconInstance}
         {viewPassElement}
+        {rightContent}
       </View>
       {bottomHelp && helpContent}
     </View>
@@ -134,6 +143,8 @@ Input.defaultProps = {
   iconContent: null,
   theme: GalioTheme,
   onRef: null,
+  containerStyle: null,
+  rightContent: null,
 };
 
 Input.propTypes = {
@@ -161,6 +172,8 @@ Input.propTypes = {
   iconContent: PropTypes.any,
   theme: PropTypes.any,
   onRef: PropTypes.func,
+  containerStyle: PropTypes.any,
+  rightContent: PropTypes.any,
 };
 
 const styles = theme =>
@@ -195,14 +208,13 @@ const styles = theme =>
       fontWeight: '500',
       fontSize: theme.SIZES.INPUT_LABEL_TEXT,
       marginVertical: theme.SIZES.INPUT_VERTICAL_LABEL,
-      paddingHorizontal: theme.SIZES.INPUT_HORIZONTAL
+      paddingHorizontal: theme.SIZES.INPUT_HORIZONTAL,
     },
     helpText: {
       color: theme.COLORS.SECONDARY,
       fontSize: theme.SIZES.INPUT_HELP_TEXT,
       marginVertical: 8,
       paddingHorizontal: 16,
-      fontSize: 14
     },
     rounded: {
       borderRadius: theme.SIZES.INPUT_ROUNDED,