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)
}
function resetCaretIfPastEnd (value, event) {
const caretPosition = event.target.selectionStart
if (caretPosition > value.length) {
event.target.setSelectionRange(value.length, value.length)
}
}
function toHexWei (value) {
return conversionUtil(value, {
fromNumericBase: 'dec',
@ -82,6 +74,8 @@ CurrencyDisplay.prototype.render = function () {
conversionRate,
})
const inputSizeMultiplier = readOnly ? 1 : 1.2;
return h('div', {
className,
style: {
@ -95,35 +89,33 @@ CurrencyDisplay.prototype.render = function () {
h('input', {
className: primaryBalanceClassName,
value: `${value || initValueToRender} ${primaryCurrency}`,
placeholder: `${0} ${primaryCurrency}`,
value: `${value || initValueToRender}`,
placeholder: '0',
size: (value || initValueToRender).length * inputSizeMultiplier,
readOnly,
onChange: (event) => {
let newValue = event.target.value.split(' ')[0]
let newValue = event.target.value
if (newValue === '') {
this.setState({ value: '0' })
newValue = '0'
}
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()
}
else {
validate(this.getAmount(newValue))
this.setState({ value: newValue })
}
},
onBlur: event => !readOnly && handleChange(this.getAmount(event.target.value.split(' ')[0])),
onKeyUp: event => {
if (!readOnly) {
validate(toHexWei(value || initValueToRender))
resetCaretIfPastEnd(value || initValueToRender, event)
}
},
onClick: event => !readOnly && resetCaretIfPastEnd(value || initValueToRender, event),
onBlur: event => !readOnly && handleChange(this.getAmount(event.target.value)),
}),
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;
border: none;
outline: 0 !important;
max-width: 100%;
}
&__primary-currency {
@ -43,4 +44,13 @@
font-size: 12px;
line-height: 12px;
}
&__input-wrapper {
position: relative;
display: flex;
}
&__currency-symbol {
margin-top: 1px;
}
}