react-native-gifted-chat/lib/Message/index.js

The most complete chat UI for React Native

import React, { memo, useCallback } from 'react';
import { View } from 'react-native';
import isEqual from 'lodash.isequal';
import { Avatar } from '../Avatar';
import Bubble from '../Bubble';
import { SystemMessage } from '../SystemMessage';
import { isSameUser } from '../utils';
import styles from './styles';
export * from './types';
let Message = (props) => {
    const { currentMessage, renderBubble: renderBubbleProp, renderSystemMessage: renderSystemMessageProp, onMessageLayout, nextMessage, position, containerStyle, user, showUserAvatar, } = props;
    const renderBubble = useCallback(() => {
        const { 
        /* eslint-disable @typescript-eslint/no-unused-vars */
        containerStyle, onMessageLayout, 
        /* eslint-enable @typescript-eslint/no-unused-vars */
        ...rest } = props;
        if (renderBubbleProp)
            return renderBubbleProp(rest);
        return <Bubble {...rest}/>;
    }, [props, renderBubbleProp]);
    const renderSystemMessage = useCallback(() => {
        const { 
        /* eslint-disable @typescript-eslint/no-unused-vars */
        containerStyle, onMessageLayout, 
        /* eslint-enable @typescript-eslint/no-unused-vars */
        ...rest } = props;
        if (renderSystemMessageProp)
            return renderSystemMessageProp(rest);
        return <SystemMessage {...rest}/>;
    }, [props, renderSystemMessageProp]);
    const renderAvatar = useCallback(() => {
        if (user?._id &&
            currentMessage?.user &&
            user._id === currentMessage.user._id &&
            !showUserAvatar)
            return null;
        if (currentMessage?.user?.avatar === null)
            return null;
        const { 
        /* eslint-disable @typescript-eslint/no-unused-vars */
        containerStyle, onMessageLayout, 
        /* eslint-enable @typescript-eslint/no-unused-vars */
        ...rest } = props;
        return <Avatar {...rest}/>;
    }, [
        props,
        user,
        currentMessage,
        showUserAvatar,
    ]);
    if (!currentMessage)
        return null;
    const sameUser = isSameUser(currentMessage, nextMessage);
    return (<View onLayout={onMessageLayout}>
      {currentMessage.system
            ? (renderSystemMessage())
            : (<View style={[
                    styles[position].container,
                    { marginBottom: sameUser ? 2 : 10 },
                    !props.inverted && { marginBottom: 2 },
                    containerStyle?.[position],
                ]}>
            {position === 'left' ? renderAvatar() : null}
            {renderBubble()}
            {position === 'right' ? renderAvatar() : null}
          </View>)}
    </View>);
};
Message = memo(Message, (props, nextProps) => {
    const shouldUpdate = props.shouldUpdateMessage?.(props, nextProps) ||
        !isEqual(props.currentMessage, nextProps.currentMessage) ||
        !isEqual(props.previousMessage, nextProps.previousMessage) ||
        !isEqual(props.nextMessage, nextProps.nextMessage);
    if (shouldUpdate)
        return false;
    return true;
});
export default Message;
//# sourceMappingURL=index.js.map