Meriadec Pillet
7 years ago
committed by
GitHub
GitHub
18 changed files with 722 additions and 243 deletions
@ -0,0 +1,275 @@ |
|||
// @flow
|
|||
|
|||
import React, { PureComponent } from 'react' |
|||
import { compose } from 'redux' |
|||
import { translate } from 'react-i18next' |
|||
import styled from 'styled-components' |
|||
import { connect } from 'react-redux' |
|||
import { getDefaultUnitByCoinType, getFiatUnit } from '@ledgerhq/currencies' |
|||
|
|||
import isNaN from 'lodash/isNaN' |
|||
import noop from 'lodash/noop' |
|||
|
|||
import type { T, Account } from 'types/common' |
|||
|
|||
import { getCounterValue } from 'reducers/settings' |
|||
import { getLastCounterValueBySymbol } from 'reducers/counterValues' |
|||
|
|||
import InputCurrency from 'components/base/InputCurrency' |
|||
import Button from 'components/base/Button' |
|||
import Box from 'components/base/Box' |
|||
|
|||
const InputRight = styled(Box).attrs({ |
|||
ff: 'Rubik', |
|||
color: 'graphite', |
|||
fontSize: 4, |
|||
justifyContent: 'center', |
|||
pr: 3, |
|||
})`` |
|||
const InputCenter = styled(Box).attrs({ |
|||
ff: 'Rubik', |
|||
color: 'graphite', |
|||
fontSize: 4, |
|||
justifyContent: 'center', |
|||
})`` |
|||
|
|||
const mapStateToProps = (state, { account }) => { |
|||
const counterValue = getCounterValue(state) |
|||
const unit = getDefaultUnitByCoinType(account.coinType) |
|||
const symbol = `${unit.code}-${counterValue}` |
|||
return { |
|||
counterValue, |
|||
lastCounterValue: getLastCounterValueBySymbol(symbol, state), |
|||
} |
|||
} |
|||
|
|||
function maxUnitDigits(unit, value) { |
|||
const [leftDigits, rightDigits] = value.toString().split('.') |
|||
|
|||
return Number(`${leftDigits}${rightDigits ? `.${rightDigits.slice(0, unit.magnitude)}` : ''}`) |
|||
} |
|||
|
|||
function calculateMax(props) { |
|||
const { account, counterValue, lastCounterValue } = props |
|||
|
|||
const unit = getUnit({ account, counterValue }) |
|||
const leftMax = account.balance / 10 ** unit.left.magnitude |
|||
|
|||
return { |
|||
left: account.balance / 10 ** unit.left.magnitude, |
|||
right: maxUnitDigits(unit.right, leftMax * lastCounterValue), |
|||
} |
|||
} |
|||
|
|||
function getUnit({ account, counterValue }) { |
|||
return { |
|||
left: getDefaultUnitByCoinType(account.coinType), |
|||
right: getFiatUnit(counterValue), |
|||
} |
|||
} |
|||
|
|||
function calculateValues({ |
|||
dir, |
|||
value, |
|||
max, |
|||
lastCounterValue, |
|||
}: { |
|||
dir: string, |
|||
value: Object, |
|||
max: Object, |
|||
lastCounterValue: number, |
|||
}) { |
|||
const v = value[dir] |
|||
|
|||
const getMax = (d, v) => { |
|||
const result = v > max[d] ? max[d] : v |
|||
return isNaN(result) ? '0' : result.toString() |
|||
} |
|||
|
|||
const newValue = {} |
|||
|
|||
if (dir === 'left') { |
|||
newValue.left = v === '' ? v : getMax('left', v) |
|||
newValue.right = getMax('right', Number(v) * lastCounterValue) |
|||
} |
|||
|
|||
if (dir === 'right') { |
|||
newValue.left = getMax('left', Number(v) / lastCounterValue) |
|||
newValue.right = v === '' ? v : getMax('right', v) |
|||
} |
|||
|
|||
return newValue |
|||
} |
|||
|
|||
type Direction = 'left' | 'right' |
|||
|
|||
type Props = { |
|||
account: Account, |
|||
counterValue: string, |
|||
lastCounterValue: number, // eslint-disable-line react/no-unused-prop-types
|
|||
onChange: Function, |
|||
t: T, |
|||
value: Object, |
|||
} |
|||
|
|||
type State = { |
|||
max: { |
|||
left: number, |
|||
right: number, |
|||
}, |
|||
value: { |
|||
left: string | number, |
|||
right: string | number, |
|||
}, |
|||
} |
|||
|
|||
export class RequestAmount extends PureComponent<Props, State> { |
|||
static defaultProps = { |
|||
onChange: noop, |
|||
value: {}, |
|||
} |
|||
|
|||
constructor(props: Props) { |
|||
super() |
|||
|
|||
this.props = props |
|||
|
|||
const max = calculateMax(props) |
|||
|
|||
let v = { |
|||
left: 0, |
|||
right: 0, |
|||
} |
|||
|
|||
if (props.value.left) { |
|||
v = calculateValues({ |
|||
...props, |
|||
dir: 'left', |
|||
max, |
|||
}) |
|||
} |
|||
|
|||
if (props.value.right) { |
|||
v = calculateValues({ |
|||
...props, |
|||
dir: 'right', |
|||
max, |
|||
}) |
|||
} |
|||
|
|||
this.state = { |
|||
max, |
|||
value: v, |
|||
} |
|||
} |
|||
|
|||
componentWillReceiveProps(nextProps: Props) { |
|||
if (this.props.account !== nextProps.account) { |
|||
const max = calculateMax(nextProps) |
|||
this.setState({ |
|||
max, |
|||
value: calculateValues({ |
|||
...nextProps, |
|||
dir: 'left', |
|||
max, |
|||
}), |
|||
}) |
|||
} |
|||
} |
|||
|
|||
componentDidUpdate(prevProps: Props) { |
|||
this.updateValueWithProps(prevProps, this.props) |
|||
} |
|||
|
|||
handleChangeAmount = (dir: Direction) => (v: number | string) => { |
|||
const { onChange, value, account, counterValue, ...otherProps } = this.props |
|||
const { max } = this.state |
|||
|
|||
const otherDir = dir === 'left' ? 'right' : 'left' |
|||
const unit = getUnit({ |
|||
account, |
|||
counterValue, |
|||
}) |
|||
|
|||
const newValue = calculateValues({ |
|||
...otherProps, |
|||
dir, |
|||
value: { |
|||
[dir]: v.toString(), |
|||
}, |
|||
max, |
|||
}) |
|||
newValue[otherDir] = maxUnitDigits(unit[otherDir], newValue[otherDir]).toString() |
|||
|
|||
this.setState({ |
|||
value: newValue, |
|||
}) |
|||
onChange(newValue) |
|||
} |
|||
|
|||
handleClickMax = () => { |
|||
const { account } = this.props |
|||
this.handleChangeAmount('left')(account.balance) |
|||
} |
|||
|
|||
updateValueWithProps = (props: Props, nextProps: Props) => { |
|||
if ( |
|||
props.value.left !== nextProps.value.left && |
|||
nextProps.value.left !== this.state.value.left |
|||
) { |
|||
this.setState({ |
|||
value: calculateValues({ |
|||
...nextProps, |
|||
dir: 'left', |
|||
max: this.state.max, |
|||
}), |
|||
}) |
|||
} |
|||
|
|||
if ( |
|||
props.value.right !== nextProps.value.right && |
|||
nextProps.value.right !== this.state.value.right |
|||
) { |
|||
this.setState({ |
|||
value: calculateValues({ |
|||
...nextProps, |
|||
dir: 'right', |
|||
max: this.state.max, |
|||
}), |
|||
}) |
|||
} |
|||
} |
|||
|
|||
render() { |
|||
const { account, counterValue, t } = this.props |
|||
const { value } = this.state |
|||
|
|||
const unit = getUnit({ |
|||
account, |
|||
counterValue, |
|||
}) |
|||
|
|||
return ( |
|||
<Box horizontal flow={2}> |
|||
<InputCurrency |
|||
unit={unit.left} |
|||
value={value.left} |
|||
onChange={this.handleChangeAmount('left')} |
|||
renderRight={<InputRight>{unit.left.code}</InputRight>} |
|||
/> |
|||
<InputCenter>=</InputCenter> |
|||
<InputCurrency |
|||
unit={unit.right} |
|||
value={value.right} |
|||
onChange={this.handleChangeAmount('right')} |
|||
renderRight={<InputRight>{unit.right.code}</InputRight>} |
|||
/> |
|||
<Button ml={5} primary onClick={this.handleClickMax}> |
|||
{t('common:max')} |
|||
</Button> |
|||
</Box> |
|||
) |
|||
} |
|||
} |
|||
|
|||
export default compose(connect(mapStateToProps), translate())(RequestAmount) |
|||
@ -0,0 +1,30 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { action } from '@storybook/addon-actions' |
|||
import { number } from '@storybook/addon-knobs' |
|||
|
|||
import { accounts } from 'components/SelectAccount/stories' |
|||
|
|||
import { RequestAmount } from 'components/RequestAmount' |
|||
|
|||
const stories = storiesOf('Components/RequestAmount', module) |
|||
|
|||
const props = { |
|||
counterValue: 'USD', |
|||
lastCounterValue: 9177.69, |
|||
account: accounts[0], |
|||
} |
|||
|
|||
stories.add('basic', () => ( |
|||
<RequestAmount |
|||
{...props} |
|||
t={k => k} |
|||
onChange={action('onChange')} |
|||
value={{ |
|||
left: number('left value', 0), |
|||
right: number('right value', 0), |
|||
}} |
|||
/> |
|||
)) |
|||
@ -0,0 +1,132 @@ |
|||
// @flow
|
|||
|
|||
import React, { PureComponent } from 'react' |
|||
|
|||
import { parseCurrencyUnit, formatCurrencyUnit } from '@ledgerhq/currencies' |
|||
|
|||
import noop from 'lodash/noop' |
|||
import isNaN from 'lodash/isNaN' |
|||
|
|||
import Input from 'components/base/Input' |
|||
|
|||
import type { Unit } from '@ledgerhq/currencies' |
|||
|
|||
function parseValue(value) { |
|||
return value.toString().replace(/,/, '.') |
|||
} |
|||
|
|||
function format(unit: Unit, value: Value) { |
|||
let v = value === '' ? 0 : Number(value) |
|||
v *= 10 ** unit.magnitude |
|||
return formatCurrencyUnit(unit, v, { |
|||
disableRounding: true, |
|||
showAllDigits: false, |
|||
}) |
|||
} |
|||
|
|||
function unformat(unit, value) { |
|||
if (value === 0 || value === '') { |
|||
return 0 |
|||
} |
|||
|
|||
let v = parseCurrencyUnit(unit, value.toString()) |
|||
v /= 10 ** unit.magnitude |
|||
|
|||
return v |
|||
} |
|||
|
|||
type Value = string | number |
|||
|
|||
type Props = { |
|||
onChange: Function, |
|||
value: Value, |
|||
unit: Unit, |
|||
} |
|||
|
|||
type State = { |
|||
isFocus: boolean, |
|||
value: Value, |
|||
} |
|||
|
|||
class InputCurrency extends PureComponent<Props, State> { |
|||
static defaultProps = { |
|||
onChange: noop, |
|||
value: 0, |
|||
} |
|||
|
|||
state = { |
|||
isFocus: false, |
|||
value: this.props.value, |
|||
} |
|||
|
|||
componentWillReceiveProps(nextProps: Props) { |
|||
if (this.props.value !== nextProps.value) { |
|||
const { isFocus } = this.state |
|||
const value = isFocus ? nextProps.value : format(nextProps.unit, nextProps.value) |
|||
this.setState({ |
|||
value, |
|||
}) |
|||
} |
|||
} |
|||
|
|||
handleChange = (v: Value) => { |
|||
v = parseValue(v) |
|||
|
|||
// Check if value is valid Number
|
|||
if (isNaN(Number(v))) { |
|||
return |
|||
} |
|||
|
|||
this.emitOnChange(v) |
|||
this.setState({ |
|||
value: v, |
|||
}) |
|||
} |
|||
|
|||
handleBlur = () => { |
|||
const { unit } = this.props |
|||
const { value } = this.state |
|||
|
|||
const v = format(unit, value) |
|||
|
|||
this.setState({ |
|||
isFocus: false, |
|||
value: v, |
|||
}) |
|||
} |
|||
|
|||
handleFocus = () => { |
|||
const { unit } = this.props |
|||
|
|||
this.setState(prev => ({ |
|||
isFocus: true, |
|||
value: unformat(unit, prev.value), |
|||
})) |
|||
} |
|||
|
|||
emitOnChange = (v: Value) => { |
|||
const { onChange } = this.props |
|||
const { value } = this.state |
|||
|
|||
if (value.toString() !== v.toString()) { |
|||
onChange(v.toString()) |
|||
} |
|||
} |
|||
|
|||
render() { |
|||
const { value } = this.state |
|||
|
|||
return ( |
|||
<Input |
|||
{...this.props} |
|||
ff="Rubik" |
|||
value={value} |
|||
onChange={this.handleChange} |
|||
onFocus={this.handleFocus} |
|||
onBlur={this.handleBlur} |
|||
/> |
|||
) |
|||
} |
|||
} |
|||
|
|||
export default InputCurrency |
|||
@ -0,0 +1,15 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { action } from '@storybook/addon-actions' |
|||
|
|||
import { getDefaultUnitByCoinType } from '@ledgerhq/currencies' |
|||
|
|||
import InputCurrency from 'components/base/InputCurrency' |
|||
|
|||
const stories = storiesOf('Components/InputCurrency', module) |
|||
|
|||
const unit = getDefaultUnitByCoinType(1) |
|||
|
|||
stories.add('basic', () => <InputCurrency unit={unit} onChange={action('onChange')} />) |
|||
Loading…
Reference in new issue