@iterable/react-native-sdk
Version:
Iterable SDK for React Native.
201 lines (195 loc) • 6.74 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.IterableInboxMessageDisplay = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _Ionicons = _interopRequireDefault(require("react-native-vector-icons/Ionicons"));
var _reactNativeWebview = require("react-native-webview");
var _index = require("../../core/index.js");
var _index2 = require("../../inApp/index.js");
var _index3 = require("../constants/index.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* Props for the IterableInboxMessageDisplay component.
*/
/**
* Component to display an Iterable inbox message.
*/
const IterableInboxMessageDisplay = ({
rowViewModel,
inAppContentPromise,
returnToInbox,
deleteRow,
contentWidth,
isPortrait
}) => {
const messageTitle = rowViewModel.inAppMessage.inboxMetadata?.title;
const [inAppContent, setInAppContent] = (0, _react.useState)(new _index2.IterableHtmlInAppContent(new _index.IterableEdgeInsets(0, 0, 0, 0), ''));
const styles = _reactNative.StyleSheet.create({
contentContainer: {
flex: 1
},
header: {
flexDirection: 'row',
justifyContent: 'center',
width: '100%'
},
messageDisplayContainer: {
backgroundColor: _index3.ITERABLE_INBOX_COLORS.CONTAINER_BACKGROUND,
flexDirection: 'column',
height: '100%',
justifyContent: 'flex-start',
width: contentWidth
},
messageTitle: {
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'center',
width: 0.5 * contentWidth
},
messageTitleContainer: {
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'flex-start',
marginTop: 0,
width: '75%'
},
messageTitleText: {
backgroundColor: _index3.ITERABLE_INBOX_COLORS.CONTAINER_BACKGROUND,
fontSize: 20,
fontWeight: 'bold'
},
returnButton: {
alignItems: 'center',
flexDirection: 'row'
},
returnButtonContainer: {
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'flex-start',
marginLeft: 0,
marginTop: 0,
width: '25%',
...(isPortrait ? {} : {
marginLeft: 80
})
},
returnButtonIcon: {
color: _index3.ITERABLE_INBOX_COLORS.BUTTON_PRIMARY_TEXT,
fontSize: 40,
paddingLeft: 0
},
returnButtonText: {
color: _index3.ITERABLE_INBOX_COLORS.BUTTON_PRIMARY_TEXT,
fontSize: 20
}
});
const JS = `
const links = document.querySelectorAll('a')
links.forEach(link => {
link.class = link.href
link.href = "javascript:void(0)"
link.addEventListener("click", () => {
window.ReactNativeWebView.postMessage(link.class)
})
})
`;
(0, _react.useEffect)(() => {
let mounted = true;
inAppContentPromise.then(value => {
if (mounted) {
setInAppContent(value);
}
});
return () => {
mounted = false;
};
});
function handleInAppLinkAction(event) {
const URL = event.nativeEvent.data;
const action = new _index.IterableAction('openUrl', URL, '');
const source = _index.IterableActionSource.inApp;
const context = new _index.IterableActionContext(action, source);
_index.Iterable.trackInAppClick(rowViewModel.inAppMessage, _index2.IterableInAppLocation.inbox, URL);
_index.Iterable.trackInAppClose(rowViewModel.inAppMessage, _index2.IterableInAppLocation.inbox, _index2.IterableInAppCloseSource.link, URL);
//handle delete action
if (URL === 'iterable://delete') {
returnToInbox(() => deleteRow(rowViewModel.inAppMessage.messageId));
//handle dismiss action
} else if (URL === 'iterable://dismiss') {
returnToInbox();
//handle external link
} else if (URL.slice(0, 4) === 'http') {
returnToInbox(() => _reactNative.Linking.openURL(URL));
//handle custom action
} else if (URL.slice(0, 9) === 'action://') {
action.type = URL.replace('action://', '');
returnToInbox(() => {
if (_index.Iterable.savedConfig.customActionHandler) {
_index.Iterable.savedConfig.customActionHandler(action, context);
}
});
//handle deep link or error link
} else {
returnToInbox(() => {
if (_index.Iterable.savedConfig.urlHandler) {
_index.Iterable.savedConfig.urlHandler(URL, context);
}
});
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.messageDisplayContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.header,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.returnButtonContainer,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
onPress: () => {
returnToInbox();
_index.Iterable.trackInAppClose(rowViewModel.inAppMessage, _index2.IterableInAppLocation.inbox, _index2.IterableInAppCloseSource.back);
},
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.returnButton,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
name: "chevron-back-outline",
style: styles.returnButtonIcon
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.returnButtonText,
children: "Inbox"
})]
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.messageTitleContainer,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.messageTitle,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
numberOfLines: 1,
ellipsizeMode: "tail",
style: styles.messageTitleText,
children: messageTitle
})
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
contentContainerStyle: styles.contentContainer,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeWebview.WebView, {
originWhiteList: ['*'],
source: {
html: inAppContent.html
},
style: {
width: contentWidth
},
onMessage: event => handleInAppLinkAction(event),
injectedJavaScript: JS
})
})]
});
};
exports.IterableInboxMessageDisplay = IterableInboxMessageDisplay;
//# sourceMappingURL=IterableInboxMessageDisplay.js.map