From e56b8c5055a19ccfb88ef71f4cef13fb6d05a54a Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 25 Aug 2017 13:48:52 -0230 Subject: Refactor tooltip to remove external lib; tooltip now updating gas fee in parent. --- ui/app/components/input-number.js | 57 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 ui/app/components/input-number.js (limited to 'ui/app/components/input-number.js') 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) + }), + ]), + ]) +} -- cgit v1.2.3 From c9e134a996f69367155aab416abb683fb82d4b9a Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 25 Aug 2017 20:53:30 -0230 Subject: Fully connect gas data in send form and tooltip to state; final styling improvements. Fully connect gas fields in send form and tooltip to state --- ui/app/components/input-number.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index 5b4265459..c8bdd5ec5 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -16,9 +16,9 @@ function InputNumber () { this.setValue = this.setValue.bind(this); } -InputNumber.prototype.componentWillMount == function () { +InputNumber.prototype.componentWillMount = function () { const { initValue = 0 } = this.props - + this.setState({ value: initValue }); } @@ -36,7 +36,7 @@ InputNumber.prototype.setValue = function (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, -- cgit v1.2.3 From e7b3ef0708290a81dad5c469adaa6fab3f1c45b5 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 12:20:48 -0230 Subject: Lint fixes --- ui/app/components/input-number.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index c8bdd5ec5..e3bbaf380 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -1,7 +1,6 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const findDOMNode = require('react-dom').findDOMNode module.exports = InputNumber @@ -13,13 +12,13 @@ function InputNumber () { value: 0, } - this.setValue = this.setValue.bind(this); + this.setValue = this.setValue.bind(this) } InputNumber.prototype.componentWillMount = function () { const { initValue = 0 } = this.props - - this.setState({ value: initValue }); + + this.setState({ value: initValue }) } InputNumber.prototype.setValue = function (newValue) { @@ -34,23 +33,23 @@ InputNumber.prototype.setValue = function (newValue) { } InputNumber.prototype.render = function () { - const { unitLabel, step = 1, min, placeholder } = this.props + const { unitLabel, step = 1, 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)) + 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) + onClick: () => this.setValue(value + step), }), h('i.fa.fa-angle-down', { - onClick: () => this.setValue(value - step) + onClick: () => this.setValue(value - step), }), ]), ]) -- cgit v1.2.3 From 663cb758b345d7138b9e9c68489e1859dbfaa78e Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 11 Sep 2017 00:45:06 -0700 Subject: Style send token screen --- ui/app/components/input-number.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index e3bbaf380..63e841288 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -49,6 +49,7 @@ InputNumber.prototype.render = function () { onClick: () => this.setValue(value + step), }), h('i.fa.fa-angle-down', { + style: { cursor: 'pointer' }, onClick: () => this.setValue(value - step), }), ]), -- cgit v1.2.3 From 836bf2e1a38bb6917f1b7fe9db0604c8143c7adf Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 11 Sep 2017 23:18:54 -0700 Subject: Add frontend validation to send-token --- ui/app/components/input-number.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index 63e841288..2824d77aa 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -22,7 +22,7 @@ InputNumber.prototype.componentWillMount = function () { } InputNumber.prototype.setValue = function (newValue) { - const { fixed, min, onChange } = this.props + const { fixed, min = -1, onChange } = this.props if (fixed) newValue = Number(newValue.toFixed(4)) -- cgit v1.2.3 From 803eaaf968161f16aaf72d59b979dfbb7fb9b352 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 13 Oct 2017 16:19:22 -0400 Subject: [NewUI] SendV2-#8: Send container handles tokens; gas info dynamic from state (#2364) * Adds memo field to send-v2. * Vertical align transaction with flexbox. * Customize Gas UI * Remove internal state from InputNumber and fix use in gastooltip. * Move customize-gas-modal to its own folder and minor cleanup * Create send container, get account info from state, and make currency display more reusable * Adjusts send-v2 and container for send-token. Dynamically getting suggested gas prices. --- ui/app/components/input-number.js | 29 +++++++++-------------------- 1 file changed, 9 insertions(+), 20 deletions(-) (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index 2824d77aa..16347fd5e 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -1,6 +1,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const { addCurrencies } = require('../conversion-util') module.exports = InputNumber @@ -8,49 +9,37 @@ 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 = -1, onChange } = this.props + const { fixed, min = -1, max = Infinity, onChange } = this.props - if (fixed) newValue = Number(newValue.toFixed(4)) + newValue = Number(fixed ? newValue.toFixed(4) : newValue) - if (newValue >= min) { - this.setState({ value: newValue }) + if (newValue >= min && newValue <= max) { onChange(newValue) } } InputNumber.prototype.render = function () { - const { unitLabel, step = 1, placeholder } = this.props - const { value } = this.state + const { unitLabel, step = 1, placeholder, value = 0 } = this.props return h('div.customize-gas-input-wrapper', {}, [ h('input.customize-gas-input', { placeholder, type: 'number', - value, - onChange: (e) => this.setValue(Number(e.target.value)), + value: value, + onChange: (e) => this.setValue(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), + onClick: () => this.setValue(addCurrencies(value, step)), }), h('i.fa.fa-angle-down', { style: { cursor: 'pointer' }, - onClick: () => this.setValue(value - step), + onClick: () => this.setValue(addCurrencies(value, step * -1)), }), ]), ]) -- cgit v1.2.3