react-native-ranking-leaderboard/lib/module/Profile.js

Customizable leaderboard for react native mobile apps

"use strict";

import { Image, Modal, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function LeaderboardProfile({
  visible,
  onClose,
  user,
  style = {}
}) {
  if (!user) return null;
  const pointsLabel = style.pointsLabel ?? 'Points';
  return /*#__PURE__*/_jsx(Modal, {
    visible: visible,
    animationType: "fade",
    transparent: true,
    children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
      onPress: onClose,
      children: /*#__PURE__*/_jsx(View, {
        style: [styles.overlay, style.overlayStyle],
        children: /*#__PURE__*/_jsxs(View, {
          style: [styles.modalContent, style.modalStyle],
          children: [style.showAvatar != false && /*#__PURE__*/_jsx(Image, {
            source: {
              uri: user.picture
            },
            style: [styles.avatar, style.avatarStyle]
          }), style.showName !== false && /*#__PURE__*/_jsx(Text, {
            style: [styles.name, style.nameStyle],
            children: user.name
          }), style.showPoints !== false && /*#__PURE__*/_jsxs(Text, {
            style: [styles.points, style.pointsStyle],
            children: [pointsLabel, ": ", user.points]
          }), style.renderCustomContent?.(user), style.showCloseButton !== false && /*#__PURE__*/_jsx(TouchableOpacity, {
            onPress: onClose,
            style: [styles.closeIconButton, style.closeButtonStyle],
            children: /*#__PURE__*/_jsx(Text, {
              style: [styles.closeIconText, style.closeButtonTextStyle],
              children: "\xD7"
            })
          })]
        })
      })
    })
  });
}
const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.4)',
    justifyContent: 'center',
    alignItems: 'center'
  },
  modalContent: {
    backgroundColor: '#fff',
    borderRadius: 20,
    padding: 24,
    width: '80%',
    alignItems: 'center',
    elevation: 10
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    marginBottom: 16
  },
  name: {
    fontSize: 20,
    fontWeight: 'bold'
  },
  points: {
    fontSize: 16,
    marginVertical: 8
  },
  closeIconButton: {
    position: 'absolute',
    top: 16,
    right: 16,
    zIndex: 1
  },
  closeIconText: {
    fontSize: 24,
    color: '#333'
  }
});
//# sourceMappingURL=Profile.js.map