@shopify/app-bridge-host
Version:
App Bridge Host contains components and middleware to be consumed by the app's host, as well as the host itself. The middleware and `Frame` component are responsible for facilitating communication between the client and host, and used to act on actions se
162 lines (156 loc) • 8.56 kB
JavaScript
;
var tslib = require('tslib');
var React = require('react');
var polarisInternal = require('@shopify/polaris-internal');
var reactI18n = require('@shopify/react-i18n');
var Error$1 = require('@shopify/app-bridge-core/actions/Error');
var MessageTransport = require('@shopify/app-bridge-core/MessageTransport');
var Redirect = require('@shopify/app-bridge-core/actions/Navigation/Redirect');
var types = require('@shopify/app-bridge-core/actions/types');
var validator = require('@shopify/app-bridge-core/actions/validator');
var useRouterContext = require('../../../hooks/useRouterContext.js');
var useFeature = require('../../../features/utilities/useFeature.js');
var store_reducers_embeddedApp_features_index = require('../../../store/reducers/embeddedApp/features/index.js');
var en = require('./translations/en.json.js');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
function __variableDynamicImportRuntime0__(path) {
switch (path) {
case './translations/cs.json': return Promise.resolve().then(function () { return require('./translations/cs.json.js'); });
case './translations/da.json': return Promise.resolve().then(function () { return require('./translations/da.json.js'); });
case './translations/de.json': return Promise.resolve().then(function () { return require('./translations/de.json.js'); });
case './translations/en.json': return Promise.resolve().then(function () { return require('./translations/en.json.js'); });
case './translations/es.json': return Promise.resolve().then(function () { return require('./translations/es.json.js'); });
case './translations/fi.json': return Promise.resolve().then(function () { return require('./translations/fi.json.js'); });
case './translations/fr.json': return Promise.resolve().then(function () { return require('./translations/fr.json.js'); });
case './translations/hi.json': return Promise.resolve().then(function () { return require('./translations/hi.json.js'); });
case './translations/it.json': return Promise.resolve().then(function () { return require('./translations/it.json.js'); });
case './translations/ja.json': return Promise.resolve().then(function () { return require('./translations/ja.json.js'); });
case './translations/ko.json': return Promise.resolve().then(function () { return require('./translations/ko.json.js'); });
case './translations/ms.json': return Promise.resolve().then(function () { return require('./translations/ms.json.js'); });
case './translations/nb.json': return Promise.resolve().then(function () { return require('./translations/nb.json.js'); });
case './translations/nl.json': return Promise.resolve().then(function () { return require('./translations/nl.json.js'); });
case './translations/pl.json': return Promise.resolve().then(function () { return require('./translations/pl.json.js'); });
case './translations/pt-BR.json': return Promise.resolve().then(function () { return require('./translations/pt-BR.json.js'); });
case './translations/pt-PT.json': return Promise.resolve().then(function () { return require('./translations/pt-PT.json.js'); });
case './translations/sv.json': return Promise.resolve().then(function () { return require('./translations/sv.json.js'); });
case './translations/th.json': return Promise.resolve().then(function () { return require('./translations/th.json.js'); });
case './translations/tr.json': return Promise.resolve().then(function () { return require('./translations/tr.json.js'); });
case './translations/zh-CN.json': return Promise.resolve().then(function () { return require('./translations/zh-CN.json.js'); });
case './translations/zh-TW.json': return Promise.resolve().then(function () { return require('./translations/zh-TW.json.js'); });
default: return new Promise(function(resolve, reject) {
(typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
reject.bind(null, new Error("Unknown variable dynamic import: " + path))
);
})
}
}
var APP_REDIRECT_KEY = validator.getPermissionKey(Redirect.Action.APP);
function LeaveConfirmation(props) {
var router = useRouterContext.useRouterContext();
var history = router.history, location = router.location;
var _a = useFeature.useFeature(store_reducers_embeddedApp_features_index.feature), permissionsActions = _a[1];
var i18n = reactI18n.useI18n({
id: 'LeaveConfirmation_<hash>',
fallback: en.default,
translations: function (locale) {
return tslib.__awaiter(this, void 0, void 0, function () {
var dictionary;
return tslib.__generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
return [4 /*yield*/, __variableDynamicImportRuntime0__("./translations/".concat(locale, ".json"))];
case 1:
dictionary = _a.sent();
return [2 /*return*/, dictionary];
case 2:
_a.sent();
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}
});
});
},
})[0];
var _b = React.useState(false), openState = _b[0], setOpen = _b[1];
var open = props.open || openState;
var _c = React.useState(null), nextLocation = _c[0], setNextLocation = _c[1];
var unblock = React.useRef();
React.useEffect(function () {
if (!history.block) {
throw Error$1.fromAction('Missing the `history.block` method in the Router Context. The router history must contain a method to block route changes', Error$1.AppActionType.MISSING_HISTORY_BLOCK);
}
disableLeaveHook();
unblock.current = history.block(handleRouteLeave);
return disableLeaveHook;
}, []);
return (React__default.default.createElement(React__default.default.Fragment, null,
React__default.default.createElement(polarisInternal.EventListener, { event: "beforeunload", handler: beforeUnload }),
React__default.default.createElement(polarisInternal.Modal, { title: i18n.translate('title'), open: open, secondaryActions: [
{
content: i18n.translate('cancel'),
onAction: handleClose,
},
{
content: i18n.translate('confirmLabel'),
onAction: handleConfirm,
destructive: true,
},
], onClose: handleClose, sectioned: true }, i18n.translate('content'))));
function disableLeaveHook() {
if (unblock.current) {
unblock.current();
unblock.current = undefined;
}
}
function beforeUnload(evt) {
evt.returnValue = true;
return true;
}
function handleRouteLeave(nextLocation) {
if (!nextLocation || (nextLocation && nextLocation.pathname === location.pathname)) {
return;
}
setOpen(true);
if (nextLocation) {
var url = new URL(window.location.href);
url.pathname = nextLocation.pathname;
setNextLocation(nextLocation);
}
return false;
}
function handleClose() {
var _a;
setOpen(false);
(_a = props.onDiscard) === null || _a === void 0 ? void 0 : _a.call(props);
}
function handleConfirm() {
var _a, _b, _c;
var onConfirm = props.onConfirm;
if (props.open) {
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
return;
}
if (!nextLocation) {
return;
}
if (onConfirm) {
onConfirm();
}
disableLeaveHook();
// Re-enable app redirect subscribe after ContextualSaveBar disables it
permissionsActions.update((_a = {},
_a[MessageTransport.Context.Main] = (_b = {},
_b[types.Group.Navigation] = (_c = {},
_c[APP_REDIRECT_KEY] = {
Dispatch: true,
Subscribe: true,
},
_c),
_b),
_a));
history.push(nextLocation);
}
}
module.exports = LeaveConfirmation;