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: () => (
- onChange(evt.target.value)} {...props} />
+ onChange(evt.target.value)}
+ {...props}
+ withRightElement={Boolean(rightElement)}
+ />
),
textarea: () => (