From 18722813a4afc8d96979a35ecbc2306f78bc8f9e Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Mon, 21 Jan 2019 15:13:48 -0300
Subject: [PATCH] feat(input): add renderRight prop

---
 app/components/input.js | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/app/components/input.js b/app/components/input.js
index 7b4fad0..62f7062 100644
--- a/app/components/input.js
+++ b/app/components/input.js
@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import React, { type Element } from 'react';
 
 import styled from 'styled-components';
 
@@ -9,6 +9,7 @@ const getDefaultStyles = t => styled[t]`
   background-color: ${props => props.theme.colors.inputBackground};
   color: ${props => props.theme.colors.text};
   padding: 15px;
+  padding-right: ${props => (props.withRightElement ? '85px' : '15px')};
   width: 100%;
   outline: none;
   font-family: ${props => props.theme.fontFamily};
@@ -18,6 +19,16 @@ const getDefaultStyles = t => styled[t]`
   }
 `;
 
+const Wrapper = styled.div`
+  position: relative;
+`;
+
+const RightElement = styled.div`
+  position: absolute;
+  top: 15px;
+  right: 15px;
+`;
+
 const Input = getDefaultStyles('input');
 const Textarea = getDefaultStyles('textarea');
 
@@ -30,16 +41,24 @@ type Props = {
   disabled?: boolean,
   type?: string,
   step?: number,
+  renderRight?: () => Element<*> | null,
 };
 
 export const InputComponent = ({
   inputType,
   onChange = () => {},
+  renderRight = () => null,
   ...props
 }: Props) => {
+  const rightElement = renderRight();
+
   const inputTypes = {
     input: () => (
-      <Input onChange={evt => onChange(evt.target.value)} {...props} />
+      <Input
+        onChange={evt => onChange(evt.target.value)}
+        {...props}
+        withRightElement={Boolean(rightElement)}
+      />
     ),
     textarea: () => (
       <Textarea onChange={evt => onChange(evt.target.value)} {...props} />
@@ -50,7 +69,12 @@ export const InputComponent = ({
     throw new Error(`Invalid input type: ${String(inputType)}`);
   }
 
-  return inputTypes[inputType || 'input']();
+  return (
+    <Wrapper>
+      {inputTypes[inputType || 'input']()}
+      {rightElement && <RightElement>{rightElement}</RightElement>}
+    </Wrapper>
+  );
 };
 
 InputComponent.defaultProps = {
@@ -58,4 +82,8 @@ InputComponent.defaultProps = {
   rows: 4,
   disabled: false,
   type: 'text',
+  renderRight: () => null,
+  onChange: () => {},
+  onFocus: () => {},
+  step: 1,
 };