From d5d99b9d2e3c793a95c68c1035246644b3ae80c6 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 25 Oct 2018 18:35:06 -0700 Subject: chore: dont override toString of BigNumber and other PR feedback --- .../src/components/animations/slide_animations.tsx | 5 +- .../instant/src/components/asset_amount_input.tsx | 81 --------------------- .../src/components/erc20_asset_amount_input.tsx | 84 ++++++++++++++++++++++ .../instant/src/components/instant_heading.tsx | 4 +- .../src/components/scaling_amount_input.tsx | 11 ++- 5 files changed, 95 insertions(+), 90 deletions(-) delete mode 100644 packages/instant/src/components/asset_amount_input.tsx create mode 100644 packages/instant/src/components/erc20_asset_amount_input.tsx (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx index 7c8666861..84280372b 100644 --- a/packages/instant/src/components/animations/slide_animations.tsx +++ b/packages/instant/src/components/animations/slide_animations.tsx @@ -21,7 +21,10 @@ export interface SlideAnimationProps { animationDirection?: string; } -export const SlideAnimation = styled('div')` +export const SlideAnimation = + styled.div < + SlideAnimationProps > + ` animation-name: ${props => css` ${props.keyframes}; diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx deleted file mode 100644 index 4d2dc0bd8..000000000 --- a/packages/instant/src/components/asset_amount_input.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { BigNumber } from '@0x/utils'; -import * as _ from 'lodash'; -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; -import { ERC20Asset } from '../types'; -import { assetUtils } from '../util/asset'; -import { util } from '../util/util'; - -import { ScalingAmountInput } from './scaling_amount_input'; -import { Container, Text } from './ui'; - -// Asset amounts only apply to ERC20 assets -export interface AssetAmountInputProps { - asset?: ERC20Asset; - onChange: (value?: BigNumber, asset?: ERC20Asset) => void; - startingFontSizePx: number; - fontColor?: ColorOption; -} - -export interface AssetAmountInputState { - currentFontSizePx: number; -} - -export class AssetAmountInput extends React.Component { - public static defaultProps = { - onChange: util.boundNoop, - }; - constructor(props: AssetAmountInputProps) { - super(props); - this.state = { - currentFontSizePx: props.startingFontSizePx, - }; - } - public render(): React.ReactNode { - const { asset, onChange, ...rest } = this.props; - return ( - - - - - - - {assetUtils.formattedSymbolForAsset(asset)} - - - - ); - } - private readonly _handleChange = (value?: BigNumber): void => { - this.props.onChange(value, this.props.asset); - }; - private readonly _handleFontSizeChange = (fontSizePx: number): void => { - this.setState({ - currentFontSizePx: fontSizePx, - }); - }; - private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => { - if (_.isUndefined(asset)) { - return 3; - } - const symbol = asset.metaData.symbol; - if (symbol.length <= 3) { - return 5; - } - if (symbol.length === 5) { - return 3; - } - return 4; - }; -} diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx new file mode 100644 index 000000000..583fad28b --- /dev/null +++ b/packages/instant/src/components/erc20_asset_amount_input.tsx @@ -0,0 +1,84 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { ColorOption, transparentWhite } from '../style/theme'; +import { ERC20Asset } from '../types'; +import { assetUtils } from '../util/asset'; +import { BigNumberInput } from '../util/big_number_input'; +import { util } from '../util/util'; + +import { ScalingAmountInput } from './scaling_amount_input'; +import { Container, Text } from './ui'; + +// Asset amounts only apply to ERC20 assets +export interface ERC20AssetAmountInputProps { + asset?: ERC20Asset; + value?: BigNumberInput; + onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void; + startingFontSizePx: number; + fontColor?: ColorOption; +} + +export interface ERC20AssetAmountInputState { + currentFontSizePx: number; +} + +export class ERC20AssetAmountInput extends React.Component { + public static defaultProps = { + onChange: util.boundNoop, + }; + constructor(props: ERC20AssetAmountInputProps) { + super(props); + this.state = { + currentFontSizePx: props.startingFontSizePx, + }; + } + public render(): React.ReactNode { + const { asset, onChange, ...rest } = this.props; + return ( + + + + + + + {assetUtils.formattedSymbolForAsset(asset)} + + + + ); + } + private readonly _handleChange = (value?: BigNumberInput): void => { + this.props.onChange(value, this.props.asset); + }; + private readonly _handleFontSizeChange = (fontSizePx: number): void => { + this.setState({ + currentFontSizePx: fontSizePx, + }); + }; + // For assets with symbols of different length, + // start scaling the input at different character lengths + private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => { + if (_.isUndefined(asset)) { + return 3; + } + const symbol = asset.metaData.symbol; + if (symbol.length <= 3) { + return 5; + } + if (symbol.length === 5) { + return 3; + } + return 4; + }; +} diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index f0a22bccb..df9856277 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -2,7 +2,7 @@ import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; -import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input'; +import { SelectedERC20AssetAmountInput } from '../containers/selected_erc20_asset_amount_input'; import { ColorOption } from '../style/theme'; import { AsyncProcessState, OrderState } from '../types'; import { format } from '../util/format'; @@ -48,7 +48,7 @@ export class InstantHeading extends React.Component { - + {iconOrAmounts} diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx index 23a15305a..655ae2b74 100644 --- a/packages/instant/src/components/scaling_amount_input.tsx +++ b/packages/instant/src/components/scaling_amount_input.tsx @@ -1,9 +1,8 @@ -import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import { ColorOption } from '../style/theme'; -import { BigNumberInput } from '../util/big_number'; +import { BigNumberInput } from '../util/big_number_input'; import { util } from '../util/util'; import { ScalingInput } from './scaling_input'; @@ -12,8 +11,8 @@ export interface ScalingAmountInputProps { maxFontSizePx: number; textLengthThreshold: number; fontColor?: ColorOption; - value?: BigNumber; - onChange: (value?: BigNumber) => void; + value?: BigNumberInput; + onChange: (value?: BigNumberInput) => void; onFontSizeChange: (fontSizePx: number) => void; } @@ -31,7 +30,7 @@ export class ScalingAmountInput extends React.Component onFontSizeChange={onFontSizeChange} fontColor={fontColor} onChange={this._handleChange} - value={!_.isUndefined(value) ? value.toString() : ''} + value={!_.isUndefined(value) ? value.toDisplayString() : ''} placeholder="0.00" emptyInputWidthCh={3.5} /> @@ -42,7 +41,7 @@ export class ScalingAmountInput extends React.Component let bigNumberValue; if (!_.isEmpty(value)) { try { - bigNumberValue = new BigNumberInput(event.target.value); + bigNumberValue = new BigNumberInput(value); } catch { // We don't want to allow values that can't be a BigNumber, so don't even call onChange. return; -- cgit v1.2.3