@talkjs/react-native/lib/module/ConversationList.js

Official TalkJS SDK for React Native

"use strict";

// The React import below may be reported as unused however it is required for
// the Fragment returned.
import React, { useImperativeHandle, forwardRef, useContext, useEffect, useState, useMemo } from 'react';
import { BLUR_EVENT, FOCUS_EVENT, CONVERSATION_LIST, SESSION, CONTAINER, UI_MOUNTED_MESSAGE } from './constants';
import { SessionContext } from './Session';
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
function ConversationList(props, ref) {
  const {
    session,
    injectJavaScript,
    talkHandlers,
    customHandlers,
    setDisableZoom,
    setHideKeyboardAccessoryView
  } = useContext(SessionContext);
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    if (props.disableZoom !== undefined) {
      setDisableZoom(props.disableZoom);
    }
  }, [props.disableZoom]);
  useEffect(() => {
    if (props.hideKeyboardAccessoryView !== undefined) {
      setHideKeyboardAccessoryView(props.hideKeyboardAccessoryView);
    }
  }, [props.hideKeyboardAccessoryView]);
  useEffect(() => customHandlers.add(UI_MOUNTED_MESSAGE, () => {
    setTimeout(() => setIsLoading(false), 150);
  }), []);
  useEffect(() => {
    injectJavaScript(`
      document.addEventListener("visibilitychange", () => {
        if (document.visibilityState === "visible") {
          ${CONVERSATION_LIST}.onWindowVisibleChanged(true);
        } else {
          ${CONVERSATION_LIST}.onWindowVisibleChanged(false);
        }
      });
    `);
  }, []);
  const options = useMemo(() => JSON.stringify({
    customEmojis: props.customEmojis,
    feedConversationTitleMode: props.feedConversationTitleMode,
    feedFilter: props.feedFilter,
    showFeedHeader: props.showFeedHeader ?? false,
    theme: props.theme,
    thirdparties: props.thirdparties,
    translateConversations: props.translateConversations
  }), [props.customEmojis, props.feedConversationTitleMode, props.feedFilter, props.showFeedHeader, props.theme, props.thirdparties, props.translateConversations]);
  useEffect(() => {
    injectJavaScript(`
      if (${CONVERSATION_LIST}) {
        ${CONVERSATION_LIST}.destroy();
      }
      ${CONVERSATION_LIST} = ${SESSION}.createInbox(${options});
      ${CONVERSATION_LIST}.select(null);
      ${CONVERSATION_LIST}.mount(document.getElementById('${CONTAINER}')).then(
        () => sendToReactNative('${UI_MOUNTED_MESSAGE}')
      );
      true;
    `);
  }, [session, options, injectJavaScript]);

  // All useEffects below need the session and options objects as dependencies
  // because if the Session or ConversationList are recreated, we want to add
  // these listeners afresh
  useEffect(() => {
    if (props.onBlur) {
      const subscription = talkHandlers.add(BLUR_EVENT, CONVERSATION_LIST, props.onBlur);
      return () => subscription.unsubscribe();
    }
    return;
  }, [session, options, props.onBlur]);
  useEffect(() => {
    if (props.onFocus) {
      const subscription = talkHandlers.add(FOCUS_EVENT, CONVERSATION_LIST, props.onFocus);
      return () => subscription.unsubscribe();
    }
    return;
  }, [session, options, props.onFocus]);
  useEffect(() => {
    if (props.onSelectConversation) {
      talkHandlers.addOnSelectConversation(event => props.onSelectConversation(event));
    }
  }, [session, options, props.onSelectConversation]);
  useImperativeHandle(ref, () => ({
    off: event => talkHandlers.off(event),
    setTranslationEnabledDefault: enabled => {
      injectJavaScript(`
          ${CONVERSATION_LIST}.setTranslationEnabledDefault(
            ${JSON.stringify(enabled)});
          true;
        `);
    }
  }), [injectJavaScript, talkHandlers]);
  return /*#__PURE__*/_jsx(_Fragment, {
    children: !!isLoading && props.loadingComponent
  });
}
const forwardedConversationList = /*#__PURE__*/forwardRef(ConversationList);
export { forwardedConversationList as ConversationList };
//# sourceMappingURL=ConversationList.js.map