@livelike/react-native/lib/module/components/LLChatMessageList/LLChatMessageList.js

LiveLike React Native package

import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { StyleSheet, FlatList, View, ActivityIndicator } from 'react-native';
import { useStyles, useAutoScroll, useTheme, useChatRoomState, useChatMessagesEffect, useLoadReactionPacksEffect, useUserReactionsEffect, useReactionSpace, useLoadUserReactions, useChatRoomActions } from '../../hooks';
import { LLChatMessageItem } from '../LLChatMessageItem';
import { LLMessageListEmptyComponent } from './LLMessageListEmptyComponent';
import { LLLoadActionButtonComponent } from '../LLLoadActionButton';
const listItemKeyExtractor = message => message.id;
export function LLChatMessageList(_ref) {
  let {
    roomId,
    styles: stylesProp,
    MessageListComponent = FlatList,
    MessageItemComponent = LLChatMessageItem,
    MessageListEmptyComponent = LLMessageListEmptyComponent,
    LoadPrevButtonComponent = LLLoadActionButtonComponent,
    MessageItemComponentStyles,
    MessageListLoadingComponent,
    MessageListEmptyComponentStyles
  } = _ref;
  const listRef = useRef(null);
  const userReactionsLoadedRef = useRef(false);
  const {
    chatMessages,
    chatMessagesLoaded,
    messageListIterator
  } = useChatRoomState({
    roomId
  });
  const {
    onContentSizeChangeHandler,
    onScrollEndDrag
  } = useAutoScroll({
    ref: listRef
  });
  const messageListStyles = useStyles({
    componentStylesFn: getMessageListStyles,
    stylesProp
  });
  const {
    theme
  } = useTheme();
  const {
    reactionSpace
  } = useReactionSpace({
    targetGroupId: roomId
  });
  useChatMessagesEffect({
    roomId
  });
  useLoadReactionPacksEffect({
    reactionSpaceId: reactionSpace === null || reactionSpace === void 0 ? void 0 : reactionSpace.id
  });
  useUserReactionsEffect({
    reactionSpaceId: reactionSpace === null || reactionSpace === void 0 ? void 0 : reactionSpace.id
  });
  const {
    loadPrevMessages
  } = useChatRoomActions({
    roomId
  });
  const targetIds = useMemo(() => chatMessages === null || chatMessages === void 0 ? void 0 : chatMessages.map(_ref2 => {
    let {
      id
    } = _ref2;
    return id;
  }), [chatMessages]);
  const {
    loadUserReactions
  } = useLoadUserReactions({
    reactionSpaceId: reactionSpace === null || reactionSpace === void 0 ? void 0 : reactionSpace.id
  });
  useEffect(() => {
    if (!(targetIds !== null && targetIds !== void 0 && targetIds.length) || userReactionsLoadedRef.current) {
      return;
    }
    loadUserReactions({
      targetIds
    });
    userReactionsLoadedRef.current = true;
  }, [targetIds]);
  const renderLoadPrevMessagesButton = useCallback(() => {
    if (!messageListIterator) {
      return null;
    }
    return /*#__PURE__*/React.createElement(LoadPrevButtonComponent, {
      label: "Load previous messages",
      actionInProgressLabel: "Loading previous messages",
      onPress: loadPrevMessages
    });
  }, [messageListIterator, loadPrevMessages]);
  const renderListItem = useCallback(_ref3 => {
    let {
      item
    } = _ref3;
    return /*#__PURE__*/React.createElement(MessageItemComponent, {
      message: item,
      styles: MessageItemComponentStyles
    });
  }, [MessageItemComponentStyles]);
  const renderListLoadingComponent = MessageListLoadingComponent ? /*#__PURE__*/React.createElement(MessageListLoadingComponent, null) : /*#__PURE__*/React.createElement(ActivityIndicator, {
    size: 'large',
    color: theme.text,
    style: messageListStyles.listLoadingIndicator
  });
  return /*#__PURE__*/React.createElement(View, {
    style: messageListStyles.rootContainer
  }, !chatMessagesLoaded ? renderListLoadingComponent : /*#__PURE__*/React.createElement(MessageListComponent, {
    ref: listRef,
    contentContainerStyle: {
      flexGrow: 1
    },
    ListEmptyComponent: /*#__PURE__*/React.createElement(MessageListEmptyComponent, {
      styles: MessageListEmptyComponentStyles
    }),
    data: chatMessages,
    renderItem: renderListItem,
    keyExtractor: listItemKeyExtractor,
    onContentSizeChange: onContentSizeChangeHandler,
    onScrollEndDrag: onScrollEndDrag,
    ListHeaderComponent: renderLoadPrevMessagesButton,
    maintainVisibleContentPosition: {
      minIndexForVisible: 0
    }
  }));
}
const getMessageListStyles = _ref4 => {
  let {
    theme
  } = _ref4;
  return StyleSheet.create({
    rootContainer: {
      display: 'flex',
      flex: 1,
      justifyContent: 'center',
      marginBottom: 10
    },
    listLoadingIndicator: {}
  });
};
//# sourceMappingURL=LLChatMessageList.js.map