arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 00:18:07 +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

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

@ -2,9 +2,12 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import colors from 'config/colors';
import ICONS from 'config/icons';
import Icon from 'components/Icon';
import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
const StyledInput = styled.input`
width: 100%;
padding: 6px 12px;
line-height: 1.42857143;
@ -20,7 +23,7 @@ const StyledInput = styled.input`
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};
&:focus {
box-shadow: 0 1px 4px 0 rgba(1, 183, 87, 0.25);
@ -46,21 +49,48 @@ const StyledInput = styled.input`
}
`;
const Wrapper = styled.div``;
const StyledIcon = styled(Icon)`
position: absolute;
right: 55px;
`;
const Input = ({
type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isValid, isWarning, isError,
type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isSuccess, isWarning, isError,
}) => (
<StyledInput
type={type}
autoComplete={autoComplete}
autoCorrect={autoCorrect}
autoCapitalize={autoCapitalize}
spellCheck={spellCheck}
value={value}
onChange={onChange}
isValid={isValid}
isWarning={isWarning}
isError={isError}
/>
<Wrapper>
<StyledInput
type={type}
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}
/>
)}
</Wrapper>
);
Input.propTypes = {
@ -71,7 +101,7 @@ Input.propTypes = {
spellCheck: PropTypes.string,
value: PropTypes.string.isRequired,
onChange: PropTypes.func,
isValid: PropTypes.bool,
isSuccess: PropTypes.bool,
isWarning: PropTypes.bool,
isError: PropTypes.bool,
};