diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-20 06:40:44 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-20 06:40:44 +0800 |
commit | 30b077099306b8f2b522d0bc462da49fa9ee42e2 (patch) | |
tree | 05df98f7788993c2953d00acf64840de2ad6e9d4 /packages/instant/src/components/amount_placeholder.tsx | |
parent | d2766d7ced990efd5a91441b459f36e8a21f8513 (diff) | |
parent | a017f5e38561a152e8a757b340c1b0c6b3a3e21f (diff) | |
download | dexon-0x-contracts-30b077099306b8f2b522d0bc462da49fa9ee42e2.tar dexon-0x-contracts-30b077099306b8f2b522d0bc462da49fa9ee42e2.tar.gz dexon-0x-contracts-30b077099306b8f2b522d0bc462da49fa9ee42e2.tar.bz2 dexon-0x-contracts-30b077099306b8f2b522d0bc462da49fa9ee42e2.tar.lz dexon-0x-contracts-30b077099306b8f2b522d0bc462da49fa9ee42e2.tar.xz dexon-0x-contracts-30b077099306b8f2b522d0bc462da49fa9ee42e2.tar.zst dexon-0x-contracts-30b077099306b8f2b522d0bc462da49fa9ee42e2.zip |
Merge branch 'feature/instant/beta-render-et-al' into feature/instant/failure-state
Diffstat (limited to 'packages/instant/src/components/amount_placeholder.tsx')
-rw-r--r-- | packages/instant/src/components/amount_placeholder.tsx | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx new file mode 100644 index 000000000..6ef8f0ac3 --- /dev/null +++ b/packages/instant/src/components/amount_placeholder.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Pulse } from './animations/pulse'; + +import { Text } from './ui'; + +interface PlainPlaceholder { + color: ColorOption; +} +const PlainPlaceholder: React.StatelessComponent<PlainPlaceholder> = props => ( + <Text fontWeight="bold" fontColor={props.color}> + — + </Text> +); + +export interface AmountPlaceholderProps { + color: ColorOption; + isPulsating: boolean; +} +export const AmountPlaceholder: React.StatelessComponent<AmountPlaceholderProps> = props => { + if (props.isPulsating) { + return ( + <Pulse> + <PlainPlaceholder color={props.color} /> + </Pulse> + ); + } else { + return <PlainPlaceholder color={props.color} />; + } +}; |