1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 16:38:08 +00:00

Merge branch 'styled-components-refactor' of https://github.com/satoshilabs/trezor-wallet into styled-components-refactor

This commit is contained in:
Vasek Mlejnsky 2018-09-05 12:37:58 +02:00
commit 5ec36cfd32
4 changed files with 38 additions and 23 deletions

View File

@ -37,7 +37,7 @@
"raf": "^3.4.0",
"raven-js": "^3.22.3",
"rc-tooltip": "^3.7.0",
"react": "^16.2.0",
"react": "^16.4.2",
"react-css-transition": "^0.7.4",
"react-dom": "^16.2.0",
"react-hot-loader": "^4.3.4",

View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { Component } from 'react';
import RcTooltip from 'rc-tooltip';
import colors from 'config/colors';
import styled from 'styled-components';
@ -15,6 +15,7 @@ const Wrapper = styled.div`
position: absolute;
z-index: 1070;
display: block;
background: red;
visibility: visible;
border: 1px solid ${colors.DIVIDER};
border-radius: 3px;
@ -170,24 +171,31 @@ const Wrapper = styled.div`
}
`;
const Tooltip = ({
content, placement = 'bottomRight', children, className,
}) => (
<Wrapper>
<RcTooltip
className={className}
arrowContent={<div className="rc-tooltip-arrow-inner" />}
placement={placement}
overlay={<TooltipContent>{content}</TooltipContent>}
>
{children}
</RcTooltip>
</Wrapper>
);
class Tooltip extends Component {
constructor(props) {
super(props);
this.tooltipContainerRef = React.createRef();
}
render() {
const { placement, content, children } = this.props;
return (
<Wrapper innerRef={this.tooltipContainerRef}>
<RcTooltip
getTooltipContainer={() => this.tooltipContainerRef.current}
arrowContent={<div className="rc-tooltip-arrow-inner" />}
placement={placement}
overlay={<TooltipContent>{content}</TooltipContent>}
>
{children}
</RcTooltip>
</Wrapper>
);
}
}
Tooltip.propTypes = {
placement: PropTypes.string,
className: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.element,
PropTypes.string,

View File

@ -112,8 +112,6 @@ const qrCodeStyle = {
margin: '20px auto',
};
const TooltipContentWrapper = styled.div``;
const AccountReceive = (props: Props) => {
const device = props.wallet.selectedDevice;
const {
@ -148,8 +146,8 @@ const AccountReceive = (props: Props) => {
{((addressVerified || addressUnverified) && !isAddressVerifying) && (
<Tooltip
placement="bottomRight"
overlay={(
<TooltipContentWrapper>
content={(
<React.Fragment>
{addressUnverified ? (
<React.Fragment>
Unverified address.
@ -161,7 +159,7 @@ const AccountReceive = (props: Props) => {
{device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
</React.Fragment>
)}
</TooltipContentWrapper>
</React.Fragment>
)}
>
<EyeButton

View File

@ -8055,7 +8055,7 @@ react-transition-group@^2.2.1:
prop-types "^15.5.8"
warning "^3.0.0"
"react@^15.4.2 || ^16.0.0", react@^16.2.0:
"react@^15.4.2 || ^16.0.0":
version "16.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
dependencies:
@ -8064,6 +8064,15 @@ react-transition-group@^2.2.1:
object-assign "^4.1.1"
prop-types "^15.6.0"
react@^16.4.2:
version "16.4.2"
resolved "https://registry.yarnpkg.com/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.0"
read-chunk@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-2.1.0.tgz#6a04c0928005ed9d42e1a6ac5600e19cbc7ff655"