Refactor tooltip to remove external lib; tooltip now updating gas fee in parent.

3 files changed, 136 insertions, 66 deletions

diff --git a/ui/app/components/gas-tooltip.js b/ui/app/components/gas-tooltip.js
new file mode 100644
index 000000000..13df1254a
--- /dev/null
+++ b/ui/app/components/gas-tooltip.js
@@ -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
+}
diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js
new file mode 100644
index 000000000..5b4265459
--- /dev/null
+++ b/ui/app/components/input-number.js
@@ -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)
+      }),
+    ]),
+  ])
+}
diff --git a/ui/app/components/new-tooltip.js b/ui/app/components/new-tooltip.js
deleted file mode 100644
index e6103dc95..000000000
--- a/ui/app/components/new-tooltip.js
+++ /dev/null
@@ -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),
-  ])
-    
-}