@kietpt2003/react-native-core-ui/dist/Badges/Badge.js

React Native Core UI components by KietPT

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { StyleSheet, View } from 'react-native';
import React from 'react';
import { colors, fontSize } from '../themes';
import Text from '../Texts/Text';
function getDisplayValue(content, max) {
    if (typeof content === 'number') {
        return content > max ? `${max}+` : content;
    }
    return content;
}
function getBadgePosition(anchorOrigin, overlap) {
    const offset = overlap === 'circular' ? '14%' : 0;
    return {
        position: 'absolute',
        top: anchorOrigin.vertical === 'top' ? offset : undefined,
        bottom: anchorOrigin.vertical === 'bottom' ? offset : undefined,
        left: anchorOrigin.horizontal === 'left' ? offset : undefined,
        right: anchorOrigin.horizontal === 'right' ? offset : undefined,
        transform: [
            { translateX: anchorOrigin.horizontal === 'right' ? 8 : -8 },
            { translateY: anchorOrigin.vertical === 'bottom' ? 8 : -8 },
        ],
    };
}
const RADIUS_STANDARD = 10;
const RADIUS_DOT = 8;
const Badge = React.forwardRef(function Badge({ children, badgeContent, max = 99, showZero = false, invisible = false, color = colors.primary, variant = 'standard', overlap = 'rectangular', anchorOrigin = { vertical: 'top', horizontal: 'right' }, contentStyle, style, badgeStyle, }, ref) {
    var _a, _b;
    const isZero = badgeContent === 0;
    const isHidden = invisible ||
        badgeContent == null ||
        (!showZero && isZero && variant !== 'dot');
    const displayValue = variant === 'dot' ? undefined : getDisplayValue(badgeContent, max);
    return (_jsxs(View, { ref: ref, style: [styles.root, style], children: [children, !isHidden && (_jsx(View, { style: [
                    styles.badge,
                    variant === 'dot' && styles.dot,
                    getBadgePosition({
                        vertical: (_a = anchorOrigin.vertical) !== null && _a !== void 0 ? _a : 'top',
                        horizontal: (_b = anchorOrigin.horizontal) !== null && _b !== void 0 ? _b : 'right',
                    }, overlap),
                    {
                        backgroundColor: color
                    },
                    badgeStyle,
                ], children: variant !== 'dot' && (_jsx(Text, { color: colors.white, style: [styles.defaultContentStyle, contentStyle], children: displayValue })) }))] }));
});
const styles = StyleSheet.create({
    root: {
        position: 'relative',
        alignSelf: 'flex-start',
    },
    badge: {
        minWidth: RADIUS_STANDARD * 2,
        height: RADIUS_STANDARD * 2,
        borderRadius: RADIUS_STANDARD,
        backgroundColor: colors.primary,
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: 6,
        zIndex: 1,
    },
    dot: {
        width: RADIUS_DOT * 2,
        height: RADIUS_DOT * 2,
        minWidth: RADIUS_DOT * 2,
        borderRadius: RADIUS_DOT,
        paddingHorizontal: 0,
    },
    defaultContentStyle: {
        fontSize: fontSize._12
    }
});
Badge.displayName = 'Badge';
export default Badge;