esarj/AnimatedPriceMarker.js at master · brerdem/esarj · GitHub

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import React from 'react';
import PropTypes from 'prop-types';

import {
    StyleSheet,
    Text,
    Animated,
} from 'react-native';

class AnimatedPriceMarker extends React.Component {
    render() {
        const { amount, selected, style } = this.props;

        const background = selected.interpolate({
            inputRange: [0, 1],
            outputRange: ['#FF5A5F', '#4da2ab'],
        });

        const border = selected.interpolate({
            inputRange: [0, 1],
            outputRange: ['#D23F44', '#007a87'],
        });

        return (
            <Animated.View style={[styles.container, style]}>
                <Animated.View
                    style={[
                        styles.bubble,
                        {
                            backgroundColor: background,
                            borderColor: border,
                        },
                    ]}
                >
                    <Text style={styles.dollar}>$</Text>
                    <Text style={styles.amount}>{amount}</Text>
                </Animated.View>
                <Animated.View
                    style={[styles.arrowBorder, { borderTopColor: border }]}
                />
                <Animated.View
                    style={[styles.arrow, { borderTopColor: background }]}
                />
            </Animated.View>
        );
    }
}

AnimatedPriceMarker.propTypes = {
    amount: PropTypes.number.isRequired,
    selected: PropTypes.object.isRequired,
    style: PropTypes.any,
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        alignSelf: 'flex-start',
    },
    bubble: {
        flex: 0,
        flexDirection: 'row',
        alignSelf: 'flex-start',
        backgroundColor: '#FF5A5F',
        paddingVertical: 2,
        paddingHorizontal: 4,
        borderRadius: 3,
        borderColor: '#D23F44',
        borderWidth: 0.5,
    },
    dollar: {
        color: '#fff',
        fontSize: 10,
    },
    amount: {
        color: '#fff',
        fontSize: 13,
    },
    arrow: {
        backgroundColor: 'transparent',
        borderColor: 'transparent',
        borderWidth: 4,
        borderTopColor: '#FF5A5F',
        alignSelf: 'center',
        marginTop: -9,
    },
    arrowBorder: {
        backgroundColor: 'transparent',
        borderColor: 'transparent',
        borderWidth: 4,
        borderTopColor: '#D23F44',
        alignSelf: 'center',
        marginTop: -0.5,
    },
    selectedBubble: {
        backgroundColor: '#4da2ab',
        borderColor: '#007a87',
    },
    selectedArrow: {
        borderTopColor: '#4da2ab',

    },
    selectedArrowBorder: {
        borderTopColor: '#007a87',
    },
});

export default AnimatedPriceMarker;