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

Performant fork of react-native-gifted-chat with FlashList support

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 next = nextProps.currentMessage;
    const current = props.currentMessage;
    const { previousMessage, nextMessage } = props;
    const nextPropsMessage = nextProps.nextMessage;
    const nextPropsPreviousMessage = nextProps.previousMessage;
    let hasChanges = props.shouldUpdateMessage?.(props, nextProps) || false;
    hasChanges =
        hasChanges ||
            !isEqual(current, next) ||
            !isEqual(previousMessage, nextPropsPreviousMessage) ||
            !isEqual(nextMessage, nextPropsMessage);
    // Return `true` to skip re-render, `false` to re-render
    return !hasChanges;
});
export default Message;
//# sourceMappingURL=index.js.map