packages/instant/src/components/amount_placeholder.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import * as React from 'react';

import { ColorOption } from '../style/theme';

import { Pulse } from './animations/pulse';

import { Text } from './ui/text';

interface PlainPlaceholder {
    color: ColorOption;
}
const PlainPlaceholder: React.StatelessComponent<PlainPlaceholder> = props => (
    <Text fontWeight="bold" fontColor={props.color}>
        &mdash;
    </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} />;
    }
};

AmountPlaceholder.displayName = 'AmountPlaceholder';