@shopify/app-bridge-react 2.0.19 → 2.0.22

package/hooks/useContextualSaveBar/useContextualSaveBar.js

@@ -0,0 +1,68 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContextualSaveBar = void 0;
+var react_1 = require("react");
+var ContextualSaveBar_1 = require("@shopify/app-bridge/actions/ContextualSaveBar");
+var useAppBridge_1 = require("../../useAppBridge");
+function useContextualSaveBar(_a) {
+    var discardAction = _a.discardAction, saveAction = _a.saveAction, fullWidth = _a.fullWidth, leaveConfirmationDisable = _a.leaveConfirmationDisable, visible = _a.visible;
+    var app = (0, useAppBridge_1.useAppBridge)();
+    var onSaveAction = saveAction.onAction, saveActionProps = __rest(saveAction, ["onAction"]);
+    var onDiscardAction = discardAction.onAction, discardActionProps = __rest(discardAction, ["onAction"]);
+    /* We want to reuse the same ContextualSaveBar instance, even when props change
+     * (so we don't include all the props in the dependency array).
+     * Instead of recreating the component on every change, we use the set method,
+     * in the useEffect block below, to dispatch updates when props change.
+     */
+    var contextualSaveBar = (0, react_1.useMemo)(function () {
+        return (0, ContextualSaveBar_1.create)(app, {
+            saveAction: saveActionProps,
+            discardAction: discardActionProps,
+            fullWidth: fullWidth,
+            leaveConfirmationDisable: leaveConfirmationDisable,
+        });
+    }, [app]);
+    (0, react_1.useEffect)(function () {
+        contextualSaveBar.set({
+            saveAction: saveActionProps,
+            discardAction: discardActionProps,
+            fullWidth: fullWidth,
+            leaveConfirmationDisable: leaveConfirmationDisable,
+        }, Boolean(visible));
+    }, [
+        contextualSaveBar,
+        saveActionProps,
+        discardActionProps,
+        fullWidth,
+        leaveConfirmationDisable,
+        visible,
+    ]);
+    (0, react_1.useEffect)(function () {
+        contextualSaveBar.subscribe(ContextualSaveBar_1.Action.DISCARD, onDiscardAction);
+        contextualSaveBar.subscribe(ContextualSaveBar_1.Action.SAVE, onSaveAction);
+        return function () {
+            contextualSaveBar.unsubscribe();
+        };
+    }, [contextualSaveBar]);
+    (0, react_1.useEffect)(function () {
+        if (visible) {
+            contextualSaveBar.dispatch(ContextualSaveBar_1.Action.SHOW);
+        }
+        else {
+            contextualSaveBar.dispatch(ContextualSaveBar_1.Action.HIDE);
+        }
+    }, [contextualSaveBar, visible]);
+    return null;
+}
+exports.useContextualSaveBar = useContextualSaveBar;

package/hooks/useNavigationHistory/index.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigationHistory = void 0;
 var useNavigationHistory_1 = require("./useNavigationHistory");
 Object.defineProperty(exports, "useNavigationHistory", { enumerable: true, get: function () { return useNavigationHistory_1.useNavigationHistory; } });

package/hooks/useNavigationHistory/useNavigationHistory.js

@@ -13,8 +13,8 @@ var useAppBridge_1 = require("../../useAppBridge");
  * @public
  */
 function useNavigationHistory() {
-    var app = useAppBridge_1.useAppBridge();
-    return react_1.useMemo(function () {
+    var app = (0, useAppBridge_1.useAppBridge)();
+    return (0, react_1.useMemo)(function () {
         var history = actions_1.History.create(app);
         function push(location) {
             history.dispatch(actions_1.History.Action.PUSH, location.pathname);

package/hooks/useToast/index.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToast = void 0;
 var useToast_1 = require("./useToast");
 Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return useToast_1.useToast; } });

package/hooks/useToast/useToast.js

@@ -14,11 +14,11 @@ exports.DEFAULT_TOAST_DURATION = 5000;
  * @public
  */
 function useToast() {
-    var app = useAppBridge_1.useAppBridge();
+    var app = (0, useAppBridge_1.useAppBridge)();
     var toast;
-    var show = react_1.useCallback(function (_a) {
+    var show = (0, react_1.useCallback)(function (_a) {
         var message = _a.content, _b = _a.duration, duration = _b === void 0 ? exports.DEFAULT_TOAST_DURATION : _b, isError = _a.isError, onDismiss = _a.onDismiss;
-        toast = Toast_1.create(app, {
+        toast = (0, Toast_1.create)(app, {
             message: message,
             isError: isError,
             duration: duration,
@@ -28,7 +28,7 @@ function useToast() {
             toast.subscribe(Toast_1.Action.CLEAR, onDismiss);
         }
     }, [app]);
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         return function () {
             toast.unsubscribe();
         };

package/index.js

@@ -1,15 +1,20 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAppBridge = exports.Context = void 0;
 __exportStar(require("./components"), exports);
 var context_1 = require("./context");
 Object.defineProperty(exports, "Context", { enumerable: true, get: function () { return context_1.AppBridgeContext; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/app-bridge-react",
-  "version": "2.0.19",
+  "version": "2.0.22",
   "types": "index.d.ts",
   "main": "index.js",
   "unpkg": "umd/index.js",
@@ -45,7 +45,7 @@
     }
   ],
   "dependencies": {
-    "@shopify/app-bridge": "^2.0.19"
+    "@shopify/app-bridge": "^2.0.22"
   },
   "devDependencies": {
     "@types/react": "^17.0.38",
@@ -55,5 +55,5 @@
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0"
   },
-  "gitHead": "7b9604f253934c22ef88630eaa3eb891bdfc6f7a"
+  "gitHead": "a22c1145bf5fbc3c9ae765a7c37c89d14c229d8c"
 }