@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
119 lines (116 loc) • 6.19 kB
JavaScript
import { __rest, __awaiter, __generator, __assign } from 'tslib';
import React, { useMemo, useEffect } from 'react';
import { Context } from '@shopify/app-bridge-core/MessageTransport';
import { Action } from '@shopify/app-bridge-core/actions/Navigation/Redirect';
import { Group } from '@shopify/app-bridge-core/actions/types';
import { getPermissionKey } from '@shopify/app-bridge-core/actions/validator';
import { useI18n } from '@shopify/react-i18n';
import { ContextualSaveBar as ContextualSaveBar$2 } from '@shopify/polaris-internal';
import compose from '@shopify/react-compose';
import { feature } from '../../store/reducers/embeddedApp/features/index.js';
import withFeature from '../../withFeature.js';
import { feature as feature$1 } from '../../store/reducers/embeddedApp/contextualSaveBar/index.js';
import { useFeature } from '../../features/utilities/useFeature.js';
import LeaveConfirmation from './LeaveConfirmation/LeaveConfirmation.js';
import en from './translations/en.json.js';
function __variableDynamicImportRuntime0__(path) {
switch (path) {
case './translations/cs.json': return import('./translations/cs.json.js');
case './translations/da.json': return import('./translations/da.json.js');
case './translations/de.json': return import('./translations/de.json.js');
case './translations/en.json': return import('./translations/en.json.js');
case './translations/es.json': return import('./translations/es.json.js');
case './translations/fi.json': return import('./translations/fi.json.js');
case './translations/fr.json': return import('./translations/fr.json.js');
case './translations/hi.json': return import('./translations/hi.json.js');
case './translations/it.json': return import('./translations/it.json.js');
case './translations/ja.json': return import('./translations/ja.json.js');
case './translations/ko.json': return import('./translations/ko.json.js');
case './translations/ms.json': return import('./translations/ms.json.js');
case './translations/nb.json': return import('./translations/nb.json.js');
case './translations/nl.json': return import('./translations/nl.json.js');
case './translations/pl.json': return import('./translations/pl.json.js');
case './translations/pt-BR.json': return import('./translations/pt-BR.json.js');
case './translations/pt-PT.json': return import('./translations/pt-PT.json.js');
case './translations/sv.json': return import('./translations/sv.json.js');
case './translations/th.json': return import('./translations/th.json.js');
case './translations/tr.json': return import('./translations/tr.json.js');
case './translations/zh-CN.json': return import('./translations/zh-CN.json.js');
case './translations/zh-TW.json': return import('./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 = getPermissionKey(Action.APP);
/**
* The UI component for the ContextualSaveBar feature
* @public
* */
function ContextualSaveBar(props) {
var actions = props.actions, store = props.store, extraProps = __rest(props, ["actions", "store"]);
var i18n = useI18n({
id: 'ContextualSaveBar_<hash>',
fallback: en,
translations: function (locale) {
return __awaiter(this, void 0, void 0, function () {
var dictionary;
return __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(feature), permissionsActions = _a[1];
var shouldBeEnabled = useMemo(function () { return !store || store.leaveConfirmationDisable; }, [store]);
useEffect(function () {
var _a, _b, _c;
permissionsActions.update((_a = {},
_a[Context.Main] = (_b = {},
_b[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 = __assign(__assign({}, discardAction), { onAction: handleContextualBarDiscard, showConfirmation: discardAction.discardConfirmationModal });
var primaryAction = __assign(__assign({}, saveAction), { onAction: handleContextualBarSave });
var leaveConfirmationMarkup = leaveConfirmationDisable ? null : (React.createElement(LeaveConfirmation, { onConfirm: handleContextualBarDiscard }));
return (React.createElement(React.Fragment, null,
React.createElement(ContextualSaveBar$2, __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(withFeature(feature$1))(ContextualSaveBar);
export { ContextualSaveBar$1 as default };