@metamask/design-system-react-native/dist/components/AvatarBase/AvatarBase.cjs

Design System React Native

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AvatarBase = void 0;
const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native/index.js");
const types_1 = require("../../types/index.cjs");
const Text_1 = require("../Text/index.cjs");
const AvatarBase_constants_1 = require("./AvatarBase.constants.cjs");
const AvatarBase = ({ children, size = types_1.AvatarBaseSize.Md, shape = types_1.AvatarBaseShape.Circle, fallbackText, fallbackTextProps, hasBorder = false, twClassName = '', style, ...props }) => {
    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
    const twContainerClassNames = `
    items-center justify-center overflow-hidden bg-section
    ${shape === types_1.AvatarBaseShape.Circle
        ? 'rounded-full'
        : AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size]}
    ${hasBorder ? AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size] : AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size]}
    ${hasBorder ? AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_BORDER[size] : ''}
    ${twClassName}
  `;
    return (<react_native_1.View style={[tw `${twContainerClassNames}`, style]} {...props}>
      {fallbackText ? (<Text_1.Text color={Text_1.TextColor.TextMuted} variant={Text_1.TextVariant.BodySm} fontWeight={Text_1.FontWeight.Medium} {...fallbackTextProps} twClassName={`uppercase ${fallbackTextProps?.twClassName ? ` ${fallbackTextProps.twClassName}` : ''}`.trim()}>
          {fallbackText}
        </Text_1.Text>) : (children)}
    </react_native_1.View>);
};
exports.AvatarBase = AvatarBase;
//# sourceMappingURL=AvatarBase.cjs.map