UNPKG

2.3 kBJavaScriptView Raw
1var __rest = (this && this.__rest) || function (s, e) {
2 var t = {};
3 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4 t[p] = s[p];
5 if (s != null && typeof Object.getOwnPropertySymbols === "function")
6 for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8 t[p[i]] = s[p[i]];
9 }
10 return t;
11};
12import React from 'react';
13import { StyleSheet, Text, View, TouchableOpacity, } from 'react-native';
14import { withTheme } from '../config';
15import { renderNode } from '../helpers';
16const Badge = (props) => {
17 var _a;
18 const { containerStyle, textStyle, textProps, badgeStyle, onPress, Component = onPress ? TouchableOpacity : View, value, theme, status = 'primary' } = props, attributes = __rest(props, ["containerStyle", "textStyle", "textProps", "badgeStyle", "onPress", "Component", "value", "theme", "status"]);
19 const element = renderNode(Text, value, Object.assign({ style: StyleSheet.flatten([styles.text, textStyle && textStyle]) }, textProps));
20 return (<View style={StyleSheet.flatten([containerStyle && containerStyle])}>
21 <Component {...attributes} style={StyleSheet.flatten([
22 {
23 alignSelf: 'center',
24 minWidth: size,
25 height: size,
26 borderRadius: size / 2,
27 alignItems: 'center',
28 justifyContent: 'center',
29 backgroundColor: (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a[status],
30 borderWidth: StyleSheet.hairlineWidth,
31 borderColor: '#fff',
32 },
33 !element && styles.miniBadge,
34 badgeStyle && badgeStyle,
35 ])} onPress={onPress}>
36 {element}
37 </Component>
38 </View>);
39};
40const size = 18;
41const miniSize = 8;
42const styles = StyleSheet.create({
43 miniBadge: {
44 paddingHorizontal: 0,
45 paddingVertical: 0,
46 minWidth: miniSize,
47 height: miniSize,
48 borderRadius: miniSize / 2,
49 },
50 text: {
51 fontSize: 12,
52 color: 'white',
53 paddingHorizontal: 4,
54 },
55});
56export { Badge };
57export default withTheme(Badge, 'Badge');