From e1b78da3e6b45037f8b9dacc4385c02c6c892f7c Mon Sep 17 00:00:00 2001
From: Frankie <frankie.pangilinan@consensys.net>
Date: Thu, 6 Oct 2016 13:03:01 -0700
Subject: Add custom gas field to send page

---
 ui/app/components/range-slider.js | 63 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 ui/app/components/range-slider.js

(limited to 'ui/app/components/range-slider.js')

diff --git a/ui/app/components/range-slider.js b/ui/app/components/range-slider.js
new file mode 100644
index 000000000..6ca6e434e
--- /dev/null
+++ b/ui/app/components/range-slider.js
@@ -0,0 +1,63 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = RangeSlider
+
+inherits(RangeSlider, Component)
+function RangeSlider () {
+  Component.call(this)
+}
+
+RangeSlider.prototype.render = function () {
+  const props = this.props
+  const onChange = props.onChange || function () {}
+  const name = props.name
+  const {
+    min = 0,
+    max = 100,
+    increment = 1,
+    defaultValue = 50,
+    mirrorInput = false,
+  } = this.props.options
+  const {container, input, range} = props.style
+
+  return (
+    h('.flex-row', {
+      style: container,
+    }, [
+      h('input', {
+        type: 'range',
+        name: name,
+        min: min,
+        max: max,
+        step: increment,
+        style: range,
+        defaultValue: defaultValue,
+        onChange: mirrorInput ? this.mirrorInputs.bind(this, name) : onChange,
+      }),
+
+      // Mirrored input for range
+      mirrorInput ? h('input.large-input', {
+        type: 'number',
+        name: `${name}Mirror`,
+        min: min,
+        max: max,
+        defaultValue: defaultValue,
+        step: increment,
+        style: input,
+        onChange: this.mirrorInputs.bind(this, `${name}Mirror`),
+      }) : null,
+    ])
+  )
+}
+
+RangeSlider.prototype.mirrorInputs = function (active) {
+  var range = document.querySelector(`input[name="${this.props.name}"]`)
+  var inputMirror = document.querySelector(`input[name="${this.props.name}Mirror"]`)
+  if (active === this.props.name) {
+    inputMirror.value = range.value
+  } else {
+    range.value = inputMirror.value
+  }
+}
-- 
cgit v1.2.3


From c400f7c0f6bff13400eedcd80fdc83e572eb42a8 Mon Sep 17 00:00:00 2001
From: Frankie <frankie.pangilinan@consensys.net>
Date: Wed, 12 Oct 2016 19:35:09 -0700
Subject: Fix gasPrice range

---
 ui/app/components/range-slider.js | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

(limited to 'ui/app/components/range-slider.js')

diff --git a/ui/app/components/range-slider.js b/ui/app/components/range-slider.js
index 6ca6e434e..cc1de1ce5 100644
--- a/ui/app/components/range-slider.js
+++ b/ui/app/components/range-slider.js
@@ -10,8 +10,9 @@ function RangeSlider () {
 }
 
 RangeSlider.prototype.render = function () {
+  const state = this.state || {}
   const props = this.props
-  const onChange = props.onChange || function () {}
+  const onInput = props.onInput || function () {}
   const name = props.name
   const {
     min = 0,
@@ -33,8 +34,8 @@ RangeSlider.prototype.render = function () {
         max: max,
         step: increment,
         style: range,
-        defaultValue: defaultValue,
-        onChange: mirrorInput ? this.mirrorInputs.bind(this, name) : onChange,
+        value: state.value || defaultValue,
+        onChange: mirrorInput ? this.mirrorInputs.bind(this, name) : onInput,
       }),
 
       // Mirrored input for range
@@ -43,7 +44,7 @@ RangeSlider.prototype.render = function () {
         name: `${name}Mirror`,
         min: min,
         max: max,
-        defaultValue: defaultValue,
+        value: state.value || defaultValue,
         step: increment,
         style: input,
         onChange: this.mirrorInputs.bind(this, `${name}Mirror`),
@@ -52,12 +53,6 @@ RangeSlider.prototype.render = function () {
   )
 }
 
-RangeSlider.prototype.mirrorInputs = function (active) {
-  var range = document.querySelector(`input[name="${this.props.name}"]`)
-  var inputMirror = document.querySelector(`input[name="${this.props.name}Mirror"]`)
-  if (active === this.props.name) {
-    inputMirror.value = range.value
-  } else {
-    range.value = inputMirror.value
-  }
+RangeSlider.prototype.mirrorInputs = function (active, event) {
+  this.setState({value: event.target.value})
 }
-- 
cgit v1.2.3


From aace26c4bda151c71f9f8c73669e789ac258e9ee Mon Sep 17 00:00:00 2001
From: Frankie <frankie.pangilinan@consensys.net>
Date: Thu, 13 Oct 2016 16:53:32 -0700
Subject: Create callback and Clean-up details

---
 ui/app/components/range-slider.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'ui/app/components/range-slider.js')

diff --git a/ui/app/components/range-slider.js b/ui/app/components/range-slider.js
index cc1de1ce5..823f5eb01 100644
--- a/ui/app/components/range-slider.js
+++ b/ui/app/components/range-slider.js
@@ -35,7 +35,7 @@ RangeSlider.prototype.render = function () {
         step: increment,
         style: range,
         value: state.value || defaultValue,
-        onChange: mirrorInput ? this.mirrorInputs.bind(this, name) : onInput,
+        onChange: mirrorInput ? this.mirrorInputs.bind(this, event) : onInput,
       }),
 
       // Mirrored input for range
@@ -47,12 +47,12 @@ RangeSlider.prototype.render = function () {
         value: state.value || defaultValue,
         step: increment,
         style: input,
-        onChange: this.mirrorInputs.bind(this, `${name}Mirror`),
+        onChange: this.mirrorInputs.bind(this, event),
       }) : null,
     ])
   )
 }
 
-RangeSlider.prototype.mirrorInputs = function (active, event) {
+RangeSlider.prototype.mirrorInputs = function (event) {
   this.setState({value: event.target.value})
 }
-- 
cgit v1.2.3