1 | var __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 | };
|
12 | import React from 'react';
|
13 | import { View, Text, Image as RNImage, StyleSheet, TouchableOpacity, } from 'react-native';
|
14 | import isEqual from 'lodash.isequal';
|
15 | import { withTheme } from '../config';
|
16 | import { renderNode } from '../helpers';
|
17 | import Icon from '../icons/Icon';
|
18 | import Image from '../image/Image';
|
19 | import Accessory from './Accessory';
|
20 | const avatarSizes = {
|
21 | small: 34,
|
22 | medium: 50,
|
23 | large: 75,
|
24 | xlarge: 150,
|
25 | };
|
26 | const 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 | };
|
70 | const 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 | });
|
91 | const Avatar = React.memo(AvatarComponent, isEqual);
|
92 | export { Avatar };
|
93 | const ThemedAvatar = Object.assign(withTheme(Avatar, 'Avatar'), {
|
94 | Accessory: Accessory,
|
95 | });
|
96 | export default ThemedAvatar;
|