UNPKG

4.08 kBJavaScriptView Raw
1var __rest = (this && this.__rest) || function (s, e) {
2 var t = {};
3 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4 t[p] = s[p];
5 if (s != null && typeof Object.getOwnPropertySymbols === "function")
6 for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8 t[p[i]] = s[p[i]];
9 }
10 return t;
11};
12import React from 'react';
13import { View, Text, Image as RNImage, StyleSheet, TouchableOpacity, } from 'react-native';
14import isEqual from 'lodash.isequal';
15import { withTheme } from '../config';
16import { renderNode } from '../helpers';
17import Icon from '../icons/Icon';
18import Image from '../image/Image';
19import Accessory from './Accessory';
20const avatarSizes = {
21 small: 34,
22 medium: 50,
23 large: 75,
24 xlarge: 150,
25};
26const AvatarComponent = (_a) => {
27 var { onPress, onLongPress, Component = onPress || onLongPress ? TouchableOpacity : View, containerStyle, icon, iconStyle, source, size = 'small', avatarStyle, rounded, title, titleStyle, overlayContainerStyle, imageProps, placeholderStyle, renderPlaceholderContent, ImageComponent = RNImage, children } = _a, attributes = __rest(_a, ["onPress", "onLongPress", "Component", "containerStyle", "icon", "iconStyle", "source", "size", "avatarStyle", "rounded", "title", "titleStyle", "overlayContainerStyle", "imageProps", "placeholderStyle", "renderPlaceholderContent", "ImageComponent", "children"]);
28 let width = avatarSizes.small;
29 width = typeof size === 'number' ? size : avatarSizes[size];
30 const height = width;
31 const titleSize = width / 2;
32 const iconSize = width / 2;
33 const PlaceholderContent = (renderPlaceholderContent &&
34 renderNode(undefined, renderPlaceholderContent)) ||
35 (title && (<Text style={StyleSheet.flatten([
36 styles.title,
37 { fontSize: titleSize },
38 titleStyle,
39 ])}>
40 {title}
41 </Text>)) ||
42 (icon && (<Icon style={StyleSheet.flatten([iconStyle && iconStyle])} color={icon.color || 'white'} name={icon.name || 'user'} size={icon.size || iconSize} type={icon.type && icon.type}/>));
43 const hidePlaceholder = !(source && source.uri);
44 const imageContainerStyle = StyleSheet.flatten([
45 styles.overlayContainer,
46 rounded && { borderRadius: width / 2, overflow: 'hidden' },
47 overlayContainerStyle,
48 imageProps && imageProps.containerStyle,
49 ]);
50 if (imageProps && imageProps.containerStyle) {
51 delete imageProps.containerStyle;
52 }
53 return (<Component onPress={onPress} onLongPress={onLongPress} style={StyleSheet.flatten([
54 styles.container,
55 { height, width },
56 rounded && { borderRadius: width / 2 },
57 containerStyle,
58 ])} {...attributes}>
59 <Image placeholderStyle={StyleSheet.flatten([
60 placeholderStyle,
61 hidePlaceholder && styles.hiddenPlaceholderStyle,
62 ])} PlaceholderContent={PlaceholderContent} containerStyle={imageContainerStyle} source={source} borderRadius={rounded ? width / 2 : undefined} {...imageProps} style={StyleSheet.flatten([
63 styles.avatar,
64 imageProps && imageProps.style,
65 avatarStyle,
66 ])} ImageComponent={ImageComponent}/>
67 {children}
68 </Component>);
69};
70const styles = StyleSheet.create({
71 container: {
72 backgroundColor: 'transparent',
73 },
74 avatar: {
75 flex: 1,
76 width: undefined,
77 height: undefined,
78 },
79 overlayContainer: {
80 flex: 1,
81 },
82 title: {
83 color: '#ffffff',
84 backgroundColor: 'transparent',
85 textAlign: 'center',
86 },
87 hiddenPlaceholderStyle: {
88 backgroundColor: 'transparent',
89 },
90});
91const Avatar = React.memo(AvatarComponent, isEqual);
92export { Avatar };
93const ThemedAvatar = Object.assign(withTheme(Avatar, 'Avatar'), {
94 Accessory: Accessory,
95});
96export default ThemedAvatar;