arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

Added custom container for tooltip

Browse Source
This commit is contained in:
Vladimir Volek 2018-09-05 12:20:07 +02:00
parent 8146a78f7d
commit 1ff9060ff0
4 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
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",

40
src/components/Tooltip/index.js
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,

10
src/views/Wallet/views/AccountReceive/index.js
View File

@ -7,7 +7,7 @@ import Icon from 'components/Icon';
import ICONS from 'config/icons';
import colors from 'config/colors';
import Tooltip from 'rc-tooltip';
import Tooltip from 'components/Tooltip';
import { QRCode } from 'react-qr-svg';
import SelectedAccount from 'views/Wallet/components/SelectedAccount';
@ -112,8 +112,6 @@ const qrCodeStyle = {
margin: '20px auto',
};
const TooltipContentWrapper = styled.div``;
const AccountReceive = (props: Props) => {
const device = props.wallet.selectedDevice;
const {
@ -149,8 +147,8 @@ const AccountReceive = (props: Props) => {
<Tooltip
arrowContent={<div className="rc-tooltip-arrow-inner" />}
placement="bottomRight"
overlay={(
<TooltipContentWrapper>
content={(
<React.Fragment>
{addressUnverified ? (
<React.Fragment>
Unverified address.
@ -162,7 +160,7 @@ const AccountReceive = (props: Props) => {
{device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
</React.Fragment>
)}
</TooltipContentWrapper>
</React.Fragment>
)}
>
<EyeButton

11
yarn.lock
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"