Refactorize Input component

src/components/Input/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import colors from 'config/colors';
@@ -6,6 +6,28 @@ import ICONS from 'config/icons';
 import Icon from 'components/Icon';
 import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
 
+const Wrapper = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+`;
+
+const InputWrapper = styled.div`
+    display: flex;
+`;
+
+const InputIconWrapper = styled.div`
+    flex: 1;
+    position: relative;
+    display: inline-block;
+`;
+
+const InputLabel = styled.span`
+    padding-bottom: 4px;
+    color: ${colors.TEXT_SECONDARY};
+`;
+
 const StyledInput = styled.input`
     width: 100%;
     padding: 6px 12px;
@@ -16,34 +38,14 @@ const StyledInput = styled.input`
     color: ${colors.TEXT_PRIMARY};
 
     border-radius: 2px;
+    ${props => props.hasAddon && css`
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    `}
     border: 1px solid ${colors.DIVIDER};
+    border-color: ${props => props.borderColor};
 
     background-color: ${colors.WHITE};
-    &:focus {
-        box-shadow: 0 1px 2px 0 rgba(169, 169, 169, 0.25);
-    }
-
-    ${props => props.isSuccess && css`
-        border-color: ${colors.SUCCESS_PRIMARY};
-        &:focus {
-            box-shadow: 0 1px 4px 0 rgba(1, 183, 87, 0.25);
-        }
-    `}
-
-    ${props => props.isWarning && css`
-        border-color: ${colors.WARNING_PRIMARY};
-        &:focus {
-            box-shadow: 0 1px 4px 0 rgba(235, 138, 0, 0.25);
-        }
-    `}
-
-    ${props => props.isError && css`
-        border-color: ${colors.ERROR_PRIMARY};
-        &:focus {
-            box-shadow: 0 1px 4px 0 rgba(255, 111, 109, 0.25);
-        }
-    `}
-
     transition: ${TRANSITION.HOVER};
     &:disabled {
         background: ${colors.GRAY_LIGHT};
@@ -51,91 +53,88 @@ const StyledInput = styled.input`
     }
 `;
 
-const Wrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-`;
-
-const InputWrapper = styled.div``;
-
-const InputLabel = styled.span`
-    padding-bottom: 4px;
-    color: ${colors.TEXT_SECONDARY};
+const StyledIcon = styled(Icon)`
+    position: absolute;
+    left: auto;
+    right: 10px;
 `;
 
-const ErrorLabel = styled.span`
+const BottomText = styled.span`
     margin-top: 10px;
     font-size: ${FONT_SIZE.SMALLER};
-    color: ${colors.ERROR_PRIMARY};
+    color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
 `;
 
-const StyledIcon = styled(Icon)`
-    position: absolute;
-    right: 55px;
-`;
+class Input extends Component {
+    getIcon(inputState) {
+        let icon = [];
+        if (inputState === 'success') {
+            icon = ICONS.CHECKED;
+        } else if (inputState === 'warning') {
+            icon = ICONS.WARNING;
+        } else if (inputState === 'error') {
+            icon = ICONS.ERROR;
+        }
+        return icon;
+    }
 
-const Input = ({
-    type,
-    autoComplete,
-    placeholder
-    autoCorrect,
-    autoCapitalize,
-    spellCheck,
-    value,
-    onChange,
-    isSuccess,
-    isWarning,
-    isError,
-    errorText,
-    inputLabel,
-}) => (
-    <Wrapper>
-        {inputLabel && (
-            <InputLabel>{inputLabel}</InputLabel>
-        )}
-        <InputWrapper>
-            <StyledInput
-                type={type}
-                placeholder={placeholder}
-                autoComplete={autoComplete}
-                autoCorrect={autoCorrect}
-                autoCapitalize={autoCapitalize}
-                spellCheck={spellCheck}
-                value={value}
-                onChange={onChange}
-                isSuccess={isSuccess}
-                isWarning={isWarning}
-                isError={isError}
-            />
-            {isError && (
-                <StyledIcon
-                    icon={ICONS.ERROR}
-                    color={colors.ERROR_PRIMARY}
-                />
-            )}
-            {isWarning && (
-                <StyledIcon
-                    icon={ICONS.WARNING}
-                    color={colors.WARNING_PRIMARY}
-                />
-            )}
-            {isSuccess && (
-                <StyledIcon
-                    icon={ICONS.CHECKED}
-                    color={colors.SUCCESS_PRIMARY}
-                />
-            )}
-        </InputWrapper>
-        {isError && (
-            <ErrorLabel>
-                {errorText}
-            </ErrorLabel>
-        )}
-    </Wrapper>
-);
+    getColor(inputState) {
+        let color = '';
+        if (inputState === 'success') {
+            color = colors.SUCCESS_PRIMARY;
+        } else if (inputState === 'warning') {
+            color = colors.WARNING_PRIMARY;
+        } else if (inputState === 'error') {
+            color = colors.ERROR_PRIMARY;
+        }
+        return color;
+    }
+
+    render() {
+        return (
+            <Wrapper
+                className={this.props.className}
+            >
+                {this.props.inputLabel && (
+                    <InputLabel>{this.props.inputLabel}</InputLabel>
+                )}
+                <InputWrapper>
+                    <InputIconWrapper>
+                        {this.props.state && (
+                            <StyledIcon
+                                icon={this.getIcon(this.props.state)}
+                                color={this.getColor(this.props.state)}
+                            />
+                        )}
+                        <StyledInput
+                            hasAddon={!!this.props.sideAddon}
+                            type={this.props.type}
+                            placeholder={this.props.placeholder}
+                            autoComplete={this.props.autoComplete}
+                            autoCorrect={this.props.autoCorrect}
+                            autoCapitalize={this.props.autoCapitalize}
+                            spellCheck={this.props.spellCheck}
+                            value={this.props.value}
+                            onChange={this.props.onChange}
+                            borderColor={this.getColor(this.props.state)}
+                        />
+                    </InputIconWrapper>
+                    {this.props.sideAddon}
+                </InputWrapper>
+                {this.props.bottomText && (
+                    <BottomText
+                        color={this.getColor(this.props.state)}
+                    >
+                        {this.props.bottomText}
+                    </BottomText>
+                )}
+            </Wrapper>
+        );
+    }
+}
 
 Input.propTypes = {
+    className: PropTypes.string,
     placeholder: PropTypes.string,
     type: PropTypes.string,
     autoComplete: PropTypes.string,
@@ -144,11 +143,14 @@ Input.propTypes = {
     spellCheck: PropTypes.string,
     value: PropTypes.string.isRequired,
     onChange: PropTypes.func,
-    isSuccess: PropTypes.bool,
-    isWarning: PropTypes.bool,
-    isError: PropTypes.bool,
-    errorText: PropTypes.string,
+    state: PropTypes.string,
+    bottomText: PropTypes.string,
     inputLabel: PropTypes.string,
+    sideAddon: PropTypes.node,
+};
+
+Input.defaultProps = {
+    type: 'text',
 };
 
 export default Input;