Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 | 3x 12x 12x 12x 3x 3x 3x 3x 3x 12x | import React from 'react'; import PropTypes from 'prop-types'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import { ViewPropTypes, withTheme } from '../config'; import { renderNode } from '../helpers'; const Badge = props => { const { containerStyle, textStyle, badgeStyle, onPress, Component = onPress ? TouchableOpacity : View, value, theme, status, ...attributes } = props; const element = renderNode(Text, value, { style: StyleSheet.flatten([styles.text, textStyle && textStyle]), }); return ( <View style={StyleSheet.flatten([containerStyle && containerStyle])}> <Component {...attributes} style={StyleSheet.flatten([ styles.badge(theme, status), !element && styles.miniBadge, badgeStyle && badgeStyle, ])} onPress={onPress} > {element} </Component> </View> ); }; Badge.propTypes = { containerStyle: ViewPropTypes.style, badgeStyle: ViewPropTypes.style, textStyle: Text.propTypes.style, value: PropTypes.node, onPress: PropTypes.func, Component: PropTypes.elementType, theme: PropTypes.object, status: PropTypes.oneOf(['primary', 'success', 'warning', 'error']), }; Badge.defaultProps = { status: 'primary', }; const size = 18; const miniSize = 8; const styles = { badge: (theme, status) => ({ alignSelf: 'center', minWidth: size, height: size, borderRadius: size / 2, alignItems: 'center', justifyContent: 'center', backgroundColor: theme.colors[status], borderWidth: StyleSheet.hairlineWidth, borderColor: '#fff', }), miniBadge: { paddingHorizontal: 0, paddingVertical: 0, minWidth: miniSize, height: miniSize, borderRadius: miniSize / 2, }, text: { fontSize: 12, color: 'white', paddingHorizontal: 4, }, }; export { Badge }; export default withTheme(Badge, 'Badge'); |