diff options
author | Dan <danjm.com@gmail.com> | 2017-10-10 00:25:23 +0800 |
---|---|---|
committer | Chi Kei Chan <chikeichan@gmail.com> | 2017-10-13 02:09:05 +0800 |
commit | ea7926c211965e2e529e5795a4e1655e97e32144 (patch) | |
tree | 74a3efe1f046bd9e8aba74f5857fb2af0bde32e9 /ui/app/components | |
parent | fbab0f3a1f1bf78fdaf6b5639fb6a23d996f3645 (diff) | |
download | tangerine-wallet-browser-ea7926c211965e2e529e5795a4e1655e97e32144.tar.gz tangerine-wallet-browser-ea7926c211965e2e529e5795a4e1655e97e32144.tar.zst tangerine-wallet-browser-ea7926c211965e2e529e5795a4e1655e97e32144.zip |
Adds amount and gas field to sendV2.
Diffstat (limited to 'ui/app/components')
-rw-r--r-- | ui/app/components/send/currency-display.js | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js new file mode 100644 index 000000000..e0147012f --- /dev/null +++ b/ui/app/components/send/currency-display.js @@ -0,0 +1,85 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const Identicon = require('../identicon') +const AutosizeInput = require('react-input-autosize').default +const { conversionUtil } = require('../../conversion-util') + +module.exports = CurrencyDisplay + +inherits(CurrencyDisplay, Component) +function CurrencyDisplay () { + Component.call(this) + + this.state = { + minWidth: null, + } +} + +function isValidNumber (text) { + const re = /^([1-9]\d*|0)(\.|\.\d*)?$/ + return re.test(text) +} + +CurrencyDisplay.prototype.componentDidMount = function () { + this.setState({ minWidth: this.refs.currencyDisplayInput.sizer.scrollWidth + 10 }) +} + +CurrencyDisplay.prototype.render = function () { + const { + className, + primaryCurrency, + convertedCurrency, + value = '', + placeholder = '0', + conversionRate, + convertedPrefix = '', + readOnly = false, + handleChange, + inputFontSize, + } = this.props + const { minWidth } = this.state + + const convertedValue = conversionUtil(value, { + fromNumericBase: 'dec', + fromCurrency: primaryCurrency, + toCurrency: convertedCurrency, + conversionRate, + }) + + return h('div.currency-display', { + className, + }, [ + + h('div.currency-display__primary-row', [ + + h(AutosizeInput, { + ref: 'currencyDisplayInput', + className: 'currency-display__input-wrapper', + inputClassName: 'currency-display__input', + value, + placeholder, + readOnly, + minWidth, + onChange: (event) => { + const newValue = event.target.value + if (newValue && !isValidNumber(newValue)) { + event.preventDefault() + } + else { + handleChange(newValue) + } + }, + style: { fontSize: inputFontSize }, + }), + + h('span.currency-display__primary-currency', {}, primaryCurrency), + + ]), + + h('div.currency-display__converted-value', {}, `${convertedPrefix}${convertedValue} ${convertedCurrency}`), + + ]) + +} + |