diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-20 01:32:37 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-20 01:32:37 +0800 |
commit | 2f4e498a099ebbd8078139f90a054941e427de15 (patch) | |
tree | 2e82f5fd483bfb5dc48805f09641b89e6f51ea87 /packages/instant/src/components/instant_heading.tsx | |
parent | 66465816ca049118d58ca34bada241fd146f2656 (diff) | |
download | dexon-sol-tools-2f4e498a099ebbd8078139f90a054941e427de15.tar dexon-sol-tools-2f4e498a099ebbd8078139f90a054941e427de15.tar.gz dexon-sol-tools-2f4e498a099ebbd8078139f90a054941e427de15.tar.bz2 dexon-sol-tools-2f4e498a099ebbd8078139f90a054941e427de15.tar.lz dexon-sol-tools-2f4e498a099ebbd8078139f90a054941e427de15.tar.xz dexon-sol-tools-2f4e498a099ebbd8078139f90a054941e427de15.tar.zst dexon-sol-tools-2f4e498a099ebbd8078139f90a054941e427de15.zip |
Refactor to make placeholder logic more straightforward
Diffstat (limited to 'packages/instant/src/components/instant_heading.tsx')
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 11 |
1 files changed, 6 insertions, 5 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 48cda7f88..265c3e0a5 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -20,7 +20,6 @@ export interface InstantHeadingProps { const placeholderColor = ColorOption.white; export class InstantHeading extends React.Component<InstantHeadingProps, {}> { public render(): React.ReactNode { - const placeholderAmountToAlwaysShow = this._placeholderAmountToAlwaysShow(); return ( <Container backgroundColor={ColorOption.primaryColor} @@ -43,22 +42,24 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { <Flex direction="row" justify="space-between"> <SelectedAssetAmountInput fontSize="45px" /> <Flex direction="column" justify="space-between"> - <Container marginBottom="5px">{placeholderAmountToAlwaysShow || this._ethAmount()}</Container> - <Container opacity={0.7}>{placeholderAmountToAlwaysShow || this._dollarAmount()}</Container> + <Container marginBottom="5px"> + {this._placeholderOrAmount(this._ethAmount.bind(this))} + </Container> + <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount.bind(this))}</Container> </Flex> </Flex> </Container> ); } - private _placeholderAmountToAlwaysShow(): React.ReactNode | null { + private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { return <AmountPlaceholder isPulsating={true} color={placeholderColor} />; } if (_.isUndefined(this.props.selectedAssetAmount)) { return <AmountPlaceholder isPulsating={false} color={placeholderColor} />; } - return null; + return amountFunction(); } private _ethAmount(): React.ReactNode { |