@shopify/app-bridge-react 2.1.0 → 2.1.1-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/package.json +3 -3
- package/components/ClientRouter/ClientRouter.d.ts +0 -21
- package/components/ClientRouter/ClientRouter.js +0 -52
- package/components/ClientRouter/hook.d.ts +0 -10
- package/components/ClientRouter/hook.js +0 -20
- package/components/ClientRouter/index.d.ts +0 -3
- package/components/ClientRouter/index.js +0 -10
- package/components/ClientRouter/router.d.ts +0 -5
- package/components/ClientRouter/router.js +0 -11
- package/components/ContextualSaveBar/ContextualSaveBar.d.ts +0 -13
- package/components/ContextualSaveBar/ContextualSaveBar.js +0 -64
- package/components/ContextualSaveBar/index.d.ts +0 -3
- package/components/ContextualSaveBar/index.js +0 -7
- package/components/Loading/Loading.d.ts +0 -17
- package/components/Loading/Loading.js +0 -55
- package/components/Loading/index.d.ts +0 -2
- package/components/Loading/index.js +0 -7
- package/components/Modal/Modal.d.ts +0 -32
- package/components/Modal/Modal.js +0 -139
- package/components/Modal/ModalContent/ModalContent.d.ts +0 -22
- package/components/Modal/ModalContent/ModalContent.js +0 -61
- package/components/Modal/ModalContent/index.d.ts +0 -2
- package/components/Modal/ModalContent/index.js +0 -7
- package/components/Modal/index.d.ts +0 -4
- package/components/Modal/index.js +0 -10
- package/components/NavigationMenu/NavigationMenu.d.ts +0 -17
- package/components/NavigationMenu/NavigationMenu.js +0 -40
- package/components/NavigationMenu/index.d.ts +0 -3
- package/components/NavigationMenu/index.js +0 -7
- package/components/Provider/Provider.d.ts +0 -81
- package/components/Provider/Provider.js +0 -70
- package/components/Provider/index.d.ts +0 -3
- package/components/Provider/index.js +0 -7
- package/components/ResourcePicker/ResourcePicker.d.ts +0 -68
- package/components/ResourcePicker/ResourcePicker.js +0 -114
- package/components/ResourcePicker/index.d.ts +0 -3
- package/components/ResourcePicker/index.js +0 -7
- package/components/RoutePropagator/RoutePropagator.d.ts +0 -20
- package/components/RoutePropagator/RoutePropagator.js +0 -54
- package/components/RoutePropagator/globals.d.ts +0 -3
- package/components/RoutePropagator/globals.js +0 -15
- package/components/RoutePropagator/hook.d.ts +0 -10
- package/components/RoutePropagator/hook.js +0 -20
- package/components/RoutePropagator/index.d.ts +0 -3
- package/components/RoutePropagator/index.js +0 -10
- package/components/RoutePropagator/route-propagator.d.ts +0 -7
- package/components/RoutePropagator/route-propagator.js +0 -91
- package/components/TitleBar/TitleBar.d.ts +0 -27
- package/components/TitleBar/TitleBar.js +0 -108
- package/components/TitleBar/index.d.ts +0 -3
- package/components/TitleBar/index.js +0 -7
- package/components/Toast/Toast.d.ts +0 -31
- package/components/Toast/Toast.js +0 -59
- package/components/Toast/index.d.ts +0 -3
- package/components/Toast/index.js +0 -7
- package/components/index.d.ts +0 -10
- package/components/index.js +0 -35
- package/context.d.ts +0 -13
- package/context.js +0 -10
- package/hooks/index.d.ts +0 -8
- package/hooks/index.js +0 -17
- package/hooks/useAppBridgeState/index.d.ts +0 -1
- package/hooks/useAppBridgeState/index.js +0 -13
- package/hooks/useAppBridgeState/useAppBridgeState.d.ts +0 -10
- package/hooks/useAppBridgeState/useAppBridgeState.js +0 -89
- package/hooks/useContextualSaveBar/index.d.ts +0 -1
- package/hooks/useContextualSaveBar/index.js +0 -5
- package/hooks/useContextualSaveBar/useContextualSaveBar.d.ts +0 -13
- package/hooks/useContextualSaveBar/useContextualSaveBar.js +0 -68
- package/hooks/useFeatureRequest/index.d.ts +0 -1
- package/hooks/useFeatureRequest/index.js +0 -13
- package/hooks/useFeatureRequest/useFeatureRequest.d.ts +0 -13
- package/hooks/useFeatureRequest/useFeatureRequest.js +0 -49
- package/hooks/useFeaturesAvailable/index.d.ts +0 -2
- package/hooks/useFeaturesAvailable/index.js +0 -5
- package/hooks/useFeaturesAvailable/useFeaturesAvailable.d.ts +0 -12
- package/hooks/useFeaturesAvailable/useFeaturesAvailable.js +0 -101
- package/hooks/useLocale/index.d.ts +0 -1
- package/hooks/useLocale/index.js +0 -5
- package/hooks/useLocale/useLocale.d.ts +0 -1
- package/hooks/useLocale/useLocale.js +0 -8
- package/hooks/useNavigate/index.d.ts +0 -1
- package/hooks/useNavigate/index.js +0 -5
- package/hooks/useNavigate/useNavigate.d.ts +0 -24
- package/hooks/useNavigate/useNavigate.js +0 -109
- package/hooks/useNavigationHistory/index.d.ts +0 -1
- package/hooks/useNavigationHistory/index.js +0 -5
- package/hooks/useNavigationHistory/useNavigationHistory.d.ts +0 -16
- package/hooks/useNavigationHistory/useNavigationHistory.js +0 -28
- package/hooks/useToast/index.d.ts +0 -1
- package/hooks/useToast/index.js +0 -5
- package/hooks/useToast/useToast.d.ts +0 -15
- package/hooks/useToast/useToast.js +0 -38
- package/index.d.ts +0 -4
- package/index.js +0 -19
- package/types.d.ts +0 -35
- package/types.js +0 -5
- package/umd/index.js +0 -14
- package/useAppBridge.d.ts +0 -1
- package/useAppBridge.js +0 -13
- package/utilities/transformers.d.ts +0 -20
- package/utilities/transformers.js +0 -105
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.1.1-alpha.0](https://github.com/Shopify/app-bridge/compare/v2.1.0...v2.1.1-alpha.0) (2022-08-31)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @shopify/app-bridge-react
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
# [2.1.0](https://github.com/Shopify/app-bridge/compare/v2.0.30...v2.1.0) (2022-05-24)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @shopify/app-bridge-react
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shopify/app-bridge-react",
|
|
3
|
-
"version": "2.1.0",
|
|
3
|
+
"version": "2.1.1-alpha.0",
|
|
4
4
|
"types": "index.d.ts",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"unpkg": "umd/index.js",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
}
|
|
46
46
|
],
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@shopify/app-bridge": "^2.1.0"
|
|
48
|
+
"@shopify/app-bridge": "^2.1.1-alpha.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@types/react": "^17.0.38",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"react": "^16.0.0 || ^17.0.0 || ^18.0.0"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "52a61413c8c25ed7f42bc0651fd08a9e3b9e4072"
|
|
59
59
|
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Unsubscribe } from '@shopify/app-bridge';
|
|
3
|
-
import { History } from './router';
|
|
4
|
-
export interface Props {
|
|
5
|
-
history: History;
|
|
6
|
-
}
|
|
7
|
-
/**
|
|
8
|
-
* ClientRouter component
|
|
9
|
-
*
|
|
10
|
-
* @remarks
|
|
11
|
-
* React component which keeps the Shopify admin url in sync with the app url
|
|
12
|
-
*
|
|
13
|
-
* @public
|
|
14
|
-
*/
|
|
15
|
-
export default class ClientRouter extends React.Component<Props, never> {
|
|
16
|
-
static contextType: React.Context<import("../../context").IAppBridgeContext>;
|
|
17
|
-
unsubscribe?: Unsubscribe;
|
|
18
|
-
componentDidMount(): void;
|
|
19
|
-
componentWillUnmount(): void;
|
|
20
|
-
render(): null;
|
|
21
|
-
}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __extends = (this && this.__extends) || (function () {
|
|
3
|
-
var extendStatics = function (d, b) {
|
|
4
|
-
extendStatics = Object.setPrototypeOf ||
|
|
5
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
-
return extendStatics(d, b);
|
|
8
|
-
};
|
|
9
|
-
return function (d, b) {
|
|
10
|
-
if (typeof b !== "function" && b !== null)
|
|
11
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
-
extendStatics(d, b);
|
|
13
|
-
function __() { this.constructor = d; }
|
|
14
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
-
};
|
|
16
|
-
})();
|
|
17
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
|
-
};
|
|
20
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
-
var react_1 = __importDefault(require("react"));
|
|
22
|
-
var context_1 = require("../../context");
|
|
23
|
-
var router_1 = require("./router");
|
|
24
|
-
/**
|
|
25
|
-
* ClientRouter component
|
|
26
|
-
*
|
|
27
|
-
* @remarks
|
|
28
|
-
* React component which keeps the Shopify admin url in sync with the app url
|
|
29
|
-
*
|
|
30
|
-
* @public
|
|
31
|
-
*/
|
|
32
|
-
var ClientRouter = /** @class */ (function (_super) {
|
|
33
|
-
__extends(ClientRouter, _super);
|
|
34
|
-
function ClientRouter() {
|
|
35
|
-
return _super !== null && _super.apply(this, arguments) || this;
|
|
36
|
-
}
|
|
37
|
-
ClientRouter.prototype.componentDidMount = function () {
|
|
38
|
-
var history = this.props.history;
|
|
39
|
-
this.unsubscribe = router_1.handleRouteChange(this.context, history);
|
|
40
|
-
};
|
|
41
|
-
ClientRouter.prototype.componentWillUnmount = function () {
|
|
42
|
-
if (this.unsubscribe) {
|
|
43
|
-
this.unsubscribe();
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
ClientRouter.prototype.render = function () {
|
|
47
|
-
return null;
|
|
48
|
-
};
|
|
49
|
-
ClientRouter.contextType = context_1.AppBridgeContext;
|
|
50
|
-
return ClientRouter;
|
|
51
|
-
}(react_1.default.Component));
|
|
52
|
-
exports.default = ClientRouter;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
var react_1 = require("react");
|
|
4
|
-
var useAppBridge_1 = require("../../useAppBridge");
|
|
5
|
-
var router_1 = require("./router");
|
|
6
|
-
/**
|
|
7
|
-
* useRoutePropagation
|
|
8
|
-
*
|
|
9
|
-
* @remarks
|
|
10
|
-
* A hook which keeps the Shopify admin url in sync with the app url
|
|
11
|
-
*
|
|
12
|
-
* @public
|
|
13
|
-
*/
|
|
14
|
-
function useClientRouting(history) {
|
|
15
|
-
var app = useAppBridge_1.useAppBridge();
|
|
16
|
-
react_1.useEffect(function () {
|
|
17
|
-
return router_1.handleRouteChange(app, history);
|
|
18
|
-
}, [app, history]);
|
|
19
|
-
}
|
|
20
|
-
exports.default = useClientRouting;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.useClientRouting = exports.ClientRouter = void 0;
|
|
7
|
-
var ClientRouter_1 = require("./ClientRouter");
|
|
8
|
-
Object.defineProperty(exports, "ClientRouter", { enumerable: true, get: function () { return __importDefault(ClientRouter_1).default; } });
|
|
9
|
-
var hook_1 = require("./hook");
|
|
10
|
-
Object.defineProperty(exports, "useClientRouting", { enumerable: true, get: function () { return __importDefault(hook_1).default; } });
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.handleRouteChange = void 0;
|
|
4
|
-
var actions_1 = require("@shopify/app-bridge/actions");
|
|
5
|
-
function handleRouteChange(app, history) {
|
|
6
|
-
return app.subscribe(actions_1.Redirect.Action.APP, function (_a) {
|
|
7
|
-
var path = _a.path;
|
|
8
|
-
history.replace(path);
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
exports.handleRouteChange = handleRouteChange;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { ContextAction, DiscardAction } from '@shopify/app-bridge/actions/ContextualSaveBar';
|
|
2
|
-
export interface Props {
|
|
3
|
-
discardAction: DiscardAction & {
|
|
4
|
-
onAction(): void;
|
|
5
|
-
};
|
|
6
|
-
saveAction: ContextAction & {
|
|
7
|
-
onAction(): void;
|
|
8
|
-
};
|
|
9
|
-
fullWidth?: boolean;
|
|
10
|
-
leaveConfirmationDisable?: boolean;
|
|
11
|
-
visible?: boolean;
|
|
12
|
-
}
|
|
13
|
-
export default function ContextualSaveBar({ discardAction, saveAction, fullWidth, leaveConfirmationDisable, visible, }: Props): null;
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
var react_1 = require("react");
|
|
15
|
-
var actions_1 = require("@shopify/app-bridge/actions");
|
|
16
|
-
var useAppBridge_1 = require("../../useAppBridge");
|
|
17
|
-
var Action = actions_1.ContextualSaveBar.Action, create = actions_1.ContextualSaveBar.create;
|
|
18
|
-
function ContextualSaveBar(_a) {
|
|
19
|
-
var discardAction = _a.discardAction, saveAction = _a.saveAction, fullWidth = _a.fullWidth, leaveConfirmationDisable = _a.leaveConfirmationDisable, visible = _a.visible;
|
|
20
|
-
var app = useAppBridge_1.useAppBridge();
|
|
21
|
-
var onSaveAction = saveAction.onAction, saveActionProps = __rest(saveAction, ["onAction"]);
|
|
22
|
-
var onDiscardAction = discardAction.onAction, discardActionProps = __rest(discardAction, ["onAction"]);
|
|
23
|
-
var contextualSaveBar = react_1.useMemo(function () {
|
|
24
|
-
return create(app, {
|
|
25
|
-
saveAction: saveActionProps,
|
|
26
|
-
discardAction: discardActionProps,
|
|
27
|
-
fullWidth: fullWidth,
|
|
28
|
-
leaveConfirmationDisable: leaveConfirmationDisable,
|
|
29
|
-
});
|
|
30
|
-
}, [app]);
|
|
31
|
-
react_1.useEffect(function () {
|
|
32
|
-
contextualSaveBar.set({
|
|
33
|
-
saveAction: saveActionProps,
|
|
34
|
-
discardAction: discardActionProps,
|
|
35
|
-
fullWidth: fullWidth,
|
|
36
|
-
leaveConfirmationDisable: leaveConfirmationDisable,
|
|
37
|
-
}, visible);
|
|
38
|
-
}, [
|
|
39
|
-
app,
|
|
40
|
-
contextualSaveBar,
|
|
41
|
-
saveActionProps,
|
|
42
|
-
discardActionProps,
|
|
43
|
-
fullWidth,
|
|
44
|
-
leaveConfirmationDisable,
|
|
45
|
-
visible,
|
|
46
|
-
]);
|
|
47
|
-
react_1.useEffect(function () {
|
|
48
|
-
contextualSaveBar.subscribe(Action.DISCARD, onDiscardAction);
|
|
49
|
-
contextualSaveBar.subscribe(Action.SAVE, onSaveAction);
|
|
50
|
-
return function () {
|
|
51
|
-
contextualSaveBar.unsubscribe();
|
|
52
|
-
};
|
|
53
|
-
}, [contextualSaveBar]);
|
|
54
|
-
react_1.useEffect(function () {
|
|
55
|
-
if (visible) {
|
|
56
|
-
contextualSaveBar.dispatch(Action.SHOW);
|
|
57
|
-
}
|
|
58
|
-
else {
|
|
59
|
-
contextualSaveBar.dispatch(Action.HIDE);
|
|
60
|
-
}
|
|
61
|
-
}, [contextualSaveBar, visible]);
|
|
62
|
-
return null;
|
|
63
|
-
}
|
|
64
|
-
exports.default = ContextualSaveBar;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
var ContextualSaveBar_1 = __importDefault(require("./ContextualSaveBar"));
|
|
7
|
-
exports.default = ContextualSaveBar_1.default;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Loading component
|
|
4
|
-
*
|
|
5
|
-
* @remarks
|
|
6
|
-
* React component which wraps the Shopify App Bridge Loading action.
|
|
7
|
-
*
|
|
8
|
-
* @public
|
|
9
|
-
*/
|
|
10
|
-
declare class Loading extends React.Component {
|
|
11
|
-
static contextType: React.Context<import("../../context").IAppBridgeContext>;
|
|
12
|
-
private loading;
|
|
13
|
-
componentDidMount(): void;
|
|
14
|
-
componentWillUnmount(): void;
|
|
15
|
-
render(): null;
|
|
16
|
-
}
|
|
17
|
-
export default Loading;
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __extends = (this && this.__extends) || (function () {
|
|
3
|
-
var extendStatics = function (d, b) {
|
|
4
|
-
extendStatics = Object.setPrototypeOf ||
|
|
5
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
-
return extendStatics(d, b);
|
|
8
|
-
};
|
|
9
|
-
return function (d, b) {
|
|
10
|
-
if (typeof b !== "function" && b !== null)
|
|
11
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
-
extendStatics(d, b);
|
|
13
|
-
function __() { this.constructor = d; }
|
|
14
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
-
};
|
|
16
|
-
})();
|
|
17
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
|
-
};
|
|
20
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
-
var react_1 = __importDefault(require("react"));
|
|
22
|
-
var actions_1 = require("@shopify/app-bridge/actions");
|
|
23
|
-
var context_1 = require("../../context");
|
|
24
|
-
/**
|
|
25
|
-
* Loading component
|
|
26
|
-
*
|
|
27
|
-
* @remarks
|
|
28
|
-
* React component which wraps the Shopify App Bridge Loading action.
|
|
29
|
-
*
|
|
30
|
-
* @public
|
|
31
|
-
*/
|
|
32
|
-
var Loading = /** @class */ (function (_super) {
|
|
33
|
-
__extends(Loading, _super);
|
|
34
|
-
function Loading() {
|
|
35
|
-
return _super !== null && _super.apply(this, arguments) || this;
|
|
36
|
-
}
|
|
37
|
-
Loading.prototype.componentDidMount = function () {
|
|
38
|
-
var app = this.context;
|
|
39
|
-
this.loading = actions_1.Loading.create(app);
|
|
40
|
-
if (this.loading != null) {
|
|
41
|
-
this.loading.dispatch(actions_1.Loading.Action.START);
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
Loading.prototype.componentWillUnmount = function () {
|
|
45
|
-
if (this.loading != null) {
|
|
46
|
-
this.loading.dispatch(actions_1.Loading.Action.STOP);
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
Loading.prototype.render = function () {
|
|
50
|
-
return null;
|
|
51
|
-
};
|
|
52
|
-
Loading.contextType = context_1.AppBridgeContext;
|
|
53
|
-
return Loading;
|
|
54
|
-
}(react_1.default.Component));
|
|
55
|
-
exports.default = Loading;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
var Loading_1 = __importDefault(require("./Loading"));
|
|
7
|
-
exports.default = Loading_1.default;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { Size } from '@shopify/app-bridge/actions/Modal';
|
|
2
|
-
import { ActionProps } from '../../types';
|
|
3
|
-
export interface Props {
|
|
4
|
-
/** Whether the modal is open or not */
|
|
5
|
-
open: boolean;
|
|
6
|
-
/** The url that will be loaded as the content of the modal */
|
|
7
|
-
src?: string;
|
|
8
|
-
/** The content for the title of the modal */
|
|
9
|
-
title?: string;
|
|
10
|
-
/** Controls the size of the modal */
|
|
11
|
-
size?: keyof typeof Size;
|
|
12
|
-
/** Message to display inside modal */
|
|
13
|
-
message?: string;
|
|
14
|
-
/** Primary action */
|
|
15
|
-
primaryAction?: ActionProps;
|
|
16
|
-
/** Collection of secondary actions */
|
|
17
|
-
secondaryActions?: ActionProps[];
|
|
18
|
-
/** Callback when the modal is closed */
|
|
19
|
-
onClose?(): void;
|
|
20
|
-
/** Enable loading behaviour, when `true` bear in mind you will need to use `Modal Content` to dismiss the loading after the iframe page is fully loaded */
|
|
21
|
-
loading?: boolean;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Modal component
|
|
25
|
-
*
|
|
26
|
-
* @remarks
|
|
27
|
-
* React component which wraps the Shopify App Bridge Modal action.
|
|
28
|
-
*
|
|
29
|
-
* @public
|
|
30
|
-
*/
|
|
31
|
-
declare function Modal(props: Props): null;
|
|
32
|
-
export default Modal;
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
var react_1 = require("react");
|
|
26
|
-
var Modal_1 = require("@shopify/app-bridge/actions/Modal");
|
|
27
|
-
var transformers_1 = require("../../utilities/transformers");
|
|
28
|
-
var useAppBridge_1 = require("../../useAppBridge");
|
|
29
|
-
/**
|
|
30
|
-
* Modal component
|
|
31
|
-
*
|
|
32
|
-
* @remarks
|
|
33
|
-
* React component which wraps the Shopify App Bridge Modal action.
|
|
34
|
-
*
|
|
35
|
-
* @public
|
|
36
|
-
*/
|
|
37
|
-
function Modal(props) {
|
|
38
|
-
var app = useAppBridge_1.useAppBridge();
|
|
39
|
-
var focusReturnPoint = react_1.useRef(null);
|
|
40
|
-
// Initialize with open: false so the open action will dispatch on initial load
|
|
41
|
-
var prevProps = react_1.useRef({ open: false });
|
|
42
|
-
var open = props.open;
|
|
43
|
-
var isUnmounted = react_1.useRef(false);
|
|
44
|
-
var modal = react_1.useMemo(function () {
|
|
45
|
-
/**
|
|
46
|
-
* We purposely don't pass buttons here as they will be replaced
|
|
47
|
-
* by the subsequent useEffect to call `set` to update the options.
|
|
48
|
-
* If we pass them in here button subscriptions will be created without
|
|
49
|
-
* being cleaned up.
|
|
50
|
-
*/
|
|
51
|
-
var primaryAction = props.primaryAction, secondaryActions = props.secondaryActions, rest = __rest(props, ["primaryAction", "secondaryActions"]);
|
|
52
|
-
return Modal_1.create(app, transformProps(app, rest));
|
|
53
|
-
}, [app]);
|
|
54
|
-
/**
|
|
55
|
-
* All option updates are handled in this useEffect to avoid race conditions.
|
|
56
|
-
* For example, we need to call `modal.unsubscribe` to clean up button subscriptions
|
|
57
|
-
* but we calling it will also unsubscribe the onClose handler. Therefore we want
|
|
58
|
-
* to ensure all callbacks are handled in a single useEffect with a single clean up
|
|
59
|
-
* call to unsubscribe.
|
|
60
|
-
*/
|
|
61
|
-
react_1.useEffect(function () {
|
|
62
|
-
if (isUnmounted.current) {
|
|
63
|
-
prevProps.current = props;
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
var wasOpen = prevProps.current.open;
|
|
67
|
-
var openUpdated = wasOpen !== open;
|
|
68
|
-
/** We only call `set` to update the options if the modal is open.
|
|
69
|
-
* This is because while the modal is closed updates don't take effect on screen.
|
|
70
|
-
*/
|
|
71
|
-
if (open) {
|
|
72
|
-
var transformedProps = transformProps(app, props, wasOpen);
|
|
73
|
-
/** We skip dispatching the update action if we're about to update the open state.
|
|
74
|
-
* This is because the OPEN action will always sends the updated options
|
|
75
|
-
* so we don't need to send it twice.
|
|
76
|
-
*/
|
|
77
|
-
var shouldSendUpdate = !openUpdated;
|
|
78
|
-
if (isIframeModal(transformedProps)) {
|
|
79
|
-
modal.set(transformedProps, shouldSendUpdate);
|
|
80
|
-
}
|
|
81
|
-
else {
|
|
82
|
-
modal.set(transformedProps, shouldSendUpdate);
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
if (openUpdated) {
|
|
86
|
-
if (open) {
|
|
87
|
-
modal.dispatch(Modal_1.Action.OPEN);
|
|
88
|
-
focusReturnPoint.current = document.activeElement;
|
|
89
|
-
}
|
|
90
|
-
else {
|
|
91
|
-
modal.dispatch(Modal_1.Action.CLOSE);
|
|
92
|
-
if (focusReturnPoint.current != null && document.contains(focusReturnPoint.current)) {
|
|
93
|
-
focusReturnPoint.current.focus();
|
|
94
|
-
focusReturnPoint.current = null;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
if (props.onClose != null) {
|
|
99
|
-
modal.subscribe(Modal_1.Action.CLOSE, props.onClose);
|
|
100
|
-
}
|
|
101
|
-
prevProps.current = props;
|
|
102
|
-
return function () {
|
|
103
|
-
// This is important to clean up previous buttons and onClose subscriptions
|
|
104
|
-
modal.unsubscribe();
|
|
105
|
-
};
|
|
106
|
-
}, [props, open]);
|
|
107
|
-
react_1.useEffect(function () {
|
|
108
|
-
return function () {
|
|
109
|
-
if (prevProps.current.open) {
|
|
110
|
-
modal.dispatch(Modal_1.Action.CLOSE);
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
}, [modal]);
|
|
114
|
-
return null;
|
|
115
|
-
}
|
|
116
|
-
function isIframeModal(options) {
|
|
117
|
-
return (typeof options.url === 'string' ||
|
|
118
|
-
typeof options.path === 'string');
|
|
119
|
-
}
|
|
120
|
-
function transformProps(app, props, wasOpen) {
|
|
121
|
-
var title = props.title, size = props.size, message = props.message, src = props.src, primaryAction = props.primaryAction, secondaryActions = props.secondaryActions, loading = props.loading;
|
|
122
|
-
var safeSize = size == null ? undefined : Modal_1.Size[size];
|
|
123
|
-
var srcPayload = {};
|
|
124
|
-
if (src != null) {
|
|
125
|
-
if (src.match('^https?://')) {
|
|
126
|
-
srcPayload.url = src;
|
|
127
|
-
}
|
|
128
|
-
else {
|
|
129
|
-
srcPayload.path = src;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
return __assign(__assign({ title: title, message: message, size: safeSize }, srcPayload), { footer: {
|
|
133
|
-
buttons: transformers_1.transformActions(app, {
|
|
134
|
-
primaryAction: primaryAction,
|
|
135
|
-
secondaryActions: secondaryActions,
|
|
136
|
-
}),
|
|
137
|
-
}, loading: wasOpen ? undefined : loading });
|
|
138
|
-
}
|
|
139
|
-
exports.default = Modal;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface Props {
|
|
3
|
-
/** Show/Dismiss loading spinner */
|
|
4
|
-
loading: boolean;
|
|
5
|
-
}
|
|
6
|
-
/**
|
|
7
|
-
* Modal Content component
|
|
8
|
-
*
|
|
9
|
-
* @remarks
|
|
10
|
-
* React component which wraps the Shopify App Bridge Modal Content action.
|
|
11
|
-
*
|
|
12
|
-
* @public
|
|
13
|
-
*/
|
|
14
|
-
declare class ModalContent extends React.Component<Props> {
|
|
15
|
-
static contextType: React.Context<import("../../../context").IAppBridgeContext>;
|
|
16
|
-
private modalContent;
|
|
17
|
-
componentDidMount(): void;
|
|
18
|
-
componentDidUpdate(): void;
|
|
19
|
-
syncLoadingStatus(): void;
|
|
20
|
-
render(): null;
|
|
21
|
-
}
|
|
22
|
-
export default ModalContent;
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __extends = (this && this.__extends) || (function () {
|
|
3
|
-
var extendStatics = function (d, b) {
|
|
4
|
-
extendStatics = Object.setPrototypeOf ||
|
|
5
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
-
return extendStatics(d, b);
|
|
8
|
-
};
|
|
9
|
-
return function (d, b) {
|
|
10
|
-
if (typeof b !== "function" && b !== null)
|
|
11
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
-
extendStatics(d, b);
|
|
13
|
-
function __() { this.constructor = d; }
|
|
14
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
-
};
|
|
16
|
-
})();
|
|
17
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
|
-
};
|
|
20
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
-
var react_1 = __importDefault(require("react"));
|
|
22
|
-
var actions_1 = require("@shopify/app-bridge/actions");
|
|
23
|
-
var context_1 = require("../../../context");
|
|
24
|
-
/**
|
|
25
|
-
* Modal Content component
|
|
26
|
-
*
|
|
27
|
-
* @remarks
|
|
28
|
-
* React component which wraps the Shopify App Bridge Modal Content action.
|
|
29
|
-
*
|
|
30
|
-
* @public
|
|
31
|
-
*/
|
|
32
|
-
var ModalContent = /** @class */ (function (_super) {
|
|
33
|
-
__extends(ModalContent, _super);
|
|
34
|
-
function ModalContent() {
|
|
35
|
-
return _super !== null && _super.apply(this, arguments) || this;
|
|
36
|
-
}
|
|
37
|
-
ModalContent.prototype.componentDidMount = function () {
|
|
38
|
-
var app = this.context;
|
|
39
|
-
this.modalContent = actions_1.ModalContent.create(app);
|
|
40
|
-
this.syncLoadingStatus();
|
|
41
|
-
};
|
|
42
|
-
ModalContent.prototype.componentDidUpdate = function () {
|
|
43
|
-
this.syncLoadingStatus();
|
|
44
|
-
};
|
|
45
|
-
ModalContent.prototype.syncLoadingStatus = function () {
|
|
46
|
-
if (!this.modalContent)
|
|
47
|
-
return;
|
|
48
|
-
if (this.props.loading) {
|
|
49
|
-
this.modalContent.loading();
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
this.modalContent.loaded();
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
ModalContent.prototype.render = function () {
|
|
56
|
-
return null;
|
|
57
|
-
};
|
|
58
|
-
ModalContent.contextType = context_1.AppBridgeContext;
|
|
59
|
-
return ModalContent;
|
|
60
|
-
}(react_1.default.Component));
|
|
61
|
-
exports.default = ModalContent;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
var ModalContent_1 = __importDefault(require("./ModalContent"));
|
|
7
|
-
exports.default = ModalContent_1.default;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.ModalContent = void 0;
|
|
7
|
-
var Modal_1 = __importDefault(require("./Modal"));
|
|
8
|
-
var ModalContent_1 = require("./ModalContent");
|
|
9
|
-
Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return __importDefault(ModalContent_1).default; } });
|
|
10
|
-
exports.default = Modal_1.default;
|