@iterable/react-native-sdk/lib/module/inbox/components/IterableInboxMessageList.js

Iterable SDK for React Native.

"use strict";

import { useCallback, useRef, useState } from 'react';
import { FlatList } from 'react-native';
import { IterableInAppMessage } from "../../inApp/index.js";
import { IterableInboxMessageCell } from "./IterableInboxMessageCell.js";

/**
 * Props for the IterableInboxMessageList component.
 */
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * A component that renders a list of inbox messages.
 */
export const IterableInboxMessageList = ({
  dataModel,
  rowViewModels,
  customizations,
  messageListItemLayout,
  deleteRow,
  handleMessageSelect,
  updateVisibleMessageImpressions,
  contentWidth,
  isPortrait
}) => {
  const [swiping, setSwiping] = useState(false);
  const flatListRef = useRef(null);
  function renderRowViewModel(rowViewModel, index, last) {
    return /*#__PURE__*/_jsx(IterableInboxMessageCell, {
      index: index,
      last: last,
      dataModel: dataModel,
      rowViewModel: rowViewModel,
      customizations: customizations,
      swipingCheck: setSwiping,
      messageListItemLayout: messageListItemLayout,
      deleteRow: deleteRow,
      handleMessageSelect: handleMessageSelect,
      contentWidth: contentWidth,
      isPortrait: isPortrait
    }, rowViewModel.inAppMessage.messageId);
  }
  function getRowInfosFromViewTokens(viewTokens) {
    return viewTokens.filter(viewToken => {
      // Filter out viewTokens that don't have valid items or inAppMessage
      return viewToken?.item?.inAppMessage?.messageId;
    }).map(function (viewToken) {
      try {
        const inAppMessage = IterableInAppMessage.fromViewToken(viewToken);
        const impression = {
          messageId: inAppMessage?.messageId,
          silentInbox: inAppMessage?.isSilentInbox()
        };
        return impression;
      } catch (error) {
        // Log the error and return null to be filtered out
        console.warn('Failed to create impression from ViewToken:', error);
        return null;
      }
    }).filter(impression => impression !== null);
  }
  const inboxSessionViewabilityConfig = {
    minimumViewTime: 500,
    itemVisiblePercentThreshold: 100,
    waitForInteraction: false
  };
  const inboxSessionItemsChanged = useCallback(info => {
    const rowInfos = getRowInfosFromViewTokens(info.viewableItems);
    updateVisibleMessageImpressions(rowInfos);
  },
  // MOB-10427: Figure out if we need the missing dependencies
  // eslint-disable-next-line react-hooks/exhaustive-deps
  []);
  return /*#__PURE__*/_jsx(FlatList, {
    ref: flatListRef,
    scrollEnabled: !swiping,
    data: rowViewModels,
    renderItem: ({
      item,
      index
    }) => renderRowViewModel(item, index, index === rowViewModels.length - 1),
    keyExtractor: item => item.inAppMessage.messageId,
    viewabilityConfig: inboxSessionViewabilityConfig,
    onViewableItemsChanged: inboxSessionItemsChanged,
    onLayout: () => {
      flatListRef.current?.recordInteraction();
    }
  });
};
//# sourceMappingURL=IterableInboxMessageList.js.map