mirror of https://github.com/trezor/trezor-wallet
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
157 lines
4.5 KiB
157 lines
4.5 KiB
6 years ago
|
import React, { Component } from 'react';
|
||
6 years ago
|
import PropTypes from 'prop-types';
|
||
|
import styled, { css } from 'styled-components';
|
||
|
import colors from 'config/colors';
|
||
6 years ago
|
import ICONS from 'config/icons';
|
||
|
import Icon from 'components/Icon';
|
||
6 years ago
|
import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
|
||
|
|
||
6 years ago
|
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};
|
||
|
`;
|
||
|
|
||
6 years ago
|
const StyledInput = styled.input`
|
||
6 years ago
|
width: 100%;
|
||
6 years ago
|
padding: 6px 12px;
|
||
|
|
||
|
line-height: 1.42857143;
|
||
|
font-size: ${FONT_SIZE.SMALL};
|
||
|
font-weight: ${FONT_WEIGHT.SMALLEST};
|
||
|
color: ${colors.TEXT_PRIMARY};
|
||
|
|
||
|
border-radius: 2px;
|
||
6 years ago
|
${props => props.hasAddon && css`
|
||
|
border-top-right-radius: 0;
|
||
|
border-bottom-right-radius: 0;
|
||
|
`}
|
||
6 years ago
|
border: 1px solid ${colors.DIVIDER};
|
||
6 years ago
|
border-color: ${props => props.borderColor};
|
||
6 years ago
|
|
||
|
background-color: ${colors.WHITE};
|
||
|
transition: ${TRANSITION.HOVER};
|
||
|
&:disabled {
|
||
|
background: ${colors.GRAY_LIGHT};
|
||
|
color: ${colors.TEXT_SECONDARY};
|
||
|
}
|
||
|
`;
|
||
|
|
||
6 years ago
|
const StyledIcon = styled(Icon)`
|
||
|
position: absolute;
|
||
|
left: auto;
|
||
|
right: 10px;
|
||
6 years ago
|
`;
|
||
|
|
||
6 years ago
|
const BottomText = styled.span`
|
||
6 years ago
|
margin-top: 10px;
|
||
|
font-size: ${FONT_SIZE.SMALLER};
|
||
6 years ago
|
color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
|
||
6 years ago
|
`;
|
||
6 years ago
|
|
||
6 years ago
|
class Input extends Component {
|
||
|
getIcon(inputState) {
|
||
|
let icon = [];
|
||
|
if (inputState === 'success') {
|
||
|
icon = ICONS.CHECKED;
|
||
|
} else if (inputState === 'warning') {
|
||
|
icon = ICONS.WARNING;
|
||
|
} else if (inputState === 'error') {
|
||
|
icon = ICONS.ERROR;
|
||
|
}
|
||
|
return icon;
|
||
|
}
|
||
6 years ago
|
|
||
6 years ago
|
getColor(inputState) {
|
||
|
let color = '';
|
||
|
if (inputState === 'success') {
|
||
|
color = colors.SUCCESS_PRIMARY;
|
||
|
} else if (inputState === 'warning') {
|
||
|
color = colors.WARNING_PRIMARY;
|
||
|
} else if (inputState === 'error') {
|
||
|
color = colors.ERROR_PRIMARY;
|
||
|
}
|
||
|
return color;
|
||
|
}
|
||
|
|
||
|
render() {
|
||
|
return (
|
||
|
<Wrapper
|
||
|
className={this.props.className}
|
||
|
>
|
||
|
{this.props.inputLabel && (
|
||
|
<InputLabel>{this.props.inputLabel}</InputLabel>
|
||
|
)}
|
||
|
<InputWrapper>
|
||
|
<InputIconWrapper>
|
||
|
{this.props.state && (
|
||
|
<StyledIcon
|
||
|
icon={this.getIcon(this.props.state)}
|
||
|
color={this.getColor(this.props.state)}
|
||
|
/>
|
||
|
)}
|
||
|
<StyledInput
|
||
6 years ago
|
hasAddon={!!this.props.sideAddons}
|
||
6 years ago
|
type={this.props.type}
|
||
|
placeholder={this.props.placeholder}
|
||
|
autoComplete={this.props.autoComplete}
|
||
|
autoCorrect={this.props.autoCorrect}
|
||
|
autoCapitalize={this.props.autoCapitalize}
|
||
|
spellCheck={this.props.spellCheck}
|
||
|
value={this.props.value}
|
||
|
onChange={this.props.onChange}
|
||
|
borderColor={this.getColor(this.props.state)}
|
||
|
/>
|
||
|
</InputIconWrapper>
|
||
6 years ago
|
{this.props.sideAddons && this.props.sideAddons.map(sideAddon => sideAddon)}
|
||
6 years ago
|
</InputWrapper>
|
||
|
{this.props.bottomText && (
|
||
|
<BottomText
|
||
|
color={this.getColor(this.props.state)}
|
||
|
>
|
||
|
{this.props.bottomText}
|
||
|
</BottomText>
|
||
|
)}
|
||
|
</Wrapper>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
6 years ago
|
|
||
|
Input.propTypes = {
|
||
6 years ago
|
className: PropTypes.string,
|
||
6 years ago
|
placeholder: PropTypes.string,
|
||
6 years ago
|
type: PropTypes.string,
|
||
|
autoComplete: PropTypes.string,
|
||
|
autoCorrect: PropTypes.string,
|
||
|
autoCapitalize: PropTypes.string,
|
||
|
spellCheck: PropTypes.string,
|
||
|
value: PropTypes.string.isRequired,
|
||
|
onChange: PropTypes.func,
|
||
6 years ago
|
state: PropTypes.string,
|
||
|
bottomText: PropTypes.string,
|
||
6 years ago
|
inputLabel: PropTypes.string,
|
||
6 years ago
|
sideAddons: PropTypes.arrayOf(PropTypes.node),
|
||
6 years ago
|
};
|
||
|
|
||
|
Input.defaultProps = {
|
||
|
type: 'text',
|
||
6 years ago
|
};
|
||
|
|
||
|
export default Input;
|