diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-23 01:50:25 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-23 01:50:25 +0800 |
commit | 77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9 (patch) | |
tree | 729943322c55f05e50246d5e01e884a89a3e4c21 /packages/instant/src/components/scaling_amount_input.tsx | |
parent | 6510454337dd5add86522c0eb5621a3f55ac062d (diff) | |
download | dexon-sol-tools-77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9.tar dexon-sol-tools-77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9.tar.gz dexon-sol-tools-77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9.tar.bz2 dexon-sol-tools-77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9.tar.lz dexon-sol-tools-77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9.tar.xz dexon-sol-tools-77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9.tar.zst dexon-sol-tools-77a4d7e2b76a1808c37ed9f0a97cbd3b34a0ebe9.zip |
feat: have basic scaling amount input working
Diffstat (limited to 'packages/instant/src/components/scaling_amount_input.tsx')
-rw-r--r-- | packages/instant/src/components/scaling_amount_input.tsx | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx new file mode 100644 index 000000000..a0b7b74af --- /dev/null +++ b/packages/instant/src/components/scaling_amount_input.tsx @@ -0,0 +1,52 @@ +import { BigNumber } from '@0x/utils'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; +import { util } from '../util/util'; + +import { ScalingInput } from './scaling_input'; +import { Container, Text } from './ui'; + +export interface ScalingAmountInputProps { + fontSizePx: number; + startWidthCh: number; + endWidthCh: number; + fontColor?: ColorOption; + value?: BigNumber; + onChange: (value?: BigNumber, fontSize?: number) => void; +} + +export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> { + public static defaultProps = { + onChange: util.boundNoop, + onFontSizeChange: util.boundNoop, + }; + public render(): React.ReactNode { + const { startWidthCh, endWidthCh, fontColor, fontSizePx, value } = this.props; + return ( + <ScalingInput + startWidthCh={startWidthCh} + endWidthCh={endWidthCh} + fontSizePx={fontSizePx} + fontColor={fontColor} + onChange={this._handleChange} + value={!_.isUndefined(value) ? value.toString() : ''} + placeholder="0.00" + /> + ); + } + private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>, fontSize?: number): void => { + const value = event.target.value; + let bigNumberValue; + if (!_.isEmpty(value)) { + try { + bigNumberValue = new BigNumber(event.target.value); + } catch { + // We don't want to allow values that can't be a BigNumber, so don't even call onChange. + return; + } + } + this.props.onChange(bigNumberValue, fontSize); + }; +} |