@oxyhq/services/lib/commonjs/ui/components/Avatar.js

Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _styles = require("../styles");
var _fonts = require("../styles/fonts");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * Avatar component that displays either an image or text avatar
 * Falls back to displaying the first letter of the name if no image is provided
 */
const Avatar = ({
  uri,
  text,
  name,
  size = 40,
  theme = 'light',
  backgroundColor,
  textColor = '#FFFFFF',
  style,
  imageStyle,
  textStyle,
  isLoading = false
}) => {
  // Get theme colors
  const colors = (0, _styles.useThemeColors)(theme);

  // Use the primary color from theme as default background if not specified
  const bgColor = backgroundColor || colors.primary;

  // Calculate font size based on avatar size
  const fontSize = Math.floor(size * 0.4);

  // Determine what text to display for fallback
  const displayText = text || (name ? name.charAt(0).toUpperCase() : '');

  // Style for container based on size
  const containerStyle = {
    width: size,
    height: size,
    borderRadius: size / 2 // Make it circular
  };
  if (isLoading) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.container, containerStyle, {
        backgroundColor: colors.inputBackground
      }, style],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
        color: colors.primary,
        size: size > 50 ? 'large' : 'small'
      })
    });
  }

  // If an image URL is provided, use Image component
  if (uri) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
      source: {
        uri: uri
      },
      style: [styles.container, containerStyle, imageStyle]
    });
  }

  // Otherwise show text avatar
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.container, containerStyle, {
      backgroundColor: bgColor
    }, style],
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: [styles.text, {
        fontSize,
        fontFamily: _fonts.fontFamilies.phuduBold
      }, {
        color: textColor
      }, textStyle],
      children: displayText
    })
  });
};
const styles = _reactNative.StyleSheet.create({
  container: {
    overflow: 'hidden',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    // Font family is applied directly in the component to use the constants
    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined // Only apply fontWeight on web
  }
});
var _default = exports.default = Avatar;
//# sourceMappingURL=Avatar.js.map