From 5aaadade36e72acf2d671b33fd515a289f81b066 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 30 Oct 2018 15:26:26 +0100 Subject: [PATCH] Refactored to input --- src/components/inputs/Input/index.js | 22 +++++ .../Wallet/views/Account/Receive/index.js | 95 +++++++------------ 2 files changed, 55 insertions(+), 62 deletions(-) diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 9c763607..54fd8fdb 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -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)} /> )} + + {this.props.icon} 0} innerRef={this.props.innerRef} @@ -131,6 +150,7 @@ class Input extends PureComponent { name={this.props.name} data-lpignore="true" /> + {this.props.sideAddons && this.props.sideAddons.map(sideAddon => sideAddon)} @@ -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 = { diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js index 0ab6b908..a0eba06a 100644 --- a/src/views/Wallet/views/Account/Receive/index.js +++ b/src/views/Wallet/views/Account/Receive/index.js @@ -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 && ( Confirm address on Trezor )} - {((addressVerified || addressUnverified) && !isAddressVerifying) && ( - - )} - > - props.showAddress(account.addressPath)} - > - - - - - - )} - Address + - {address} - + icon={((addressVerified || addressUnverified) && !isAddressVerifying) && ( + + )} + > + props.showAddress(account.addressPath)} + > + + + + + + )} + /> {isAddressVerifying && (