@tra-tech/react-native-kitra/lib/module/components/Badge/Badge.js

UI kit for React Native

import { Text, StyleSheet, View } from 'react-native';
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
import { applyDefaults } from '../../core/KitraProvider';
const sizes = {
  medium: {
    width: 24,
    height: 24,
    fontSize: 10
  },
  small: {
    width: 10,
    height: 10,
    fontSize: 8
  }
};
const badgeStyles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center'
  }
});
const Badge = _ref => {
  let {
    theme,
    visible = true,
    label,
    size = 'medium',
    containerStyle,
    textStyles,
    borderStyle = 'circular',
    icon
  } = _ref;
  return /*#__PURE__*/React.createElement(View, null, visible ? /*#__PURE__*/React.createElement(Animated.View, {
    exiting: FadeOut.duration(300),
    entering: FadeIn.duration(400),
    style: [badgeStyles.container, [borderStyle === 'circular' ? {
      width: size === 'medium' ? label || icon ? 30 : 24 : 10,
      height: size === 'medium' ? label || icon ? 30 : 24 : 10
    } : {
      paddingVertical: size === 'medium' ? 4 : 3,
      paddingHorizontal: size === 'medium' ? 8 : 6
    }, {
      backgroundColor: theme === null || theme === void 0 ? void 0 : theme.primary,
      borderRadius: borderStyle === 'circular' ? 50 : 3
    }], containerStyle]
  }, (() => {
    if (label) {
      var _sizes$size;
      return /*#__PURE__*/React.createElement(Text, {
        style: [{
          color: theme === null || theme === void 0 ? void 0 : theme.white,
          fontSize: (_sizes$size = sizes[size]) === null || _sizes$size === void 0 ? void 0 : _sizes$size.fontSize
        }, textStyles]
      }, label);
    }
    if (icon) {
      return icon;
    }
    return null;
  })()) : null);
};
export default applyDefaults(Badge);
//# sourceMappingURL=Badge.js.map