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 success, warning & error icons

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

38
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,7 +23,7 @@ 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`
border-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);
@ -46,9 +49,17 @@ const StyledInput = styled.input`
} }
`; `;
const Wrapper = styled.div``;
const StyledIcon = styled(Icon)`
position: absolute;
right: 55px;
`;
const Input = ({ const Input = ({
type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isValid, isWarning, isError, type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isSuccess, isWarning, isError,
}) => ( }) => (
<Wrapper>
<StyledInput <StyledInput
type={type} type={type}
autoComplete={autoComplete} autoComplete={autoComplete}
@ -57,10 +68,29 @@ const Input = ({
spellCheck={spellCheck} spellCheck={spellCheck}
value={value} value={value}
onChange={onChange} onChange={onChange}
isValid={isValid} isSuccess={isSuccess}
isWarning={isWarning} isWarning={isWarning}
isError={isError} 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}
/>
)}
</Wrapper>
); );
Input.propTypes = { Input.propTypes = {
@ -71,7 +101,7 @@ 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,
}; };