From db241e6b914d301086f54bb62fb307519a8386ec Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Sat, 8 Sep 2018 20:36:19 -0230 Subject: Rewrite Tooltip component as ES6 --- .../selected-account/selected-account.component.js | 2 +- ui/app/components/tooltip-v2.js | 81 ++++++++++++++-------- ui/app/components/wallet-view.js | 2 +- 3 files changed, 55 insertions(+), 30 deletions(-) (limited to 'ui') diff --git a/ui/app/components/selected-account/selected-account.component.js b/ui/app/components/selected-account/selected-account.component.js index 6c202141e..55b935ee0 100644 --- a/ui/app/components/selected-account/selected-account.component.js +++ b/ui/app/components/selected-account/selected-account.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import copyToClipboard from 'copy-to-clipboard' import { addressSlicer } from '../../util' -const Tooltip = require('../tooltip-v2.js') +const Tooltip = require('../tooltip-v2.js').default class SelectedAccount extends Component { state = { diff --git a/ui/app/components/tooltip-v2.js b/ui/app/components/tooltip-v2.js index 05a5efc80..0ac5444d6 100644 --- a/ui/app/components/tooltip-v2.js +++ b/ui/app/components/tooltip-v2.js @@ -1,33 +1,58 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const ReactTippy = require('react-tippy').Tooltip +import PropTypes from 'prop-types' +import React, {PureComponent} from 'react' +import {Tooltip as ReactTippy} from 'react-tippy' -module.exports = Tooltip +export default class Tooltip extends PureComponent { + static defaultProps = { + arrow: true, + children: null, + containerClassName: '', + hideOnClick: false, + onHidden: null, + position: 'left', + size: 'small', + title: null, + trigger: 'mouseenter', + wrapperClassName: '', + } -inherits(Tooltip, Component) -function Tooltip () { - Component.call(this) -} - -Tooltip.prototype.render = function () { - const props = this.props - const { position, title, children, wrapperClassName, containerClassName, onHidden } = props - - return h('div', { - className: wrapperClassName, - }, [ + static propTypes = { + arrow: PropTypes.bool, + children: PropTypes.node, + containerClassName: PropTypes.string, + onHidden: PropTypes.func, + position: PropTypes.oneOf([ + 'top', + 'right', + 'bottom', + 'left', + ]), + size: PropTypes.oneOf([ + 'small', 'regular', 'big', + ]), + title: PropTypes.string, + trigger: PropTypes.any, + wrapperClassName: PropTypes.string, + } - h(ReactTippy, { - title, - position: position || 'left', - trigger: 'mouseenter', - hideOnClick: false, - size: 'small', - arrow: true, - className: containerClassName, - onHidden, - }, children), + render () { + const {arrow, children, containerClassName, position, size, title, trigger, onHidden, wrapperClassName } = this.props - ]) + return ( +
+ + {children} + +
+ ) + } } diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 6de265110..77c7f3a4b 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -9,7 +9,7 @@ const classnames = require('classnames') const { checksumAddress } = require('../util') const Identicon = require('./identicon') // const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns -const Tooltip = require('./tooltip-v2.js') +const Tooltip = require('./tooltip-v2.js').default const copyToClipboard = require('copy-to-clipboard') const actions = require('../actions') const BalanceComponent = require('./balance-component') -- cgit v1.2.3 From 47b32682f33b3f1a3757ea10c2d7e4a04fa584b1 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Sat, 8 Sep 2018 20:43:19 -0230 Subject: Don't render tooltips without titles --- ui/app/components/tooltip-v2.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'ui') diff --git a/ui/app/components/tooltip-v2.js b/ui/app/components/tooltip-v2.js index 0ac5444d6..054782203 100644 --- a/ui/app/components/tooltip-v2.js +++ b/ui/app/components/tooltip-v2.js @@ -38,6 +38,14 @@ export default class Tooltip extends PureComponent { render () { const {arrow, children, containerClassName, position, size, title, trigger, onHidden, wrapperClassName } = this.props + if (!title) { + return ( +
+ {children} +
+ ) + } + return (
Date: Sat, 8 Sep 2018 20:48:26 -0230 Subject: Show failed tx RPC error messages in tooltips This changeset displays the error messages attached to txMeta for a failed tx in a tooltip on hover in the tx list view. This will only display for txs with the `txMeta.err.rpc.value` property, not all failed txs. --- .../transaction-list-item/transaction-list-item.component.js | 5 +++++ .../transaction-status/transaction-status.component.js | 12 ++++++++++-- 2 files changed, 15 insertions(+), 2 deletions(-) (limited to 'ui') diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js index 4fddd45ef..140763fba 100644 --- a/ui/app/components/transaction-list-item/transaction-list-item.component.js +++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js @@ -131,6 +131,11 @@ export default class TransactionListItem extends PureComponent { { this.renderPrimaryCurrency() } { this.renderSecondaryCurrency() } diff --git a/ui/app/components/transaction-status/transaction-status.component.js b/ui/app/components/transaction-status/transaction-status.component.js index a4c827ae8..c22baf18a 100644 --- a/ui/app/components/transaction-status/transaction-status.component.js +++ b/ui/app/components/transaction-status/transaction-status.component.js @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' +import Tooltip from '../tooltip-v2' import { UNAPPROVED_STATUS, REJECTED_STATUS, @@ -29,6 +30,10 @@ const statusToTextHash = { } export default class TransactionStatus extends PureComponent { + static defaultProps = { + title: null, + } + static contextTypes = { t: PropTypes.func, } @@ -36,15 +41,18 @@ export default class TransactionStatus extends PureComponent { static propTypes = { statusKey: PropTypes.string, className: PropTypes.string, + title: PropTypes.string, } render () { - const { className, statusKey } = this.props + const { className, statusKey, title } = this.props const statusText = this.context.t(statusToTextHash[statusKey] || statusKey) return (
- { statusText } + + { statusText } +
) } -- cgit v1.2.3 From e39050f4fe1ff76e48e08cf91c244b66fe1c406e Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Sat, 8 Sep 2018 20:56:02 -0230 Subject: Show failed tx txMeta.err in tooltips --- .../components/transaction-list-item/transaction-list-item.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js index 140763fba..75b41a477 100644 --- a/ui/app/components/transaction-list-item/transaction-list-item.component.js +++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js @@ -134,7 +134,7 @@ export default class TransactionListItem extends PureComponent { title={( (transaction.err && transaction.err.rpc) ? transaction.err.rpc.message - : null + : transaction.err && transaction.err.message )} /> { this.renderPrimaryCurrency() } -- cgit v1.2.3