@gathertown/uikit-react-native/lib/module/domain/groupChannel/component/GroupChannelMessageList.js

Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { useContext, useEffect, useRef } from 'react';
import { useChannelHandler } from '@gathertown/uikit-chat-hooks';
import { useToast, LocalImageProvider } from '@gathertown/uikit-react-native-foundation';
import { isDifferentChannel, useFreshCallback, useIsFirstMount, useUniqHandlerId } from '@gathertown/uikit-utils';
import ChannelMessageList from '../../../components/ChannelMessageList';
import { MESSAGE_FOCUS_ANIMATION_DELAY, MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../../constants';
import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
import { GroupChannelContexts } from '../module/moduleContext';
const GroupChannelMessageList = props => {
  const toast = useToast();
  const {
    STRINGS
  } = useLocalization();
  const {
    sdk
  } = useSendbirdChat();
  const {
    setMessageToEdit,
    setMessageToReply
  } = useContext(GroupChannelContexts.Fragment);
  const {
    subscribe
  } = useContext(GroupChannelContexts.PubSub);
  const id = useUniqHandlerId('GroupChannelMessageList');
  const ref = useRef(null);
  const isFirstMount = useIsFirstMount();

  // FIXME: Workaround, should run after data has been applied to UI.
  const lazyScrollToBottom = function () {
    let animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
    let timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
    setTimeout(() => {
      var _ref$current;
      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollToOffset({
        offset: 0,
        animated
      });
    }, timeout);
  };

  // FIXME: Workaround, should run after data has been applied to UI.
  const lazyScrollToIndex = function () {
    let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
    let animated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    let timeout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
    setTimeout(() => {
      var _ref$current2;
      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollToIndex({
        index,
        animated,
        viewPosition: 0.5
      });
    }, timeout);
  };
  const scrollToMessage = useFreshCallback(function (createdAt) {
    let focusAnimated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    const foundMessageIndex = props.messages.findIndex(it => it.createdAt === createdAt);
    const isIncludedInList = foundMessageIndex > -1;
    if (isIncludedInList) {
      if (focusAnimated) {
        setTimeout(() => props.onUpdateSearchItem({
          startingPoint: createdAt
        }), MESSAGE_FOCUS_ANIMATION_DELAY);
      }
      lazyScrollToIndex(foundMessageIndex, true, isFirstMount ? MESSAGE_SEARCH_SAFE_SCROLL_DELAY : 0);
    } else {
      if (props.channel.messageOffsetTimestamp <= createdAt) {
        if (focusAnimated) props.onUpdateSearchItem({
          startingPoint: createdAt
        });
        props.onResetMessageListWithStartingPoint(createdAt);
      } else {
        return false;
      }
    }
    return true;
  });
  const scrollToBottom = useFreshCallback(function () {
    let animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
    if (props.hasNext()) {
      props.onUpdateSearchItem(undefined);
      props.onScrolledAwayFromBottom(false);
      props.onResetMessageList(() => {
        props.onScrolledAwayFromBottom(false);
        lazyScrollToBottom(animated);
      });
    } else {
      lazyScrollToBottom(animated);
    }
  });
  useChannelHandler(sdk, id, {
    onReactionUpdated(channel, event) {
      if (isDifferentChannel(channel, props.channel)) return;
      const recentMessage = props.messages[0];
      const isRecentMessage = recentMessage && recentMessage.messageId === event.messageId;
      const scrollReachedBottomAndCanScroll = !props.scrolledAwayFromBottom && !props.hasNext();
      if (isRecentMessage && scrollReachedBottomAndCanScroll) {
        lazyScrollToBottom(true, 250);
      }
    }
  });
  useEffect(() => {
    return subscribe(_ref => {
      let {
        type
      } = _ref;
      switch (type) {
        case 'MESSAGES_RECEIVED':
          {
            if (!props.scrolledAwayFromBottom) {
              scrollToBottom(true);
            }
            break;
          }
        case 'MESSAGE_SENT_SUCCESS':
        case 'MESSAGE_SENT_PENDING':
          {
            scrollToBottom(false);
            break;
          }
      }
    });
  }, [props.scrolledAwayFromBottom]);

  // Only trigger once when message list mount with initial props.searchItem
  // - Search screen + searchItem > mount message list
  // - Reset message list + searchItem > re-mount message list
  useEffect(() => {
    if (isFirstMount && props.searchItem) {
      scrollToMessage(props.searchItem.startingPoint);
    }
  }, [isFirstMount]);
  const onPressParentMessage = useFreshCallback(message => {
    const canScrollToParent = scrollToMessage(message.createdAt, true);
    if (!canScrollToParent) toast.show(STRINGS.TOAST.FIND_PARENT_MSG_ERROR, 'error');
  });
  return /*#__PURE__*/React.createElement(LocalImageProvider, null, /*#__PURE__*/React.createElement(ChannelMessageList, _extends({}, props, {
    ref: ref,
    onReplyMessage: setMessageToReply,
    onEditMessage: setMessageToEdit,
    onPressParentMessage: onPressParentMessage,
    onPressNewMessagesButton: scrollToBottom,
    onPressScrollToBottomButton: scrollToBottom
  })));
};
export default /*#__PURE__*/React.memo(GroupChannelMessageList);
//# sourceMappingURL=GroupChannelMessageList.js.map