@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
126 lines (120 loc) • 7.8 kB
JavaScript
;
var tslib = require('tslib');
var React = require('react');
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 reactI18n = require('@shopify/react-i18n');
var polarisInternal = require('@shopify/polaris-internal');
var compose = require('@shopify/react-compose');
var store_reducers_embeddedApp_features_index = require('../../store/reducers/embeddedApp/features/index.js');
var withFeature = require('../../withFeature.js');
var store_reducers_embeddedApp_contextualSaveBar_index = require('../../store/reducers/embeddedApp/contextualSaveBar/index.js');
var useFeature = require('../../features/utilities/useFeature.js');
var LeaveConfirmation = require('./LeaveConfirmation/LeaveConfirmation.js');
var en = require('./translations/en.json.js');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var compose__default = /*#__PURE__*/_interopDefault(compose);
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);
/**
* The UI component for the ContextualSaveBar feature
* @public
* */
function ContextualSaveBar(props) {
var actions = props.actions, store = props.store, extraProps = tslib.__rest(props, ["actions", "store"]);
var i18n = reactI18n.useI18n({
id: 'ContextualSaveBar_<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: return [4 /*yield*/, __variableDynamicImportRuntime0__(
/* webpackChunkName: "ContextualSaveBar_<hash>-i18n", webpackMode: "lazy-once" */ "./translations/".concat(locale, ".json"))];
case 1:
dictionary = _a.sent();
return [2 /*return*/, dictionary];
}
});
});
},
})[0];
var _a = useFeature.useFeature(store_reducers_embeddedApp_features_index.feature), permissionsActions = _a[1];
var shouldBeEnabled = React.useMemo(function () { return !store || store.leaveConfirmationDisable; }, [store]);
React.useEffect(function () {
var _a, _b, _c;
permissionsActions.update((_a = {},
_a[MessageTransport.Context.Main] = (_b = {},
_b[types.Group.Navigation] = (_c = {},
_c[APP_REDIRECT_KEY] = {
Dispatch: true,
Subscribe: shouldBeEnabled,
},
_c),
_b),
_a));
}, [store, permissionsActions, shouldBeEnabled]);
if (!store) {
return null;
}
var discardAction = store.discardAction, saveAction = store.saveAction, fullWidth = store.fullWidth, leaveConfirmationDisable = store.leaveConfirmationDisable;
var message = i18n.translate('message');
var cancelAction = tslib.__assign(tslib.__assign({}, discardAction), { onAction: handleContextualBarDiscard, showConfirmation: discardAction.discardConfirmationModal });
var primaryAction = tslib.__assign(tslib.__assign({}, saveAction), { onAction: handleContextualBarSave });
var leaveConfirmationMarkup = leaveConfirmationDisable ? null : (React__default.default.createElement(LeaveConfirmation, { onConfirm: handleContextualBarDiscard }));
return (React__default.default.createElement(React__default.default.Fragment, null,
React__default.default.createElement(polarisInternal.ContextualSaveBar, tslib.__assign({}, extraProps, { message: message, saveAction: primaryAction, discardAction: cancelAction, fullWidth: fullWidth })),
leaveConfirmationMarkup));
function handleContextualBarDiscard() {
if (!store) {
return;
}
actions.discard(store);
}
function handleContextualBarSave() {
if (!store) {
return;
}
actions.save(store);
}
}
/**
* The ContextualSaveBar feature with its reducer, actions and UI component
* @public
* */
var ContextualSaveBar$1 = compose__default.default(withFeature.default(store_reducers_embeddedApp_contextualSaveBar_index.feature))(ContextualSaveBar);
module.exports = ContextualSaveBar$1;