1 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2 |
|
3 | import * as React from 'react';
|
4 | import { Animated, StyleSheet, useWindowDimensions } from 'react-native';
|
5 | import { white, black } from '../styles/colors';
|
6 | import { withTheme } from '../core/theming';
|
7 | import getContrastingColor from '../utils/getContrastingColor';
|
8 | const defaultSize = 20;
|
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 | const Badge = _ref => {
|
38 | let {
|
39 | children,
|
40 | size = defaultSize,
|
41 | style,
|
42 | theme,
|
43 | visible = true,
|
44 | ...rest
|
45 | } = _ref;
|
46 | const {
|
47 | current: opacity
|
48 | } = React.useRef(new Animated.Value(visible ? 1 : 0));
|
49 | const {
|
50 | fontScale
|
51 | } = useWindowDimensions();
|
52 | const isFirstRendering = React.useRef(true);
|
53 | const {
|
54 | animation: {
|
55 | scale
|
56 | }
|
57 | } = theme;
|
58 | React.useEffect(() => {
|
59 |
|
60 | if (isFirstRendering.current) {
|
61 | isFirstRendering.current = false;
|
62 | return;
|
63 | }
|
64 |
|
65 | Animated.timing(opacity, {
|
66 | toValue: visible ? 1 : 0,
|
67 | duration: 150 * scale,
|
68 | useNativeDriver: true
|
69 | }).start();
|
70 | }, [visible, opacity, scale]);
|
71 | const {
|
72 | backgroundColor = theme.colors.notification,
|
73 | ...restStyle
|
74 | } = StyleSheet.flatten(style) || {};
|
75 | const textColor = getContrastingColor(backgroundColor, white, black);
|
76 | const borderRadius = size / 2;
|
77 | return React.createElement(Animated.Text, _extends({
|
78 | numberOfLines: 1,
|
79 | style: [{
|
80 | opacity,
|
81 | backgroundColor,
|
82 | color: textColor,
|
83 | fontSize: size * 0.5,
|
84 | ...theme.fonts.regular,
|
85 | lineHeight: size / fontScale,
|
86 | height: size,
|
87 | minWidth: size,
|
88 | borderRadius
|
89 | }, styles.container, restStyle]
|
90 | }, rest), children);
|
91 | };
|
92 |
|
93 | export default withTheme(Badge);
|
94 | const styles = StyleSheet.create({
|
95 | container: {
|
96 | alignSelf: 'flex-end',
|
97 | textAlign: 'center',
|
98 | textAlignVertical: 'center',
|
99 | paddingHorizontal: 4,
|
100 | overflow: 'hidden'
|
101 | }
|
102 | });
|
103 |
|
\ | No newline at end of file |