feature/default_network_editable
Dan
7 years ago
parent
5677fdaf68
commit
e56b8c5055
@ -0,0 +1,79 @@ |
||||
const Component = require('react').Component |
||||
const h = require('react-hyperscript') |
||||
const inherits = require('util').inherits |
||||
const InputNumber = require('./input-number.js') |
||||
|
||||
module.exports = GasTooltip |
||||
|
||||
inherits(GasTooltip, Component) |
||||
function GasTooltip () { |
||||
Component.call(this) |
||||
this.state = { |
||||
gasLimit: 0, |
||||
gasPrice: 0, |
||||
} |
||||
|
||||
this.updateGasPrice = this.updateGasPrice.bind(this); |
||||
this.updateGasLimit = this.updateGasLimit.bind(this); |
||||
} |
||||
|
||||
GasTooltip.prototype.componentWillMount == function () { |
||||
const { gasPrice = 0, gasLimit = 0 } = this.props |
||||
|
||||
this.setState({ gasPrice, gasLimit }); |
||||
} |
||||
|
||||
GasTooltip.prototype.updateGasPrice = function (newPrice) { |
||||
const { onFeeChange } = this.props |
||||
const { gasLimit } = this.state |
||||
|
||||
this.setState({ gasPrice: newPrice }) |
||||
onFeeChange({ gasLimit, gasPrice: newPrice }) |
||||
} |
||||
|
||||
GasTooltip.prototype.updateGasLimit = function (newLimit) { |
||||
const { onFeeChange } = this.props |
||||
const { gasPrice } = this.state |
||||
|
||||
this.setState({ gasLimit: newLimit }) |
||||
onFeeChange({ gasLimit: newLimit, gasPrice }) |
||||
} |
||||
|
||||
GasTooltip.prototype.render = function () { |
||||
const { position, title, children, className, isOpen } = this.props |
||||
const { gasPrice, gasLimit } = this.state |
||||
|
||||
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', {}, [ |
||||
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', {}), |
||||
]) |
||||
: null |
||||
} |
||||
@ -0,0 +1,57 @@ |
||||
const Component = require('react').Component |
||||
const h = require('react-hyperscript') |
||||
const inherits = require('util').inherits |
||||
const findDOMNode = require('react-dom').findDOMNode |
||||
|
||||
module.exports = InputNumber |
||||
|
||||
inherits(InputNumber, Component) |
||||
function InputNumber () { |
||||
Component.call(this) |
||||
|
||||
this.state = { |
||||
value: 0, |
||||
} |
||||
|
||||
this.setValue = this.setValue.bind(this); |
||||
} |
||||
|
||||
InputNumber.prototype.componentWillMount == function () { |
||||
const { initValue = 0 } = this.props |
||||
|
||||
this.setState({ value: initValue }); |
||||
} |
||||
|
||||
InputNumber.prototype.setValue = function (newValue) { |
||||
const { fixed, min, onChange } = this.props |
||||
|
||||
if (fixed) newValue = Number(newValue.toFixed(4)) |
||||
|
||||
if (newValue >= min) { |
||||
this.setState({ value: newValue }) |
||||
onChange(newValue) |
||||
} |
||||
} |
||||
|
||||
InputNumber.prototype.render = function () { |
||||
const { unitLabel, step = 1, min, placeholder } = this.props |
||||
const { value } = this.state |
||||
|
||||
return h('div.customize-gas-input-wrapper', {}, [ |
||||
h('input.customize-gas-input', { |
||||
placeholder, |
||||
type: 'number', |
||||
value, |
||||
onChange: (e) => this.setValue(Number(e.target.value)) |
||||
}), |
||||
h('span.gas-tooltip-input-detail', {}, [unitLabel]), |
||||
h('div.gas-tooltip-input-arrows', {}, [ |
||||
h('i.fa.fa-angle-up', { |
||||
onClick: () => this.setValue(value + step) |
||||
}), |
||||
h('i.fa.fa-angle-down', { |
||||
onClick: () => this.setValue(value - step) |
||||
}), |
||||
]), |
||||
]) |
||||
} |
||||
@ -1,66 +0,0 @@ |
||||
const Component = require('react').Component |
||||
const h = require('react-hyperscript') |
||||
const inherits = require('util').inherits |
||||
const findDOMNode = require('react-dom').findDOMNode |
||||
const ReactTooltip = require('react-tooltip') |
||||
|
||||
module.exports = NewTooltip |
||||
|
||||
inherits(NewTooltip, Component) |
||||
function NewTooltip () { |
||||
Component.call(this) |
||||
this.state = { |
||||
tooltipNode: null, |
||||
tooltipBase: null, |
||||
} |
||||
|
||||
// this.pageClick = this.pageClick.bind(this)
|
||||
} |
||||
|
||||
// NewTooltip.prototype.pageClick = function (e) {
|
||||
// // event.preventDefault();
|
||||
// const tooltipNode = this.state.tooltipNode
|
||||
// console.log(`e.target`, e.target);
|
||||
// console.log(`tooltipNode.contains(e.target)`, tooltipNode.contains(e.target));
|
||||
// },
|
||||
|
||||
NewTooltip.prototype.componentDidMount = function () { |
||||
const tooltipNode = findDOMNode(this); |
||||
const tooltipBase = findDOMNode(this.refs.tester) |
||||
|
||||
this.setState({ tooltipBase, tooltipNode }) |
||||
} |
||||
|
||||
NewTooltip.prototype.componentDidUpdate = function () { |
||||
const { show } = this.props |
||||
const tooltipBase = this.state.tooltipBase |
||||
const tooltipNode = this.state.tooltipNode |
||||
|
||||
if (show) { |
||||
ReactTooltip.show(tooltipBase) |
||||
} |
||||
else { |
||||
ReactTooltip.hide(tooltipBase) |
||||
}
|
||||
} |
||||
|
||||
NewTooltip.prototype.render = function () { |
||||
const props = this.props |
||||
const { position, title, children } = props |
||||
|
||||
return h('div', {}, [ |
||||
h('div', { |
||||
'data-tip': 'test', |
||||
'data-for': 'something', |
||||
'ref': 'tester', |
||||
}), |
||||
h(ReactTooltip, { |
||||
place: position || 'top', |
||||
effect: 'solid', |
||||
id: 'something', |
||||
className: 'send-tooltip', |
||||
type: 'light', |
||||
}, children), |
||||
]) |
||||
|
||||
} |
||||
Loading…
Reference in new issue