@iterable/react-native-sdk
Version:
Iterable SDK for React Native.
86 lines (84 loc) • 2.82 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.IterableInboxMessageList = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _index = require("../../inApp/index.js");
var _IterableInboxMessageCell = require("./IterableInboxMessageCell.js");
var _jsxRuntime = require("react/jsx-runtime");
/**
* Props for the IterableInboxMessageList component.
*/
/**
* A component that renders a list of inbox messages.
*/
const IterableInboxMessageList = ({
dataModel,
rowViewModels,
customizations,
messageListItemLayout,
deleteRow,
handleMessageSelect,
updateVisibleMessageImpressions,
contentWidth,
isPortrait
}) => {
const [swiping, setSwiping] = (0, _react.useState)(false);
const flatListRef = (0, _react.useRef)(null);
function renderRowViewModel(rowViewModel, index, last) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IterableInboxMessageCell.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.map(function (viewToken) {
const inAppMessage = _index.IterableInAppMessage.fromViewToken(viewToken);
const impression = {
messageId: inAppMessage.messageId,
silentInbox: inAppMessage.isSilentInbox()
};
return impression;
});
}
const inboxSessionViewabilityConfig = {
minimumViewTime: 500,
itemVisiblePercentThreshold: 100,
waitForInteraction: false
};
const inboxSessionItemsChanged = (0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.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();
}
});
};
exports.IterableInboxMessageList = IterableInboxMessageList;
//# sourceMappingURL=IterableInboxMessageList.js.map