@told.club/sdk-rn
Version:
Told React Native SDK
171 lines (166 loc) • 7.24 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ToldWidget;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeWebview = require("react-native-webview");
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
var _ToldContext = _interopRequireDefault(require("./ToldContext"));
var _ToldStorage = require("./ToldStorage");
var _hiddenFields = require("./utils/hiddenFields");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const transferMessagesToRN = `
window.addEventListener('message', (e) => {
window.ReactNativeWebView.postMessage(JSON.stringify(e.data));
});
window.console.log = (msg, other = '') => window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'LOG', msg: msg + other }));
`;
function ToldWidget({
surveyId,
sourceID,
params,
widgetUrl
}) {
const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
const {
height
} = (0, _reactNative.useWindowDimensions)();
const webviewRef = React.useRef(null);
const {
close,
hiddenFields
} = React.useContext(_ToldContext.default);
const [currentHeight, setCurrentHeight] = React.useState(500);
const [urlModalLink, setUrlModalLink] = React.useState(null);
// Animated values
const animatedHeight = React.useRef(new _reactNative.Animated.Value(500)).current;
const animatedOpacity = React.useRef(new _reactNative.Animated.Value(0)).current;
React.useEffect(() => {
// When the widget is mounted, we set the survey as seen
if (surveyId) (0, _ToldStorage.setSeen)(surveyId);
}, [surveyId]);
// METHOD: Animate the webview height
const updateWebviewHeight = React.useCallback((newHeight, animated) => {
_reactNative.Animated.timing(animatedHeight, {
toValue: newHeight,
duration: animated ? 300 : 0,
useNativeDriver: false
}).start();
}, [animatedHeight]);
// EVENT: Message received from the webview
const onMessageReceived = React.useCallback(event => {
var _webviewRef$current, _data$value;
const data = JSON.parse(event.nativeEvent.data);
const type = data === null || data === void 0 ? void 0 : data.type;
switch (type) {
case 'LOG':
if (params.includes('debug')) console.log(`[LOG] ${data.msg}`);
return;
case 'IS_LOADED':
const formattedHiddenFields = (0, _hiddenFields.convertToJSONString)(hiddenFields);
(_webviewRef$current = webviewRef.current) === null || _webviewRef$current === void 0 || _webviewRef$current.injectJavaScript(`
window.postMessage({type: 'OS_TYPE', value: '${_reactNative.Platform.OS.toUpperCase()}'}, '*');
window.postMessage({type: 'DEVICE_TYPE', value: 'phone'}, '*');
window.postMessage({type: 'SAFE_AREA', value: '${insets.bottom}'}, '*');
window.postMessage({type: 'UPDATE_HIDDENFIELDS', value: '${formattedHiddenFields}'}, '*');
`);
break;
case 'HEIGHT_CHANGE':
const value = data === null || data === void 0 ? void 0 : data.value;
const newHeight = value > height ? height - insets.top : value;
updateWebviewHeight(newHeight, /*currentHeight > newHeight*/false);
if (currentHeight === 500) {
_reactNative.Animated.timing(animatedOpacity, {
toValue: 1,
duration: 300,
useNativeDriver: false
}).start();
}
setCurrentHeight(newHeight);
break;
case 'LAUNCH_CALENDAR':
const url = data === null || data === void 0 || (_data$value = data.value) === null || _data$value === void 0 ? void 0 : _data$value.iframeUrl;
// if (url) Linking.openURL(url);
if (url) setUrlModalLink(url);
break;
case 'ADD_COOKIE':
const reply = data === null || data === void 0 ? void 0 : data.reply;
if (reply) (0, _ToldStorage.setReplied)(surveyId);
break;
case 'CLOSE':
_reactNative.Animated.timing(animatedOpacity, {
toValue: 0,
duration: 125,
useNativeDriver: false
}).start(() => close());
break;
default:
break;
}
if (params.includes('debug')) console.log(`[MSG RECEIVED] ${event.nativeEvent.data}`);
}, [params, insets, height, updateWebviewHeight, currentHeight, surveyId, animatedOpacity, close, hiddenFields]);
// EVENT: Open a new window
const onOpenWindow = React.useCallback(event => {
var _event$nativeEvent;
_reactNative.Linking.openURL(event === null || event === void 0 || (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.targetUrl);
}, []);
const onLinkModalClose = React.useCallback(() => {
setUrlModalLink(null);
}, []);
return /*#__PURE__*/React.createElement(_reactNative.Modal, {
transparent: true,
visible: true
}, /*#__PURE__*/React.createElement(_reactNative.KeyboardAvoidingView, {
behavior: "padding",
style: styles.container
}, /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
style: [styles.animatedContainer, {
height: animatedHeight,
opacity: animatedOpacity
}]
}, /*#__PURE__*/React.createElement(_reactNativeWebview.WebView, {
ref: webviewRef,
source: {
uri: `${widgetUrl}/?id=${surveyId}&toldProjectID=${sourceID}`
},
bounces: false,
containerStyle: styles.webViewContainer,
style: styles.webView,
injectedJavaScript: transferMessagesToRN,
onMessage: onMessageReceived,
onOpenWindow: onOpenWindow,
scrollEnabled: false
}))), /*#__PURE__*/React.createElement(_reactNative.Modal, {
animationType: "slide",
presentationStyle: "pageSheet",
visible: urlModalLink !== null,
onRequestClose: onLinkModalClose
}, urlModalLink && /*#__PURE__*/React.createElement(_reactNativeWebview.WebView, {
source: {
uri: urlModalLink
},
containerStyle: styles.webViewContainer,
onOpenWindow: onOpenWindow,
scrollEnabled: true
})));
}
const styles = _reactNative.StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column-reverse'
},
animatedContainer: {
flex: 0
},
webViewContainer: {
flex: 1
},
webView: {
backgroundColor: 'transparent'
}
});
//# sourceMappingURL=ToldWidget.js.map