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

Rewrite Tooltip component as ES6

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/components/selected-account/selected-account.component.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import copyToClipboard from 'copy-to-clipboard' import copyToClipboard from 'copy-to-clipboard'
import { addressSlicer } from '../../util' import { addressSlicer } from '../../util'
const Tooltip = require('../tooltip-v2.js') const Tooltip = require('../tooltip-v2.js').default
class SelectedAccount extends Component { class SelectedAccount extends Component {
state = { state = {

85
ui/app/components/tooltip-v2.js
View File

@ -1,33 +1,58 @@
const Component = require('react').Component import PropTypes from 'prop-types'
const h = require('react-hyperscript') import React, {PureComponent} from 'react'
const inherits = require('util').inherits import {Tooltip as ReactTippy} from 'react-tippy'
const ReactTippy = require('react-tippy').Tooltip
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) static propTypes = {
function Tooltip () { arrow: PropTypes.bool,
Component.call(this) children: PropTypes.node,
} containerClassName: PropTypes.string,
onHidden: PropTypes.func,
Tooltip.prototype.render = function () { position: PropTypes.oneOf([
const props = this.props 'top',
const { position, title, children, wrapperClassName, containerClassName, onHidden } = props 'right',
'bottom',
return h('div', { 'left',
className: wrapperClassName, ]),
}, [ size: PropTypes.oneOf([
'small', 'regular', 'big',
h(ReactTippy, { ]),
title, title: PropTypes.string,
position: position || 'left', trigger: PropTypes.any,
trigger: 'mouseenter', wrapperClassName: PropTypes.string,
hideOnClick: false, }
size: 'small',
arrow: true, render () {
className: containerClassName, const {arrow, children, containerClassName, position, size, title, trigger, onHidden, wrapperClassName } = this.props
onHidden,
}, children), return (
<div className={wrapperClassName}>
]) <ReactTippy
className={containerClassName}
title={title}
position={position}
trigger={trigger}
hideOnClick={false}
size={size}
arrow={arrow}
onHidden={onHidden}
>
{children}
</ReactTippy>
</div>
)
}
} }

2
ui/app/components/wallet-view.js
View File

@ -9,7 +9,7 @@ const classnames = require('classnames')
const { checksumAddress } = require('../util') const { checksumAddress } = require('../util')
const Identicon = require('./identicon') const Identicon = require('./identicon')
// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns // 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 copyToClipboard = require('copy-to-clipboard')
const actions = require('../actions') const actions = require('../actions')
const BalanceComponent = require('./balance-component') const BalanceComponent = require('./balance-component')