1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Rewrite Tooltip component as ES6

This commit is contained in:
Whymarrh Whitby 2018-09-08 20:36:19 -02:30
parent 7c3b69e1e4
commit db241e6b91
3 changed files with 57 additions and 32 deletions

View File

@ -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 = {

View File

@ -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,
}, [
h(ReactTippy, {
title,
position: position || 'left',
trigger: 'mouseenter',
hideOnClick: false,
size: 'small',
arrow: true,
className: containerClassName,
onHidden,
}, children),
])
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,
}
render () {
const {arrow, children, containerClassName, position, size, title, trigger, onHidden, wrapperClassName } = this.props
return (
<div className={wrapperClassName}>
<ReactTippy
className={containerClassName}
title={title}
position={position}
trigger={trigger}
hideOnClick={false}
size={size}
arrow={arrow}
onHidden={onHidden}
>
{children}
</ReactTippy>
</div>
)
}
}

View File

@ -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')