All files / badge badge.js

88.24% Statements 15/17
90.48% Branches 19/21
100% Functions 1/1
87.5% Lines 14/16
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          3x                     8x   8x   7x   7x     7x 2x     7x 1x     7x       7x       7x                         3x                     3x                                        
import PropTypes from 'prop-types';
import React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import colors from '../config/colors';
 
const Badge = props => {
  const {
    containerStyle,
    textStyle,
    wrapperStyle,
    onPress,
    component,
    value,
    children,
    element,
    ...attributes
  } = props;
 
  if (element) return element;
 
  let Component = View;
  let childElement = (
    <Text style={[styles.text, textStyle && textStyle]}>{value}</Text>
  );
 
  if (children) {
    childElement = children;
  }
 
  if (children && value) {
    console.error('Badge can only contain either child element or value');
  }
 
  Iif (!component && onPress) {
    Component = TouchableOpacity;
  }
 
  Iif (React.isValidElement(component)) {
    Component = component;
  }
 
  return (
    <View style={[styles.container && wrapperStyle && wrapperStyle]}>
      <Component
        style={[styles.badge, containerStyle && containerStyle]}
        onPress={onPress}
        {...attributes}
      >
        {childElement}
      </Component>
    </View>
  );
};
 
Badge.propTypes = {
  containerStyle: View.propTypes.style,
  wrapperStyle: View.propTypes.style,
  textStyle: Text.propTypes.style,
  children: PropTypes.element,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  onPress: PropTypes.func,
  component: PropTypes.func,
  element: PropTypes.element,
};
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
  },
  badge: {
    padding: 12,
    paddingTop: 3,
    paddingBottom: 3,
    backgroundColor: colors.grey1,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 14,
    color: 'white',
  },
});
 
export default Badge;