arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-07-04 22:02:35 +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 PropTypes from 'prop-types';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import colors from 'config/colors'; import colors from 'config/colors';
@ -6,6 +6,28 @@ import ICONS from 'config/icons';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables'; 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` const StyledInput = styled.input`
width: 100%; width: 100%;
padding: 6px 12px; padding: 6px 12px;
@ -16,34 +38,14 @@ const StyledInput = styled.input`
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
border-radius: 2px; border-radius: 2px;
${props => props.hasAddon && css`
border-top-right-radius: 0;
border-bottom-right-radius: 0;
`}
border: 1px solid ${colors.DIVIDER}; border: 1px solid ${colors.DIVIDER};
border-color: ${props => props.borderColor};
background-color: ${colors.WHITE}; 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}; transition: ${TRANSITION.HOVER};
&:disabled { &:disabled {
background: ${colors.GRAY_LIGHT}; 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)` const StyledIcon = styled(Icon)`
position: absolute; position: absolute;
right: 55px; left: auto;
right: 10px;
`; `;
const Input = ({ const BottomText = styled.span`
type, margin-top: 10px;
autoComplete, font-size: ${FONT_SIZE.SMALLER};
placeholder color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
autoCorrect, `;
autoCapitalize,
spellCheck, class Input extends Component {
value, getIcon(inputState) {
onChange, let icon = [];
isSuccess, if (inputState === 'success') {
isWarning, icon = ICONS.CHECKED;
isError, } else if (inputState === 'warning') {
errorText, icon = ICONS.WARNING;
inputLabel, } else if (inputState === 'error') {
}) => ( icon = ICONS.ERROR;
<Wrapper> }
{inputLabel && ( return icon;
<InputLabel>{inputLabel}</InputLabel> }
)}
<InputWrapper> getColor(inputState) {
<StyledInput let color = '';
type={type} if (inputState === 'success') {
placeholder={placeholder} color = colors.SUCCESS_PRIMARY;
autoComplete={autoComplete} } else if (inputState === 'warning') {
autoCorrect={autoCorrect} color = colors.WARNING_PRIMARY;
autoCapitalize={autoCapitalize} } else if (inputState === 'error') {
spellCheck={spellCheck} color = colors.ERROR_PRIMARY;
value={value} }
onChange={onChange} return color;
isSuccess={isSuccess} }
isWarning={isWarning}
isError={isError} render() {
/> return (
{isError && ( <Wrapper
<StyledIcon className={this.props.className}
icon={ICONS.ERROR} >
color={colors.ERROR_PRIMARY} {this.props.inputLabel && (
/> <InputLabel>{this.props.inputLabel}</InputLabel>
)} )}
{isWarning && ( <InputWrapper>
<StyledIcon <InputIconWrapper>
icon={ICONS.WARNING} {this.props.state && (
color={colors.WARNING_PRIMARY} <StyledIcon
/> icon={this.getIcon(this.props.state)}
)} color={this.getColor(this.props.state)}
{isSuccess && ( />
<StyledIcon )}
icon={ICONS.CHECKED} <StyledInput
color={colors.SUCCESS_PRIMARY} hasAddon={!!this.props.sideAddon}
/> type={this.props.type}
)} placeholder={this.props.placeholder}
</InputWrapper> autoComplete={this.props.autoComplete}
{isError && ( autoCorrect={this.props.autoCorrect}
<ErrorLabel> autoCapitalize={this.props.autoCapitalize}
{errorText} spellCheck={this.props.spellCheck}
</ErrorLabel> value={this.props.value}
)} onChange={this.props.onChange}
</Wrapper> 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 = { Input.propTypes = {
className: PropTypes.string,
placeholder: PropTypes.string, placeholder: PropTypes.string,
type: PropTypes.string, type: PropTypes.string,
autoComplete: PropTypes.string, autoComplete: PropTypes.string,
@ -144,11 +143,14 @@ Input.propTypes = {
spellCheck: PropTypes.string, spellCheck: PropTypes.string,
value: PropTypes.string.isRequired, value: PropTypes.string.isRequired,
onChange: PropTypes.func, onChange: PropTypes.func,
isSuccess: PropTypes.bool, state: PropTypes.string,
isWarning: PropTypes.bool, bottomText: PropTypes.string,
isError: PropTypes.bool,
errorText: PropTypes.string,
inputLabel: PropTypes.string, inputLabel: PropTypes.string,
sideAddon: PropTypes.node,
};
Input.defaultProps = {
type: 'text',
}; };
export default Input; export default Input;