arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-02-09 06:32:41 +00:00
Code Issues Releases Wiki Activity

merge

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-30 16:21:40 +02:00
commit 2ca9e09ed9
1 changed files with 69 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,9 +2,12 @@ import React 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';
import ICONS from 'config/icons';
import Icon from 'components/Icon';
import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
const StyledInput = styled.input` const StyledInput = styled.input`
width: 100%;
padding: 6px 12px; padding: 6px 12px;
line-height: 1.42857143; line-height: 1.42857143;
@ -20,20 +23,20 @@ const StyledInput = styled.input`
box-shadow: 0 1px 2px 0 rgba(169, 169, 169, 0.25); box-shadow: 0 1px 2px 0 rgba(169, 169, 169, 0.25);
} }
${props => props.isValid && css` ${props => props.isSuccess && css`
background-color: ${colors.SUCCESS_PRIMARY}; border-color: ${colors.SUCCESS_PRIMARY};
&:focus { &:focus {
box-shadow: 0 1px 4px 0 rgba(1, 183, 87, 0.25); box-shadow: 0 1px 4px 0 rgba(1, 183, 87, 0.25);
} }
`} `}
${props => props.isWarning && css` ${props => props.isWarning && css`
background-color: ${colors.WARNING_PRIMARY}; border-color: ${colors.WARNING_PRIMARY};
&:focus { &:focus {
box-shadow: 0 1px 4px 0 rgba(235, 138, 0, 0.25); box-shadow: 0 1px 4px 0 rgba(235, 138, 0, 0.25);
} }
`} `}
${props => props.isError && css` ${props => props.isError && css`
background-color: ${colors.ERROR_PRIMARY}; border-color: ${colors.ERROR_PRIMARY};
&:focus { &:focus {
box-shadow: 0 1px 4px 0 rgba(255, 111, 109, 0.25); box-shadow: 0 1px 4px 0 rgba(255, 111, 109, 0.25);
} }
@ -46,22 +49,68 @@ const StyledInput = styled.input`
} }
`; `;
const Wrapper = styled.div`
display: flex;
flex-direction: column;
justify-content: flex-start;
`;
const InputWrapper = styled.div``;
const ErrorLabel = styled.span`
margin-top: 10px;
font-size: ${FONT_SIZE.SMALLER};
color: ${colors.ERROR_PRIMARY};
`;
const StyledIcon = styled(Icon)`
position: absolute;
right: 55px;
`;
const Input = ({ const Input = ({
type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isValid, isWarning, isError, placeholder, type, autoComplete, placeholder, autoCorrect, autoCapitalize, spellCheck, value, onChange, isSuccess, isWarning, isError, errorText,
}) => ( }) => (
<StyledInput <Wrapper>
placeholder={placeholder} <InputWrapper>
type={type} <StyledInput
autoComplete={autoComplete} type={type}
autoCorrect={autoCorrect} placeholder={placeholder}
autoCapitalize={autoCapitalize} autoComplete={autoComplete}
spellCheck={spellCheck} autoCorrect={autoCorrect}
value={value} autoCapitalize={autoCapitalize}
onChange={onChange} spellCheck={spellCheck}
isValid={isValid} value={value}
isWarning={isWarning} onChange={onChange}
isError={isError} 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>
); );
Input.propTypes = { Input.propTypes = {
@ -73,9 +122,10 @@ Input.propTypes = {
spellCheck: PropTypes.string, spellCheck: PropTypes.string,
value: PropTypes.string.isRequired, value: PropTypes.string.isRequired,
onChange: PropTypes.func, onChange: PropTypes.func,
isValid: PropTypes.bool, isSuccess: PropTypes.bool,
isWarning: PropTypes.bool, isWarning: PropTypes.bool,
isError: PropTypes.bool, isError: PropTypes.bool,
errorText: PropTypes.string,
}; };
export default Input; export default Input;