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

Refactor for clean handling of tooltip close.

Browse Source
This commit is contained in:
Dan 2017-08-28 15:09:05 -02:30
parent 0a44c82458
commit 43ceeacf0f
3 changed files with 64 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
ui/app/components/gas-tooltip.js
View File

@ -16,6 +16,7 @@ function GasTooltip () {
this.updateGasPrice = this.updateGasPrice.bind(this);
this.updateGasLimit = this.updateGasLimit.bind(this);
this.onClose = this.onClose.bind(this);
}
GasTooltip.prototype.componentWillMount = function () {
@ -40,97 +41,54 @@ GasTooltip.prototype.updateGasLimit = function (newLimit) {
onFeeChange({ gasLimit: newLimit, gasPrice })
}
GasTooltip.prototype.onClose = function (e) {
e.stopPropagation();
this.props.onClose();
}
GasTooltip.prototype.render = function () {
const { position, title, children, className, isOpen } = this.props
const { position, title, children, className } = this.props
const { gasPrice, gasLimit } = this.state
this.manageListeners()
return isOpen
? h('div.customize-gas-tooltip-container', {}, [
h('div.customize-gas-tooltip', {}, [
h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']),
h('div.gas-tooltip-input-label', {}, [
h('span.gas-tooltip-label', {}, ['Gas Price']),
h('i.fa.fa-info-circle')
]),
h(InputNumber, {
unitLabel: 'GWEI',
step: 0.0001,
min: 0.0000,
placeholder: '0.0000',
fixed: 4,
initValue: gasPrice,
onChange: (newPrice) => this.updateGasPrice(newPrice),
}),
h('div.gas-tooltip-input-label', {
style: {
'marginTop': '81px',
},
}, [
h('span.gas-tooltip-label', {}, ['Gas Limit']),
h('i.fa.fa-info-circle')
]),
h(InputNumber, {
unitLabel: 'UNITS',
step: 1,
min: 0,
placeholder: '0',
initValue: gasLimit,
onChange: (newLimit) => this.updateGasLimit(newLimit),
}),
return h('div', {}, [
h('div.gas-tooltip-close-area', {
onClick: this.onClose
}),
h('div.customize-gas-tooltip-container', {}, [
h('div.customize-gas-tooltip', {}, [
h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']),
h('div.gas-tooltip-input-label', {}, [
h('span.gas-tooltip-label', {}, ['Gas Price']),
h('i.fa.fa-info-circle')
]),
h('div.gas-tooltip-arrow', {}),
])
: null
}
GasTooltip.prototype.manageListeners = function () {
const isOpen = this.props.isOpen
const onClickOutside = this.props.onClickOutside
if (isOpen) {
this.outsideClickHandler = onClickOutside
} else if (!isOpen) {
this.outsideClickHandler = null
}
}
GasTooltip.prototype.componentDidMount = function () {
if (this && document.body) {
this.globalClickHandler = this.globalClickOccurred.bind(this)
document.body.addEventListener('click', this.globalClickHandler)
var container = findDOMNode(this)
this.container = container
}
}
GasTooltip.prototype.componentWillUnmount = function () {
if (this && document.body) {
document.body.removeEventListener('click', this.globalClickHandler)
}
}
GasTooltip.prototype.globalClickOccurred = function (event) {
const target = event.target
const container = findDOMNode(this)
if (target !== container &&
!isDescendant(container, target) &&
this.outsideClickHandler) {
this.outsideClickHandler(event)
}
}
function isDescendant (parent, child) {
var node = child.parentNode
while (node !== null) {
if (node === parent) {
return true
}
node = node.parentNode
}
return false
h(InputNumber, {
unitLabel: 'GWEI',
step: 0.0001,
min: 0.0000,
placeholder: '0.0000',
fixed: 4,
initValue: gasPrice,
onChange: (newPrice) => this.updateGasPrice(newPrice),
}),
h('div.gas-tooltip-input-label', {
style: {
'marginTop': '81px',
},
}, [
h('span.gas-tooltip-label', {}, ['Gas Limit']),
h('i.fa.fa-info-circle')
]),
h(InputNumber, {
unitLabel: 'UNITS',
step: 1,
min: 0,
placeholder: '0',
initValue: gasLimit,
onChange: (newLimit) => this.updateGasLimit(newLimit),
}),
]),
h('div.gas-tooltip-arrow', {}),
])
])
}

9
ui/app/css/itcss/components/send.scss
View File

@ -95,6 +95,15 @@
cursor: pointer;
}
.gas-tooltip-close-area {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
}
.customize-gas-tooltip-container {
position: absolute;
left: 76px;

15
ui/app/send.js
View File

@ -267,18 +267,17 @@ SendTransactionScreen.prototype.render = function () {
})
: h('div', {}, [`${this.state.newTx.gasFee} ETH`]),
h('div.send-screen-gas-input-customize', {
onClick: () => this.setTooltipOpen.bind(this)(!this.state.tooltipIsOpen),
onClick: () => this.toggleTooltip.bind(this)(!this.state.tooltipIsOpen),
}, [
'Customize'
]),
]),
h(GasTooltip, {
isOpen: this.state.tooltipIsOpen,
this.state.tooltipIsOpen && h(GasTooltip, {
className: 'send-tooltip',
gasPrice: parseInt(this.state.newTx.gasPrice, 16),
gasLimit: parseInt(this.state.newTx.gas, 16),
onClickOutside: () => this.setTooltipOpen.bind(this)(false),
onClose: this.closeTooltip.bind(this),
onFeeChange: ({gasLimit, gasPrice}) => {
this.setState({
newTx: Object.assign(
@ -585,8 +584,12 @@ SendTransactionScreen.prototype.renderSendToken = function () {
)
}
SendTransactionScreen.prototype.setTooltipOpen = function (isOpen) {
this.setState({ tooltipIsOpen: isOpen })
SendTransactionScreen.prototype.toggleTooltip = function () {
this.setState({ tooltipIsOpen: !this.state.tooltipIsOpen })
}
SendTransactionScreen.prototype.closeTooltip = function () {
this.setState({ tooltipIsOpen: false })
}
SendTransactionScreen.prototype.setCurrentCurrency = function (newCurrency) {