arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-23 06:21:06 +00:00
Code Issues Releases Wiki Activity

Refactorize Input component

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-08-31 12:37:07 +02:00
parent 7014331840
commit 3a74dfc927
1 changed files with 111 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
src/components/Input/index.js
View File

@ -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 ErrorLabel = styled.span`
margin-top: 10px;
font-size: ${FONT_SIZE.SMALLER};
color: ${colors.ERROR_PRIMARY};
`;
const StyledIcon = styled(Icon)`
position: absolute;
right: 55px;
left: auto;
right: 10px;
`;
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>
);
const BottomText = styled.span`
margin-top: 10px;
font-size: ${FONT_SIZE.SMALLER};
color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
`;
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;
}
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;