arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-15 21:08:57 +00:00
Code Issues Releases Wiki Activity

Refactored to input

Browse Source
This commit is contained in:
Vladimir Volek 2018-10-30 15:26:26 +01:00 committed by Szymon Lesisz
parent 42fa20664a
commit 5aaadade36
2 changed files with 55 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/inputs/Input/index.js
View File

@ -25,6 +25,7 @@ const InputIconWrapper = styled.div`
flex: 1;
position: relative;
display: inline-block;
background: white;
`;
const TopLabel = styled.span`
@ -43,10 +44,12 @@ const StyledInput = styled.input`
color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
border-radius: 2px;
${props => props.hasAddon && css`
border-top-right-radius: 0;
border-bottom-right-radius: 0;
`}
border: 1px solid ${colors.DIVIDER};
border-color: ${props => props.borderColor};
@ -72,6 +75,20 @@ const BottomText = styled.span`
color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
`;
const Overlay = styled.div`
${props => props.isPartiallyHidden && css`
bottom: 0;
border: 1px solid ${colors.DIVIDER};
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to right,
rgba(0,0,0, 0) 0%,
rgba(255,255,255, 1) 220px
);
`}
`;
class Input extends PureComponent {
getIcon(inputState) {
let icon = [];
@ -113,6 +130,8 @@ class Input extends PureComponent {
color={this.getColor(this.props.state)}
/>
)}
<Overlay isPartiallyHidden={this.props.isPartiallyHidden} />
{this.props.icon}
<StyledInput
hasIcon={this.getIcon(this.props.state).length > 0}
innerRef={this.props.innerRef}
@ -131,6 +150,7 @@ class Input extends PureComponent {
name={this.props.name}
data-lpignore="true"
/>
</InputIconWrapper>
{this.props.sideAddons && this.props.sideAddons.map(sideAddon => sideAddon)}
</InputWrapper>
@ -154,6 +174,7 @@ Input.propTypes = {
autocomplete: PropTypes.string,
autocorrect: PropTypes.string,
autocapitalize: PropTypes.string,
icon: PropTypes.node,
spellCheck: PropTypes.string,
value: PropTypes.string,
onChange: PropTypes.func,
@ -163,6 +184,7 @@ Input.propTypes = {
sideAddons: PropTypes.arrayOf(PropTypes.node),
isDisabled: PropTypes.bool,
name: PropTypes.string,
isPartiallyHidden: PropTypes.bool,
};
Input.defaultProps = {

95
src/views/Wallet/views/Account/Receive/index.js
View File

@ -7,6 +7,7 @@ import { H2 } from 'components/Heading';
import Button from 'components/Button';
import Icon from 'components/Icon';
import Tooltip from 'components/Tooltip';
import Input from 'components/inputs/Input';
import ICONS from 'config/icons';
import colors from 'config/colors';
@ -37,39 +38,7 @@ const StyledQRCode = styled(QRCode)`
border: 1px solid ${colors.BODY};
`;
const ValueWrapper = styled.div`
font-size: ${FONT_SIZE.SMALL};
height: 40px;
font-weight: ${FONT_WEIGHT.SMALLEST};
line-height: 1.42857143;
font-family: ${FONT_FAMILY.MONOSPACE};
color: ${colors.TEXT_PRIMARY};
border: 1px solid ${colors.DIVIDER};
border-radius: 3px;
padding: 10px 12px;
padding-right: 38px;
position: relative;
flex: 1;
user-select: all;
${props => props.isHidden && css`
padding-right: 6px;
user-select: none;
border-radius: 3px 0px 0px 3px;
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: linear-gradient(to right,
rgba(255,255,255, 0) 0%,
rgba(255,255,255, 1) 220px
);
pointer-events: none; /* so the text is still selectable */
}
`};
const StyledInput = styled.div`
${props => props.isVerifying && css`
z-index: 10001; /* bigger than modal container */
@ -130,6 +99,7 @@ const EyeButton = styled(Button)`
z-index: 10001;
padding: 0;
width: 30px;
background: white;
top: 5px;
position: absolute;
right: 10px;
@ -168,36 +138,37 @@ const AccountReceive = (props: Props) => {
{isAddressVerifying && (
<AddressInfoText>Confirm address on Trezor</AddressInfoText>
)}
{((addressVerified || addressUnverified) && !isAddressVerifying) && (
<Tooltip
placement="left"
content={(
<VerifyAddressTooltip
isConnected={device.connected}
isAvailable={device.available}
addressUnverified={addressUnverified}
/>
)}
>
<EyeButton
isTransparent
onClick={() => props.showAddress(account.addressPath)}
>
<Icon
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
/>
</EyeButton>
</Tooltip>
)}
<ValueWrapper
isHidden={isAddressHidden}
<Label>Address</Label>
<Input
type="text"
value={address}
isPartiallyHidden={isAddressHidden}
isVerifying={isAddressVerifying}
>
{address}
</ValueWrapper>
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
<Tooltip
placement="bottom"
content={(
<VerifyAddressTooltip
isConnected={device.connected}
isAvailable={device.available}
addressUnverified={addressUnverified}
/>
)}
>
<EyeButton
isTransparent
onClick={() => props.showAddress(account.addressPath)}
>
<Icon
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
/>
</EyeButton>
</Tooltip>
)}
/>
{isAddressVerifying && (
<React.Fragment>
<ArrowUp />