1 | import PropTypes from 'prop-types';
|
2 | import React from 'react';
|
3 | import { StyleSheet, View, } from 'react-native';
|
4 | import GiftedAvatar from './GiftedAvatar';
|
5 | import { StylePropType, isSameUser, isSameDay } from './utils';
|
6 | const styles = {
|
7 | left: StyleSheet.create({
|
8 | container: {
|
9 | marginRight: 8,
|
10 | },
|
11 | onTop: {
|
12 | alignSelf: 'flex-start',
|
13 | },
|
14 | onBottom: {},
|
15 | image: {
|
16 | height: 36,
|
17 | width: 36,
|
18 | borderRadius: 18,
|
19 | },
|
20 | }),
|
21 | right: StyleSheet.create({
|
22 | container: {
|
23 | marginLeft: 8,
|
24 | },
|
25 | onTop: {
|
26 | alignSelf: 'flex-start',
|
27 | },
|
28 | onBottom: {},
|
29 | image: {
|
30 | height: 36,
|
31 | width: 36,
|
32 | borderRadius: 18,
|
33 | },
|
34 | }),
|
35 | };
|
36 | export default class Avatar extends React.Component {
|
37 | renderAvatar() {
|
38 | if (this.props.renderAvatar) {
|
39 | const { renderAvatar, ...avatarProps } = this.props;
|
40 | return this.props.renderAvatar(avatarProps);
|
41 | }
|
42 | if (this.props.currentMessage) {
|
43 | return (<GiftedAvatar avatarStyle={[
|
44 | styles[this.props.position].image,
|
45 | this.props.imageStyle &&
|
46 | this.props.imageStyle[this.props.position],
|
47 | ]} textStyle={this.props.textStyle ? this.props.textStyle : {}} user={this.props.currentMessage.user} onPress={() => this.props.onPressAvatar &&
|
48 | this.props.onPressAvatar(this.props.currentMessage.user)} onLongPress={() => this.props.onLongPressAvatar &&
|
49 | this.props.onLongPressAvatar(this.props.currentMessage.user)}/>);
|
50 | }
|
51 | return null;
|
52 | }
|
53 | render() {
|
54 | const { renderAvatarOnTop, showAvatarForEveryMessage, containerStyle, position, currentMessage, renderAvatar, previousMessage, nextMessage, imageStyle, } = this.props;
|
55 | const messageToCompare = renderAvatarOnTop ? previousMessage : nextMessage;
|
56 | const computedStyle = renderAvatarOnTop ? 'onTop' : 'onBottom';
|
57 | if (renderAvatar === null) {
|
58 | return null;
|
59 | }
|
60 | if (!showAvatarForEveryMessage &&
|
61 | currentMessage &&
|
62 | messageToCompare &&
|
63 | isSameUser(currentMessage, messageToCompare) &&
|
64 | isSameDay(currentMessage, messageToCompare)) {
|
65 | return (<View style={[
|
66 | styles[position].container,
|
67 | containerStyle && containerStyle[position],
|
68 | ]}>
|
69 | <GiftedAvatar avatarStyle={[
|
70 | styles[position].image,
|
71 | imageStyle && imageStyle[position],
|
72 | ]}/>
|
73 | </View>);
|
74 | }
|
75 | return (<View style={[
|
76 | styles[position].container,
|
77 | styles[position][computedStyle],
|
78 | containerStyle && containerStyle[position],
|
79 | ]}>
|
80 | {this.renderAvatar()}
|
81 | </View>);
|
82 | }
|
83 | }
|
84 | Avatar.defaultProps = {
|
85 | renderAvatarOnTop: false,
|
86 | showAvatarForEveryMessage: false,
|
87 | position: 'left',
|
88 | currentMessage: {
|
89 | user: null,
|
90 | },
|
91 | previousMessage: {},
|
92 | nextMessage: {},
|
93 | containerStyle: {},
|
94 | imageStyle: {},
|
95 | onPressAvatar: () => { },
|
96 | onLongPressAvatar: () => { },
|
97 | };
|
98 | Avatar.propTypes = {
|
99 | renderAvatarOnTop: PropTypes.bool,
|
100 | showAvatarForEveryMessage: PropTypes.bool,
|
101 | position: PropTypes.oneOf(['left', 'right']),
|
102 | currentMessage: PropTypes.object,
|
103 | previousMessage: PropTypes.object,
|
104 | nextMessage: PropTypes.object,
|
105 | onPressAvatar: PropTypes.func,
|
106 | onLongPressAvatar: PropTypes.func,
|
107 | renderAvatar: PropTypes.func,
|
108 | containerStyle: PropTypes.shape({
|
109 | left: StylePropType,
|
110 | right: StylePropType,
|
111 | }),
|
112 | imageStyle: PropTypes.shape({
|
113 | left: StylePropType,
|
114 | right: StylePropType,
|
115 | }),
|
116 | };
|
117 | //# sourceMappingURL=Avatar.js.map |
\ | No newline at end of file |