Loëck Vézien
7 years ago
12 changed files with 477 additions and 53 deletions
@ -0,0 +1,287 @@ |
|||
// @flow
|
|||
|
|||
import React, { PureComponent } from 'react' |
|||
import { connect } from 'react-redux' |
|||
import { getDefaultUnitByCoinType, getFiatUnit } from '@ledgerhq/currencies' |
|||
|
|||
import isNaN from 'lodash/isNaN' |
|||
|
|||
import type { Account } from 'types/common' |
|||
|
|||
import { getCounterValue } from 'reducers/settings' |
|||
|
|||
import Input from 'components/base/Input' |
|||
import Box from 'components/base/Box' |
|||
|
|||
const mapStateToProps = state => ({ |
|||
counterValue: getCounterValue(state), |
|||
counterValues: state.counterValues, |
|||
}) |
|||
|
|||
function calculateMax(props) { |
|||
const { account, counterValue, lastCounterValue } = props |
|||
|
|||
const unit = { |
|||
currency: getDefaultUnitByCoinType(account.coinType), |
|||
fiat: getFiatUnit(counterValue), |
|||
} |
|||
|
|||
const leftMax = account.balance / 10 ** unit.currency.magnitude |
|||
|
|||
return { |
|||
left: account.balance / 10 ** unit.currency.magnitude, |
|||
right: leftMax * lastCounterValue, |
|||
} |
|||
} |
|||
|
|||
function formatCur(unit, val) { |
|||
if (val === '') { |
|||
return '' |
|||
} |
|||
if (val === '0' || val <= 0) { |
|||
return 0 |
|||
} |
|||
const factor = 10 ** unit.magnitude |
|||
return (Math.round(val * factor) / factor).toFixed(unit.magnitude) |
|||
} |
|||
|
|||
function cleanValue(value) { |
|||
return { |
|||
left: value.left || 0, |
|||
right: value.right || 0, |
|||
} |
|||
} |
|||
|
|||
function parseValue(value) { |
|||
return value.toString().replace(/,/, '.') |
|||
} |
|||
|
|||
function getUnit({ account, counterValue }) { |
|||
return { |
|||
currency: getDefaultUnitByCoinType(account.coinType), |
|||
fiat: getFiatUnit(counterValue), |
|||
} |
|||
} |
|||
|
|||
function calculateValues({ |
|||
dir, |
|||
value, |
|||
max, |
|||
unit, |
|||
lastCounterValue, |
|||
}: { |
|||
dir: string, |
|||
value: string | number, |
|||
max: Object, |
|||
unit: Object, |
|||
lastCounterValue: number, |
|||
}) { |
|||
value = parseValue(value) |
|||
|
|||
const getMax = (d, v) => { |
|||
const result = v > max[d] ? max[d] : v |
|||
return isNaN(result) ? 0 : result |
|||
} |
|||
|
|||
const newValue = {} |
|||
|
|||
if (dir === 'left') { |
|||
newValue.left = value === '' ? value : getMax('left', value) |
|||
newValue.right = formatCur(unit.fiat, getMax('right', Number(value) * lastCounterValue)) |
|||
} |
|||
|
|||
if (dir === 'right') { |
|||
newValue.left = formatCur(unit.currency, getMax('left', Number(value) / lastCounterValue)) |
|||
newValue.right = value === '' ? value : getMax('right', value) |
|||
} |
|||
|
|||
return newValue |
|||
} |
|||
|
|||
type Direction = 'left' | 'right' |
|||
|
|||
type Props = { |
|||
account: Account, |
|||
lastCounterValue: number, |
|||
counterValue: string, |
|||
onChange: Function, |
|||
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 = { |
|||
value: {}, |
|||
} |
|||
|
|||
constructor(props: Props) { |
|||
super() |
|||
|
|||
this.props = props |
|||
|
|||
const max = calculateMax(props) |
|||
|
|||
let value = {} |
|||
|
|||
if (props.value.left) { |
|||
value = { |
|||
...calculateValues({ |
|||
dir: 'left', |
|||
value: props.value.left, |
|||
max, |
|||
lastCounterValue: props.lastCounterValue, |
|||
unit: getUnit({ |
|||
account: props.account, |
|||
counterValue: props.counterValue, |
|||
}), |
|||
}), |
|||
} |
|||
} |
|||
|
|||
if (props.value.right) { |
|||
value = { |
|||
...calculateValues({ |
|||
dir: 'right', |
|||
value: props.value.right, |
|||
max, |
|||
lastCounterValue: props.lastCounterValue, |
|||
unit: getUnit({ |
|||
account: props.account, |
|||
counterValue: props.counterValue, |
|||
}), |
|||
}), |
|||
} |
|||
} |
|||
|
|||
value = cleanValue(value) |
|||
|
|||
this.state = { |
|||
max, |
|||
value, |
|||
} |
|||
} |
|||
|
|||
componentWillReceiveProps(nextProps: Props) { |
|||
if (this.props.account !== nextProps.account) { |
|||
this.setState({ |
|||
max: calculateMax(nextProps), |
|||
}) |
|||
} |
|||
|
|||
if (this.props.value.left !== nextProps.value.left) { |
|||
this.setState({ |
|||
value: cleanValue({ |
|||
...calculateValues({ |
|||
dir: 'left', |
|||
value: nextProps.value.left, |
|||
max: this.state.max, |
|||
lastCounterValue: nextProps.lastCounterValue, |
|||
unit: getUnit({ |
|||
account: nextProps.account, |
|||
counterValue: nextProps.counterValue, |
|||
}), |
|||
}), |
|||
}), |
|||
}) |
|||
} |
|||
|
|||
if (this.props.value.right !== nextProps.value.right) { |
|||
this.setState({ |
|||
value: cleanValue({ |
|||
...calculateValues({ |
|||
dir: 'right', |
|||
value: nextProps.value.right, |
|||
max: this.state.max, |
|||
lastCounterValue: nextProps.lastCounterValue, |
|||
unit: getUnit({ |
|||
account: nextProps.account, |
|||
counterValue: nextProps.counterValue, |
|||
}), |
|||
}), |
|||
}), |
|||
}) |
|||
} |
|||
} |
|||
|
|||
handleChangeAmount = (dir: Direction) => (v: string) => { |
|||
const { onChange, lastCounterValue, account, counterValue } = this.props |
|||
const { max } = this.state |
|||
|
|||
v = parseValue(v) |
|||
|
|||
// Check if value is valid Number
|
|||
if (isNaN(Number(v))) { |
|||
return |
|||
} |
|||
|
|||
const newValue = calculateValues({ |
|||
dir, |
|||
value: v, |
|||
max, |
|||
lastCounterValue, |
|||
unit: getUnit({ |
|||
account, |
|||
counterValue, |
|||
}), |
|||
}) |
|||
|
|||
this.setState({ |
|||
value: newValue, |
|||
}) |
|||
|
|||
onChange(cleanValue(newValue)) |
|||
} |
|||
|
|||
handleBlur = () => |
|||
this.setState(prev => ({ |
|||
value: cleanValue(prev.value), |
|||
})) |
|||
|
|||
render() { |
|||
const { value } = this.state |
|||
const { account, counterValue } = this.props |
|||
|
|||
const unit = getUnit({ |
|||
account, |
|||
counterValue, |
|||
}) |
|||
|
|||
return ( |
|||
<Box horizontal flow={2}> |
|||
<Box grow horizontal flow={2}> |
|||
<Box justifyContent="center">{unit.currency.code}</Box> |
|||
<Box grow> |
|||
<Input |
|||
value={value.left} |
|||
onBlur={this.handleBlur} |
|||
onChange={this.handleChangeAmount('left')} |
|||
/> |
|||
</Box> |
|||
</Box> |
|||
<Box justifyContent="center">=</Box> |
|||
<Box grow horizontal flow={2}> |
|||
<Box justifyContent="center">{unit.fiat.code}</Box> |
|||
<Box grow> |
|||
<Input |
|||
value={value.right} |
|||
onBlur={this.handleBlur} |
|||
onChange={this.handleChangeAmount('right')} |
|||
/> |
|||
</Box> |
|||
</Box> |
|||
</Box> |
|||
) |
|||
} |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(RequestAmount) |
|||
@ -0,0 +1,29 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { action } from '@storybook/addon-actions' |
|||
import { text } 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} |
|||
onChange={action('onChange')} |
|||
value={{ |
|||
left: text('left value', 0), |
|||
right: text('right value', 0), |
|||
}} |
|||
/> |
|||
)) |
|||
Loading…
Reference in new issue