arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-26 00:48:35 +00:00
Code Issues Releases Wiki Activity

Add error text under the input

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-08-30 15:19:58 +02:00
parent 6d9cdfcabb
commit 797b66d9d5
1 changed files with 50 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,7 +49,19 @@ const StyledInput = styled.input`
} }
`; `;
const Wrapper = styled.div``; 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)` const StyledIcon = styled(Icon)`
position: absolute; position: absolute;
@ -57,38 +69,45 @@ const StyledIcon = styled(Icon)`
`; `;
const Input = ({ const Input = ({
type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isSuccess, isWarning, isError, type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isSuccess, isWarning, isError, errorText,
}) => ( }) => (
<Wrapper> <Wrapper>
<StyledInput <InputWrapper>
type={type} <StyledInput
autoComplete={autoComplete} type={type}
autoCorrect={autoCorrect} autoComplete={autoComplete}
autoCapitalize={autoCapitalize} autoCorrect={autoCorrect}
spellCheck={spellCheck} autoCapitalize={autoCapitalize}
value={value} spellCheck={spellCheck}
onChange={onChange} value={value}
isSuccess={isSuccess} onChange={onChange}
isWarning={isWarning} isSuccess={isSuccess}
isError={isError} 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 && ( {isError && (
<StyledIcon <ErrorLabel>
icon={ICONS.ERROR} {errorText}
color={colors.ERROR_PRIMARY} </ErrorLabel>
/>
)}
{isWarning && (
<StyledIcon
icon={ICONS.WARNING}
color={colors.WARNING_PRIMARY}
/>
)}
{isSuccess && (
<StyledIcon
icon={ICONS.CHECKED}
color={colors.SUCCESS_PRIMARY}
/>
)} )}
</Wrapper> </Wrapper>
); );
@ -104,6 +123,7 @@ Input.propTypes = {
isSuccess: 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;