|
|
@ -2,7 +2,7 @@ |
|
|
|
|
|
|
|
|
import React, { PureComponent } from 'react' |
|
|
import React, { PureComponent } from 'react' |
|
|
import styled from 'styled-components' |
|
|
import styled from 'styled-components' |
|
|
import { parseCurrencyUnit, formatCurrencyUnit } from '@ledgerhq/currencies' |
|
|
import { formatCurrencyUnit } from '@ledgerhq/currencies' |
|
|
|
|
|
|
|
|
import noop from 'lodash/noop' |
|
|
import noop from 'lodash/noop' |
|
|
import isNaN from 'lodash/isNaN' |
|
|
import isNaN from 'lodash/isNaN' |
|
|
@ -17,24 +17,14 @@ function parseValue(value) { |
|
|
return value.toString().replace(/,/g, '.') |
|
|
return value.toString().replace(/,/g, '.') |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function format(unit: Unit, value: number) { |
|
|
function format(unit: Unit, value: number, { isFocused, showAllDigits }) { |
|
|
return formatCurrencyUnit(unit, value, { |
|
|
return formatCurrencyUnit(unit, value, { |
|
|
|
|
|
useGrouping: !isFocused, |
|
|
disableRounding: true, |
|
|
disableRounding: true, |
|
|
showAllDigits: false, |
|
|
showAllDigits: !!showAllDigits && !isFocused, |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function unformat(unit, value) { |
|
|
|
|
|
if (value === 0 || value === '') { |
|
|
|
|
|
return '0' |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let v = parseCurrencyUnit(unit, value.toString()) |
|
|
|
|
|
v /= 10 ** unit.magnitude |
|
|
|
|
|
|
|
|
|
|
|
return v.toString() |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const Currencies = styled(Box)` |
|
|
const Currencies = styled(Box)` |
|
|
position: relative; |
|
|
position: relative; |
|
|
top: -1px; |
|
|
top: -1px; |
|
|
@ -54,11 +44,12 @@ type Props = { |
|
|
unit: Unit, |
|
|
unit: Unit, |
|
|
units: Array<Unit>, |
|
|
units: Array<Unit>, |
|
|
value: number, |
|
|
value: number, |
|
|
|
|
|
showAllDigits?: boolean, |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
type State = { |
|
|
type State = { |
|
|
unit: Unit, |
|
|
unit: Unit, |
|
|
isFocus: boolean, |
|
|
isFocused: boolean, |
|
|
displayValue: string, |
|
|
displayValue: string, |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -68,37 +59,52 @@ class InputCurrency extends PureComponent<Props, State> { |
|
|
renderRight: null, |
|
|
renderRight: null, |
|
|
units: [], |
|
|
units: [], |
|
|
value: 0, |
|
|
value: 0, |
|
|
|
|
|
showAllDigits: false, |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
state = { |
|
|
state = { |
|
|
isFocus: false, |
|
|
isFocused: false, |
|
|
displayValue: '0', |
|
|
displayValue: '', |
|
|
unit: this.props.unit, |
|
|
unit: this.props.unit, |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
componentWillMount() { |
|
|
componentWillMount() { |
|
|
const { value } = this.props |
|
|
this.syncInput({ isFocused: false }) |
|
|
const { unit } = this.state |
|
|
|
|
|
const displayValue = format(unit, value) |
|
|
|
|
|
this.setState({ displayValue }) |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
componentWillReceiveProps(nextProps: Props) { |
|
|
componentWillReceiveProps(nextProps: Props) { |
|
|
|
|
|
const { value, showAllDigits } = this.props |
|
|
const { unit } = this.state |
|
|
const { unit } = this.state |
|
|
if (this.props.value !== nextProps.value) { |
|
|
const needsToBeReformatted = |
|
|
const { isFocus } = this.state |
|
|
value !== nextProps.value || showAllDigits !== nextProps.showAllDigits |
|
|
const displayValue = isFocus |
|
|
if (needsToBeReformatted) { |
|
|
? (nextProps.value / 10 ** unit.magnitude).toString() |
|
|
const { isFocused } = this.state |
|
|
: format(unit, nextProps.value) |
|
|
this.setState({ |
|
|
this.setState({ displayValue }) |
|
|
displayValue: |
|
|
|
|
|
nextProps.value === 0 |
|
|
|
|
|
? '' |
|
|
|
|
|
: format(unit, nextProps.value, { |
|
|
|
|
|
isFocused, |
|
|
|
|
|
showAllDigits: nextProps.showAllDigits, |
|
|
|
|
|
}), |
|
|
|
|
|
}) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
handleChange = (v: string) => { |
|
|
handleChange = (v: string) => { |
|
|
// const { displayValue } = this.state
|
|
|
|
|
|
v = parseValue(v) |
|
|
v = parseValue(v) |
|
|
|
|
|
|
|
|
if (v.startsWith('00')) { |
|
|
// allow to type directly `.` in input to have `0.`
|
|
|
|
|
|
if (v.startsWith('.')) { |
|
|
|
|
|
v = `0${v}` |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// forbid multiple 0 at start
|
|
|
|
|
|
if (v === '' || v.startsWith('00')) { |
|
|
|
|
|
const { onChange } = this.props |
|
|
|
|
|
const { unit } = this.state |
|
|
|
|
|
onChange(0, unit) |
|
|
|
|
|
this.setState({ displayValue: '' }) |
|
|
return |
|
|
return |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -108,23 +114,19 @@ class InputCurrency extends PureComponent<Props, State> { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
this.emitOnChange(v) |
|
|
this.emitOnChange(v) |
|
|
this.setState({ displayValue: v || '0' }) |
|
|
this.setState({ displayValue: v || '' }) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
handleBlur = () => { |
|
|
handleBlur = () => this.syncInput({ isFocused: false }) |
|
|
const { value } = this.props |
|
|
handleFocus = () => this.syncInput({ isFocused: true }) |
|
|
const { unit } = this.state |
|
|
|
|
|
const v = format(unit, value) |
|
|
|
|
|
this.setState({ isFocus: false, displayValue: v }) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
handleFocus = () => { |
|
|
syncInput = ({ isFocused }: { isFocused: boolean }) => { |
|
|
|
|
|
const { value, showAllDigits } = this.props |
|
|
const { unit } = this.state |
|
|
const { unit } = this.state |
|
|
|
|
|
this.setState({ |
|
|
this.setState(prev => ({ |
|
|
isFocused, |
|
|
isFocus: true, |
|
|
displayValue: value === 0 ? '' : format(unit, value, { isFocused, showAllDigits }), |
|
|
displayValue: unformat(unit, prev.displayValue), |
|
|
}) |
|
|
})) |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
emitOnChange = (v: string) => { |
|
|
emitOnChange = (v: string) => { |
|
|
@ -138,7 +140,7 @@ class InputCurrency extends PureComponent<Props, State> { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
renderListUnits = () => { |
|
|
renderListUnits = () => { |
|
|
const { units, value } = this.props |
|
|
const { units, value, showAllDigits } = this.props |
|
|
const { unit } = this.state |
|
|
const { unit } = this.state |
|
|
|
|
|
|
|
|
if (units.length <= 1) { |
|
|
if (units.length <= 1) { |
|
|
@ -152,8 +154,10 @@ class InputCurrency extends PureComponent<Props, State> { |
|
|
keyProp="code" |
|
|
keyProp="code" |
|
|
flatLeft |
|
|
flatLeft |
|
|
onChange={item => { |
|
|
onChange={item => { |
|
|
this.setState({ unit: item, displayValue: format(item, value) }) |
|
|
this.setState({ |
|
|
// onChange(unformat(item, value), item)
|
|
|
unit: item, |
|
|
|
|
|
displayValue: format(item, value, { isFocused: false, showAllDigits }), |
|
|
|
|
|
}) |
|
|
}} |
|
|
}} |
|
|
items={units} |
|
|
items={units} |
|
|
value={unit} |
|
|
value={unit} |
|
|
@ -165,8 +169,8 @@ class InputCurrency extends PureComponent<Props, State> { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
render() { |
|
|
render() { |
|
|
const { renderRight } = this.props |
|
|
const { renderRight, showAllDigits } = this.props |
|
|
const { displayValue } = this.state |
|
|
const { displayValue, unit } = this.state |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<Input |
|
|
<Input |
|
|
@ -177,6 +181,7 @@ class InputCurrency extends PureComponent<Props, State> { |
|
|
onFocus={this.handleFocus} |
|
|
onFocus={this.handleFocus} |
|
|
onBlur={this.handleBlur} |
|
|
onBlur={this.handleBlur} |
|
|
renderRight={renderRight || this.renderListUnits()} |
|
|
renderRight={renderRight || this.renderListUnits()} |
|
|
|
|
|
placeholder={format(unit, 0, { isFocused: false, showAllDigits })} |
|
|
/> |
|
|
/> |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
|
|
Loëck Vézien
7 years ago
GitHub