m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Cleaner implementation of currency-display input.

Browse Source
This commit is contained in:
Dan 2017-10-23 09:35:53 -02:30 committed by Chi Kei Chan
parent 754d117d18
commit 09d659614e
2 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ui/app/components/send/currency-display.js
View File

@ -20,14 +20,6 @@ function isValidInput (text) {
return re.test(text) return re.test(text)
} }
function resetCaretIfPastEnd (value, event) {
const caretPosition = event.target.selectionStart
if (caretPosition > value.length) {
event.target.setSelectionRange(value.length, value.length)
}
}
function toHexWei (value) { function toHexWei (value) {
return conversionUtil(value, { return conversionUtil(value, {
fromNumericBase: 'dec', fromNumericBase: 'dec',
@ -82,6 +74,8 @@ CurrencyDisplay.prototype.render = function () {
conversionRate, conversionRate,
}) })
const inputSizeMultiplier = readOnly ? 1 : 1.2;
return h('div', { return h('div', {
className, className,
style: { style: {
@ -95,35 +89,33 @@ CurrencyDisplay.prototype.render = function () {
h('input', { h('input', {
className: primaryBalanceClassName, className: primaryBalanceClassName,
value: `${value || initValueToRender} ${primaryCurrency}`, value: `${value || initValueToRender}`,
placeholder: `${0} ${primaryCurrency}`, placeholder: '0',
size: (value || initValueToRender).length * inputSizeMultiplier,
readOnly, readOnly,
onChange: (event) => { onChange: (event) => {
let newValue = event.target.value.split(' ')[0] let newValue = event.target.value
if (newValue === '') { if (newValue === '') {
this.setState({ value: '0' }) newValue = '0'
} }
else if (newValue.match(/^0[1-9]$/)) { else if (newValue.match(/^0[1-9]$/)) {
this.setState({ value: newValue.match(/[1-9]/)[0] }) newValue = newValue.match(/[1-9]/)[0]
} }
else if (newValue && !isValidInput(newValue)) {
if (newValue && !isValidInput(newValue)) {
event.preventDefault() event.preventDefault()
} }
else { else {
validate(this.getAmount(newValue))
this.setState({ value: newValue }) this.setState({ value: newValue })
} }
}, },
onBlur: event => !readOnly && handleChange(this.getAmount(event.target.value.split(' ')[0])), onBlur: event => !readOnly && handleChange(this.getAmount(event.target.value)),
onKeyUp: event => {
if (!readOnly) {
validate(toHexWei(value || initValueToRender))
resetCaretIfPastEnd(value || initValueToRender, event)
}
},
onClick: event => !readOnly && resetCaretIfPastEnd(value || initValueToRender, event),
}), }),
h('span.currency-display__currency-symbol', primaryCurrency),
]), ]),
]), ]),

10
ui/app/css/itcss/components/currency-display.scss
View File

@ -22,6 +22,7 @@
line-height: 22px; line-height: 22px;
border: none; border: none;
outline: 0 !important; outline: 0 !important;
max-width: 100%;
} }
&__primary-currency { &__primary-currency {
@ -43,4 +44,13 @@
font-size: 12px; font-size: 12px;
line-height: 12px; line-height: 12px;
} }
&__input-wrapper {
position: relative;
display: flex;
}
&__currency-symbol {
margin-top: 1px;
}
} }