@applicaster/zapp-react-native-utils 15.0.0-alpha.2239032089 → 15.0.0-alpha.2882475305
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/analyticsUtils/AnalyticPlayerListener.ts +5 -2
- package/appUtils/RiverFocusManager/{index.ts → index.js} +18 -25
- package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap +1 -3
- package/appUtils/focusManager/index.ios.ts +15 -33
- package/appUtils/focusManagerAux/utils/index.ts +18 -0
- package/appUtils/focusManagerAux/utils/utils.ios.ts +24 -52
- package/appUtils/playerManager/conts.ts +21 -0
- package/navigationUtils/index.ts +19 -16
- package/package.json +2 -2
- package/reactHooks/feed/useBatchLoading.ts +7 -1
- package/reactHooks/feed/useFeedLoader.tsx +0 -9
- package/reactHooks/feed/useInflatedUrl.ts +23 -29
- package/reactHooks/feed/usePipesCacheReset.ts +3 -1
- package/utils/index.ts +2 -0
- package/zappFrameworkUtils/HookCallback/callbackNavigationAction.ts +83 -30
- package/zappFrameworkUtils/HookCallback/hookCallbackManifestExtensions.config.js +25 -9
- package/zappFrameworkUtils/HookCallback/useCallbackActions.ts +6 -9
- package/appUtils/focusManagerAux/utils/index.ios.ts +0 -104
|
@@ -35,8 +35,11 @@ export class AnalyticPlayerListener
|
|
|
35
35
|
this.handleAnalyticEvent(PLAYBACK_EVENT.complete);
|
|
36
36
|
};
|
|
37
37
|
|
|
38
|
-
onError = (err:
|
|
39
|
-
this.handleAnalyticEvent(
|
|
38
|
+
onError = (err: QuickBrickPlayer.PlayerErrorI) => {
|
|
39
|
+
this.handleAnalyticEvent(
|
|
40
|
+
PLAYBACK_EVENT.error,
|
|
41
|
+
err.toObject?.() || { message: err.message }
|
|
42
|
+
);
|
|
40
43
|
};
|
|
41
44
|
|
|
42
45
|
onPlayerPause = (event) => {
|
|
@@ -1,31 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
|
|
1
|
+
import * as R from "ramda";
|
|
2
|
+
|
|
3
|
+
import { focusManager } from "../focusManager";
|
|
5
4
|
|
|
6
5
|
let riverFocusData = {};
|
|
7
6
|
let initialyPresentedScreenFocused = false;
|
|
8
7
|
|
|
9
8
|
export const riverFocusManager = (function () {
|
|
10
|
-
/**
|
|
11
|
-
* Create unique key that will be used for save focused group data inside specific screen
|
|
12
|
-
* @param {{ screenId: string, isInsideContainer: boolean }}
|
|
13
|
-
* screenId Unique Id of the screen from layout.json
|
|
14
|
-
* isInsideContainer If this screen a screen picker child
|
|
15
|
-
*
|
|
16
|
-
*/
|
|
17
|
-
function screenFocusableGroupId({
|
|
18
|
-
screenId,
|
|
19
|
-
isInsideContainer,
|
|
20
|
-
}: {
|
|
21
|
-
screenId: string;
|
|
22
|
-
isInsideContainer: Option<boolean>;
|
|
23
|
-
}) {
|
|
24
|
-
return `${QUICK_BRICK_CONTENT}-${screenId}${
|
|
25
|
-
isNil(isInsideContainer) ? "" : "-isInsideContainer"
|
|
26
|
-
}`;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
9
|
function setScreenFocusableData({
|
|
30
10
|
screenFocusableGroupId,
|
|
31
11
|
groupId,
|
|
@@ -98,8 +78,8 @@ export const riverFocusManager = (function () {
|
|
|
98
78
|
}) {
|
|
99
79
|
// Check if screen should be focused
|
|
100
80
|
const shouldFocus =
|
|
101
|
-
(initialyPresentedScreenFocused === false && isEmpty(riverFocusData)) ||
|
|
102
|
-
|
|
81
|
+
(initialyPresentedScreenFocused === false && R.isEmpty(riverFocusData)) ||
|
|
82
|
+
R.compose(R.not, R.isNil)(riverFocusData[screenFocusableGroupId]) ||
|
|
103
83
|
isDeepLink;
|
|
104
84
|
|
|
105
85
|
// TODO: Uncommit it to start fixing bug where selection wrong item
|
|
@@ -138,6 +118,19 @@ export const riverFocusManager = (function () {
|
|
|
138
118
|
}
|
|
139
119
|
}
|
|
140
120
|
|
|
121
|
+
/**
|
|
122
|
+
* Create unique key that will be used for save focused group data inside specific screen
|
|
123
|
+
* @param {{ screenId: string, isInsideContainer: boolean }}
|
|
124
|
+
* screenId Unique Id of the screen from layout.json
|
|
125
|
+
* isInsideContainer If this screen a screen picker child
|
|
126
|
+
*
|
|
127
|
+
*/
|
|
128
|
+
function screenFocusableGroupId({ screenId, isInsideContainer }) {
|
|
129
|
+
return `RiverFocusableGroup-${screenId}${
|
|
130
|
+
R.isNil(isInsideContainer) ? "" : "-isInsideContainer"
|
|
131
|
+
}`;
|
|
132
|
+
}
|
|
133
|
+
|
|
141
134
|
return {
|
|
142
135
|
setScreenFocusableData,
|
|
143
136
|
clearAllScreensData,
|
|
@@ -69,10 +69,8 @@ exports[`focusManagerIOS should be defined 1`] = `
|
|
|
69
69
|
"getGroupRootById": [Function],
|
|
70
70
|
"getPreferredFocusChild": [Function],
|
|
71
71
|
"invokeHandler": [Function],
|
|
72
|
+
"isChildOf": [Function],
|
|
72
73
|
"isFocusOn": [Function],
|
|
73
|
-
"isFocusOnContent": [Function],
|
|
74
|
-
"isFocusOnMenu": [Function],
|
|
75
|
-
"isFocusOnTabsScreenContent": [Function],
|
|
76
74
|
"isGroupItemFocused": [Function],
|
|
77
75
|
"moveFocus": [Function],
|
|
78
76
|
"on": [Function],
|
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import { NativeModules } from "react-native";
|
|
2
2
|
import * as R from "ramda";
|
|
3
3
|
|
|
4
|
+
import {
|
|
5
|
+
isCurrentFocusOn,
|
|
6
|
+
isChildOf as isChildOfUtils,
|
|
7
|
+
} from "../focusManagerAux/utils";
|
|
4
8
|
import { Tree } from "./treeDataStructure/Tree";
|
|
5
9
|
import { findFocusableNode } from "./treeDataStructure/Utils";
|
|
6
10
|
import { subscriber } from "../../functionUtils";
|
|
7
11
|
import { findChild } from "./utils";
|
|
8
12
|
|
|
9
13
|
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
isPartOfTabsScreenContent,
|
|
14
|
-
} from "../focusManagerAux/utils/index.ios";
|
|
14
|
+
emitRegistered,
|
|
15
|
+
emitUnregistered,
|
|
16
|
+
} from "../focusManagerAux/utils/utils.ios";
|
|
15
17
|
|
|
16
18
|
const { FocusableManagerModule } = NativeModules;
|
|
17
19
|
|
|
@@ -186,10 +188,14 @@ export const focusManager = (function () {
|
|
|
186
188
|
function register({ id, component }) {
|
|
187
189
|
const { isGroup = false } = component;
|
|
188
190
|
|
|
191
|
+
emitRegistered(id);
|
|
192
|
+
|
|
189
193
|
return isGroup ? registerGroup(id, component) : registerItem(id, component);
|
|
190
194
|
}
|
|
191
195
|
|
|
192
196
|
function unregister(id, { group = false } = {}) {
|
|
197
|
+
emitUnregistered(id);
|
|
198
|
+
|
|
193
199
|
group ? unregisterGroup(id) : unregisterItem(id);
|
|
194
200
|
}
|
|
195
201
|
|
|
@@ -267,9 +273,7 @@ export const focusManager = (function () {
|
|
|
267
273
|
function setFocus(
|
|
268
274
|
id: string,
|
|
269
275
|
direction?: FocusManager.IOS.Direction,
|
|
270
|
-
options?: Partial<{
|
|
271
|
-
groupFocusedChanged: boolean;
|
|
272
|
-
}>,
|
|
276
|
+
options?: Partial<{ groupFocusedChanged: boolean }>,
|
|
273
277
|
callback?: any
|
|
274
278
|
) {
|
|
275
279
|
blur(direction);
|
|
@@ -408,28 +412,8 @@ export const focusManager = (function () {
|
|
|
408
412
|
return id && isCurrentFocusOn(id, currentFocusNode);
|
|
409
413
|
}
|
|
410
414
|
|
|
411
|
-
function
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
return isPartOfMenu(focusableTree, currentFocusable?.props?.id);
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
function isFocusOnContent(): boolean {
|
|
418
|
-
const currentFocusable = getCurrentFocus();
|
|
419
|
-
|
|
420
|
-
return isPartOfContent(focusableTree, currentFocusable?.props?.id);
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
function isFocusOnTabsScreenContent(
|
|
424
|
-
screenPickerContentContainerId: string
|
|
425
|
-
): boolean {
|
|
426
|
-
const currentFocusable = getCurrentFocus();
|
|
427
|
-
|
|
428
|
-
return isPartOfTabsScreenContent(
|
|
429
|
-
focusableTree,
|
|
430
|
-
screenPickerContentContainerId,
|
|
431
|
-
currentFocusable?.props?.id
|
|
432
|
-
);
|
|
415
|
+
function isChildOf(childId, parentId): boolean {
|
|
416
|
+
return isChildOfUtils(focusableTree, childId, parentId);
|
|
433
417
|
}
|
|
434
418
|
|
|
435
419
|
return {
|
|
@@ -454,8 +438,6 @@ export const focusManager = (function () {
|
|
|
454
438
|
isGroupItemFocused,
|
|
455
439
|
getPreferredFocusChild,
|
|
456
440
|
isFocusOn,
|
|
457
|
-
|
|
458
|
-
isFocusOnContent,
|
|
459
|
-
isFocusOnTabsScreenContent,
|
|
441
|
+
isChildOf,
|
|
460
442
|
};
|
|
461
443
|
})();
|
|
@@ -190,3 +190,21 @@ export const isCurrentFocusOn = (id, node) => {
|
|
|
190
190
|
|
|
191
191
|
return isCurrentFocusOn(id, node.parent);
|
|
192
192
|
};
|
|
193
|
+
|
|
194
|
+
export const isChildOf = (focusableTree, childId, parentId) => {
|
|
195
|
+
if (isNil(childId) || isNil(parentId)) {
|
|
196
|
+
return false;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
const childNode = focusableTree.findInTree(childId);
|
|
200
|
+
|
|
201
|
+
if (isNil(childNode)) {
|
|
202
|
+
return false;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
if (childNode.parent?.id === parentId) {
|
|
206
|
+
return true;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
return isChildOf(focusableTree, childNode.parent?.id, parentId);
|
|
210
|
+
};
|
|
@@ -1,63 +1,35 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReplaySubject } from "rxjs";
|
|
2
2
|
import { filter } from "rxjs/operators";
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
import { focusManager } from "../../focusManager/index.ios";
|
|
3
|
+
import { BUTTON_PREFIX } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/tv/TvActionButtons/const";
|
|
4
|
+
import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
|
|
7
5
|
|
|
8
6
|
type FocusableID = string;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
export const emitFocused = (id: FocusableID): void => {
|
|
14
|
-
focusedSubject$.next(id);
|
|
7
|
+
type RegistrationEvent = {
|
|
8
|
+
id: FocusableID;
|
|
9
|
+
registered: boolean;
|
|
15
10
|
};
|
|
16
11
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
);
|
|
20
|
-
|
|
21
|
-
export const contentFocused$ = focused$.pipe(
|
|
22
|
-
filter((id) => {
|
|
23
|
-
const isContent = isPartOfContent(focusManager.focusableTree, id);
|
|
24
|
-
|
|
25
|
-
return id && isContent;
|
|
26
|
-
})
|
|
27
|
-
);
|
|
28
|
-
|
|
29
|
-
const registeredHomeTopMenuItemSubject$ = new ReplaySubject<FocusableID>(1);
|
|
30
|
-
|
|
31
|
-
export const registeredHomeTopMenuItem$ =
|
|
32
|
-
registeredHomeTopMenuItemSubject$.asObservable();
|
|
33
|
-
|
|
34
|
-
export const homeTopMenuItemFocused$ = topMenuItemFocused$.pipe(
|
|
35
|
-
withLatestFrom(registeredHomeTopMenuItem$),
|
|
36
|
-
filter(([id, homeId]) => id === homeId)
|
|
37
|
-
);
|
|
38
|
-
|
|
39
|
-
export const emitHomeTopMenuItemRegistered = (id) => {
|
|
40
|
-
// save homeId on registration
|
|
41
|
-
registeredHomeTopMenuItemSubject$.next(id);
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export const emitHomeTopMenuItemUnregistered = () => {
|
|
45
|
-
// reset homeId on unregistration
|
|
46
|
-
registeredHomeTopMenuItemSubject$.next(undefined);
|
|
47
|
-
};
|
|
12
|
+
const isFocusableButton = (id: Option<FocusableID>): boolean =>
|
|
13
|
+
id && id.includes?.(BUTTON_PREFIX);
|
|
48
14
|
|
|
49
|
-
const
|
|
50
|
-
new ReplaySubject<FocusableID>(1);
|
|
15
|
+
const registeredSubject$ = new ReplaySubject<RegistrationEvent>(1);
|
|
51
16
|
|
|
52
|
-
export const
|
|
53
|
-
|
|
17
|
+
export const focusableButtonsRegistration$ = (focusableGroupId: string) =>
|
|
18
|
+
registeredSubject$.pipe(
|
|
19
|
+
filter(
|
|
20
|
+
(value) =>
|
|
21
|
+
value.registered && focusManager.isChildOf(value.id, focusableGroupId)
|
|
22
|
+
)
|
|
23
|
+
);
|
|
54
24
|
|
|
55
|
-
export const
|
|
56
|
-
|
|
57
|
-
|
|
25
|
+
export const emitRegistered = (id: Option<FocusableID>): void => {
|
|
26
|
+
if (isFocusableButton(id)) {
|
|
27
|
+
registeredSubject$.next({ id, registered: true });
|
|
28
|
+
}
|
|
58
29
|
};
|
|
59
30
|
|
|
60
|
-
export const
|
|
61
|
-
|
|
62
|
-
|
|
31
|
+
export const emitUnregistered = (id: Option<FocusableID>): void => {
|
|
32
|
+
if (isFocusableButton(id)) {
|
|
33
|
+
registeredSubject$.next({ id, registered: false });
|
|
34
|
+
}
|
|
63
35
|
};
|
|
@@ -2,6 +2,27 @@ export const userPreferencesNamespace = "user_preferences";
|
|
|
2
2
|
|
|
3
3
|
export const skipActionType = "show_skip";
|
|
4
4
|
|
|
5
|
+
export class PlayerError
|
|
6
|
+
extends Error
|
|
7
|
+
implements QuickBrickPlayer.PlayerErrorI
|
|
8
|
+
{
|
|
9
|
+
description: string;
|
|
10
|
+
|
|
11
|
+
constructor(message: string, description: string) {
|
|
12
|
+
super(message);
|
|
13
|
+
this.description = description;
|
|
14
|
+
|
|
15
|
+
Object.setPrototypeOf(this, PlayerError.prototype);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
toObject() {
|
|
19
|
+
return {
|
|
20
|
+
error: this.message,
|
|
21
|
+
message: this.description,
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
5
26
|
export enum SharedPlayerCallBacksKeys {
|
|
6
27
|
OnPlayerResume = "onPlayerResume",
|
|
7
28
|
OnPlayerPause = "onPlayerPause",
|
package/navigationUtils/index.ts
CHANGED
|
@@ -575,24 +575,27 @@ export function routeIsPlayerScreen(currentRoute) {
|
|
|
575
575
|
return currentRoute?.includes("/playable");
|
|
576
576
|
}
|
|
577
577
|
|
|
578
|
-
export const getNavBarProps =
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
578
|
+
export const getNavBarProps = (
|
|
579
|
+
currentRiver: ZappRiver,
|
|
580
|
+
pathname: string,
|
|
581
|
+
title: string
|
|
582
|
+
) => {
|
|
583
|
+
const props = getNavigationPropsV2({
|
|
584
|
+
currentRiver,
|
|
585
|
+
title,
|
|
586
|
+
category: "nav_bar",
|
|
587
|
+
});
|
|
585
588
|
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
589
|
+
if (props) {
|
|
590
|
+
return {
|
|
591
|
+
...props,
|
|
592
|
+
id: pathname,
|
|
593
|
+
pathname: pathname,
|
|
594
|
+
};
|
|
595
|
+
}
|
|
593
596
|
|
|
594
|
-
|
|
595
|
-
|
|
597
|
+
return null;
|
|
598
|
+
};
|
|
596
599
|
|
|
597
600
|
export const findMenuPlugin = (
|
|
598
601
|
navigations: ZappNavigation[],
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applicaster/zapp-react-native-utils",
|
|
3
|
-
"version": "15.0.0-alpha.
|
|
3
|
+
"version": "15.0.0-alpha.2882475305",
|
|
4
4
|
"description": "Applicaster Zapp React Native utilities package",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"homepage": "https://github.com/applicaster/quickbrick#readme",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@applicaster/applicaster-types": "15.0.0-alpha.
|
|
30
|
+
"@applicaster/applicaster-types": "15.0.0-alpha.2882475305",
|
|
31
31
|
"buffer": "^5.2.1",
|
|
32
32
|
"camelize": "^1.0.0",
|
|
33
33
|
"dayjs": "^1.11.10",
|
|
@@ -151,7 +151,13 @@ export const useBatchLoading = (
|
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
153
|
});
|
|
154
|
-
}, [
|
|
154
|
+
}, [
|
|
155
|
+
batchComponents,
|
|
156
|
+
feeds,
|
|
157
|
+
getUrl,
|
|
158
|
+
loadPipesDataDispatcher,
|
|
159
|
+
options.riverId,
|
|
160
|
+
]);
|
|
155
161
|
|
|
156
162
|
React.useEffect(() => {
|
|
157
163
|
runBatchLoading();
|
|
@@ -37,15 +37,6 @@ export const useFeedLoader = ({
|
|
|
37
37
|
mapping,
|
|
38
38
|
pipesOptions = {},
|
|
39
39
|
}: Props): FeedLoaderResponse => {
|
|
40
|
-
useEffect(() => {
|
|
41
|
-
if (!feedUrl) {
|
|
42
|
-
logger.warning({
|
|
43
|
-
message: "Required parameter feedUrl is missing",
|
|
44
|
-
data: { feedUrl },
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
}, []);
|
|
48
|
-
|
|
49
40
|
const isInitialRender = useIsInitialRender();
|
|
50
41
|
|
|
51
42
|
const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });
|
|
@@ -18,6 +18,7 @@ import {
|
|
|
18
18
|
} from "@applicaster/zapp-pipes-v2-client";
|
|
19
19
|
import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
|
|
20
20
|
import { ENDPOINT_TAGS } from "../../types";
|
|
21
|
+
import { isNilOrEmpty } from "../../reactUtils/helpers";
|
|
21
22
|
|
|
22
23
|
/**
|
|
23
24
|
* will match any occurrence in a string of one or more word characters
|
|
@@ -75,15 +76,19 @@ export const getInflatedDataSourceUrl: GetInflatedDataSourceUrl = ({
|
|
|
75
76
|
* https://foo.com/shows/A1234
|
|
76
77
|
*/
|
|
77
78
|
|
|
78
|
-
if (!
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
79
|
+
if (!isNilOrEmpty(mapping)) {
|
|
80
|
+
if (!source) {
|
|
81
|
+
if (__DEV__) {
|
|
82
|
+
// eslint-disable-next-line no-console
|
|
83
|
+
throw new Error(
|
|
84
|
+
"getInflatedDataSourceUrl: source is empty while mapping is provided"
|
|
85
|
+
);
|
|
86
|
+
}
|
|
85
87
|
|
|
86
|
-
|
|
88
|
+
return null;
|
|
89
|
+
}
|
|
90
|
+
} else {
|
|
91
|
+
return source || null;
|
|
87
92
|
}
|
|
88
93
|
|
|
89
94
|
// Hack because in tv we expect to get key names instead of values from the fake entry
|
|
@@ -193,28 +198,17 @@ export function useInflatedUrl({
|
|
|
193
198
|
|
|
194
199
|
const url = useMemo(
|
|
195
200
|
() =>
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
: feedUrl,
|
|
207
|
-
[feedUrl, mapping]
|
|
201
|
+
getInflatedDataSourceUrl({
|
|
202
|
+
source: feedUrl,
|
|
203
|
+
contexts: {
|
|
204
|
+
entry: entryContext,
|
|
205
|
+
screen: screenContext,
|
|
206
|
+
search: getSearchContext(searchContext, mapping),
|
|
207
|
+
},
|
|
208
|
+
mapping,
|
|
209
|
+
}),
|
|
210
|
+
[entryContext, feedUrl, mapping, screenContext, searchContext]
|
|
208
211
|
);
|
|
209
212
|
|
|
210
|
-
if (!feedUrl) {
|
|
211
|
-
logger.warning({
|
|
212
|
-
message: "Required parameter feedUrl is missing",
|
|
213
|
-
data: { feedUrl },
|
|
214
|
-
});
|
|
215
|
-
|
|
216
|
-
return null;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
213
|
return url;
|
|
220
214
|
}
|
package/utils/index.ts
CHANGED
|
@@ -9,10 +9,23 @@ export enum NavigationCallbackOptions {
|
|
|
9
9
|
GO_TO_SCREEN = "go_to_screen",
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
export
|
|
12
|
+
export enum ResultType {
|
|
13
|
+
login = "login",
|
|
14
|
+
logout = "logout",
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export type CallbackResult = hookCallbackArgs & {
|
|
18
|
+
options?: {
|
|
19
|
+
resultType?: ResultType;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export type ScreenResultCallback = (args: CallbackResult) => void | undefined;
|
|
24
|
+
|
|
25
|
+
export const CALLBACK_NAVIGATION_KEY = "completion_action";
|
|
13
26
|
|
|
14
27
|
export const CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY =
|
|
15
|
-
"
|
|
28
|
+
"completion_action_navigation_go_to_screen";
|
|
16
29
|
|
|
17
30
|
type NavKeys = {
|
|
18
31
|
action: NavigationCallbackOptions;
|
|
@@ -23,7 +36,7 @@ type General = Record<string, unknown>;
|
|
|
23
36
|
|
|
24
37
|
const LogPrefix = "useCallbackNavigationAction:";
|
|
25
38
|
|
|
26
|
-
const { log_info, log_verbose } = createLogger({
|
|
39
|
+
const { log_info, log_verbose, log_debug } = createLogger({
|
|
27
40
|
subsystem: "hook-navigation-callback",
|
|
28
41
|
});
|
|
29
42
|
|
|
@@ -35,50 +48,63 @@ const legacyMappingKeys = {
|
|
|
35
48
|
"quick-brick-user-account-ui-component": {
|
|
36
49
|
actionType: "callbackAction",
|
|
37
50
|
},
|
|
51
|
+
"quick-brick-login-multi-login-providers.login": {
|
|
52
|
+
actionType: "login_completion_action",
|
|
53
|
+
targetScreen: "navigate_to_login_screen",
|
|
54
|
+
},
|
|
55
|
+
"quick-brick-login-multi-login-providers.logout": {
|
|
56
|
+
actionType: "logout_completion_action",
|
|
57
|
+
targetScreen: "navigate_to_logout_screen",
|
|
58
|
+
},
|
|
38
59
|
};
|
|
39
60
|
|
|
40
|
-
const isNonEmptyString = (v: unknown): v is string =>
|
|
41
|
-
typeof v === "string" && v.trim().length > 0;
|
|
42
|
-
|
|
43
61
|
const NAV_ACTIONS = Object.values(NavigationCallbackOptions) as string[];
|
|
44
62
|
|
|
45
63
|
const isNavAction = (v: unknown): v is NavigationCallbackOptions =>
|
|
46
|
-
typeof v === "string" && NAV_ACTIONS.includes(v
|
|
64
|
+
typeof v === "string" && NAV_ACTIONS.includes(v);
|
|
47
65
|
|
|
48
66
|
export const getNavigationKeys = (
|
|
49
|
-
item?: ZappUIComponent | ZappRiver
|
|
67
|
+
item?: ZappUIComponent | ZappRiver,
|
|
68
|
+
resultType: ResultType | null = null
|
|
50
69
|
): NavKeys => {
|
|
51
70
|
const general = (item?.general ?? {}) as General;
|
|
52
|
-
|
|
53
|
-
const
|
|
71
|
+
|
|
72
|
+
const pluginIdentifier = (item as any).identifier ?? item?.type ?? "";
|
|
73
|
+
|
|
74
|
+
const legacy =
|
|
75
|
+
legacyMappingKeys[`${pluginIdentifier}.${resultType}`] ??
|
|
76
|
+
legacyMappingKeys[pluginIdentifier] ??
|
|
77
|
+
{};
|
|
78
|
+
|
|
79
|
+
const actionKey = resultType
|
|
80
|
+
? `${resultType}_${CALLBACK_NAVIGATION_KEY}`
|
|
81
|
+
: CALLBACK_NAVIGATION_KEY;
|
|
54
82
|
|
|
55
83
|
const rawAction =
|
|
56
|
-
(general as General)
|
|
84
|
+
(general as General)[actionKey] ??
|
|
57
85
|
(legacy.actionType ? (general as General)[legacy.actionType] : undefined);
|
|
58
86
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
const trimmed = rawAction.trim();
|
|
63
|
-
action = isNavAction(trimmed) ? trimmed : null;
|
|
64
|
-
}
|
|
87
|
+
const action: NavigationCallbackOptions | null = isNavAction(rawAction)
|
|
88
|
+
? rawAction
|
|
89
|
+
: null;
|
|
65
90
|
|
|
66
91
|
if (!action) return null;
|
|
67
92
|
|
|
68
93
|
let targetScreenId: string | null = null;
|
|
69
94
|
|
|
70
95
|
if (action === NavigationCallbackOptions.GO_TO_SCREEN) {
|
|
96
|
+
const screenKey = resultType
|
|
97
|
+
? `${resultType}_${CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY}`
|
|
98
|
+
: CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY;
|
|
99
|
+
|
|
71
100
|
const screenId: string | null =
|
|
72
|
-
((general as General)[
|
|
101
|
+
((general as General)[screenKey] as string) ??
|
|
73
102
|
(legacy.targetScreen
|
|
74
103
|
? ((general as General)[legacy.targetScreen] as string)
|
|
75
104
|
: undefined);
|
|
76
105
|
|
|
77
106
|
if (screenId) {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
targetScreenId =
|
|
81
|
-
trimmedTargetScreenId.length > 0 ? trimmedTargetScreenId : null;
|
|
107
|
+
targetScreenId = screenId.length > 0 ? screenId : null;
|
|
82
108
|
}
|
|
83
109
|
}
|
|
84
110
|
|
|
@@ -87,10 +113,12 @@ export const getNavigationKeys = (
|
|
|
87
113
|
|
|
88
114
|
export const useCallbackNavigationAction = (
|
|
89
115
|
item?: ZappUIComponent | ZappRiver
|
|
90
|
-
):
|
|
116
|
+
): ((
|
|
117
|
+
args: CallbackResult,
|
|
118
|
+
hookCallback?: hookCallback
|
|
119
|
+
) => void | undefined) => {
|
|
91
120
|
const navigation = useNavigation();
|
|
92
121
|
const rivers = useRivers();
|
|
93
|
-
const enabled = Boolean(item?.general?.[CALLBACK_NAVIGATION_KEY]);
|
|
94
122
|
const screenContext = useScreenContext();
|
|
95
123
|
|
|
96
124
|
const overrideCallbackFromComponent = useMemo(() => {
|
|
@@ -105,11 +133,36 @@ export const useCallbackNavigationAction = (
|
|
|
105
133
|
}
|
|
106
134
|
|
|
107
135
|
const callbackAction = useCallback<hookCallback>(
|
|
108
|
-
(
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
136
|
+
(args: CallbackResult, hookCallback: hookCallback = null) => {
|
|
137
|
+
if (!args.success) {
|
|
138
|
+
log_debug(
|
|
139
|
+
`${LogPrefix} callback called with no success, use original callback`
|
|
140
|
+
);
|
|
141
|
+
|
|
142
|
+
hookCallback?.(args);
|
|
143
|
+
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
if (args.cancelled) {
|
|
148
|
+
log_debug(
|
|
149
|
+
`${LogPrefix} callback called but cancelled, use original callback`
|
|
150
|
+
);
|
|
151
|
+
|
|
152
|
+
hookCallback?.(args);
|
|
153
|
+
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
const data = getNavigationKeys(item, args.options?.resultType ?? null);
|
|
158
|
+
|
|
159
|
+
if (!data) {
|
|
160
|
+
hookCallback?.(args);
|
|
161
|
+
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
hookCallback?.({ ...args, success: false, cancelled: true });
|
|
113
166
|
|
|
114
167
|
switch (data.action) {
|
|
115
168
|
case NavigationCallbackOptions.GO_BACK: {
|
|
@@ -160,5 +213,5 @@ export const useCallbackNavigationAction = (
|
|
|
160
213
|
[item, navigation, rivers]
|
|
161
214
|
);
|
|
162
215
|
|
|
163
|
-
return
|
|
216
|
+
return overrideCallbackFromComponent || callbackAction;
|
|
164
217
|
};
|
|
@@ -5,20 +5,32 @@ const NavigationCallbackOptions = {
|
|
|
5
5
|
GO_TO_SCREEN: "go_to_screen",
|
|
6
6
|
};
|
|
7
7
|
|
|
8
|
-
const
|
|
8
|
+
const ResultType = {
|
|
9
|
+
login: "login",
|
|
10
|
+
logout: "logout",
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const CALLBACK_NAVIGATION_KEY = "completion_action";
|
|
9
14
|
|
|
10
15
|
const CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY =
|
|
11
|
-
"
|
|
16
|
+
"completion_action_navigation_go_to_screen";
|
|
17
|
+
|
|
18
|
+
const callbackKeyPrefix = (key, prefix, keySeparator = "_") =>
|
|
19
|
+
prefix ? `${prefix}${keySeparator}${key}` : key;
|
|
12
20
|
|
|
13
|
-
const extendManifestWithHookCallback = () => ({
|
|
21
|
+
const extendManifestWithHookCallback = (prefix = null) => ({
|
|
14
22
|
group: true,
|
|
15
23
|
label: "CallBack Navigation",
|
|
16
24
|
folded: true,
|
|
17
25
|
fields: [
|
|
18
26
|
{
|
|
19
27
|
type: "select",
|
|
20
|
-
key: CALLBACK_NAVIGATION_KEY,
|
|
21
|
-
label:
|
|
28
|
+
key: callbackKeyPrefix(CALLBACK_NAVIGATION_KEY, prefix),
|
|
29
|
+
label: callbackKeyPrefix(
|
|
30
|
+
"Callback Navigation",
|
|
31
|
+
prefix?.toUpperCase(),
|
|
32
|
+
" "
|
|
33
|
+
),
|
|
22
34
|
label_tooltip:
|
|
23
35
|
"Defines what navigation action should be performed after the callback is called.",
|
|
24
36
|
options: [
|
|
@@ -43,13 +55,17 @@ const extendManifestWithHookCallback = () => ({
|
|
|
43
55
|
},
|
|
44
56
|
{
|
|
45
57
|
type: "screen_selector",
|
|
46
|
-
key: CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY,
|
|
47
|
-
label:
|
|
58
|
+
key: callbackKeyPrefix(CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY, prefix),
|
|
59
|
+
label: callbackKeyPrefix(
|
|
60
|
+
"Navigate to screen",
|
|
61
|
+
prefix?.toUpperCase(),
|
|
62
|
+
" "
|
|
63
|
+
),
|
|
48
64
|
label_tooltip: "Screen you wish to navigate to after success purchase",
|
|
49
65
|
rules: "conditional",
|
|
50
66
|
conditional_fields: [
|
|
51
67
|
{
|
|
52
|
-
key: `general/${CALLBACK_NAVIGATION_KEY}`,
|
|
68
|
+
key: `general/${callbackKeyPrefix(CALLBACK_NAVIGATION_KEY, prefix)}`,
|
|
53
69
|
condition_value: NavigationCallbackOptions.GO_TO_SCREEN,
|
|
54
70
|
},
|
|
55
71
|
],
|
|
@@ -57,4 +73,4 @@ const extendManifestWithHookCallback = () => ({
|
|
|
57
73
|
],
|
|
58
74
|
});
|
|
59
75
|
|
|
60
|
-
module.exports = { extendManifestWithHookCallback };
|
|
76
|
+
module.exports = { extendManifestWithHookCallback, ResultType };
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { useCallback } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
CallbackResult,
|
|
4
|
+
useCallbackNavigationAction,
|
|
5
|
+
} from "./callbackNavigationAction";
|
|
3
6
|
|
|
4
7
|
export const useCallbackActions = (
|
|
5
8
|
item?: ZappUIComponent | ZappRiver,
|
|
@@ -8,14 +11,8 @@ export const useCallbackActions = (
|
|
|
8
11
|
const navigationAction = useCallbackNavigationAction(item);
|
|
9
12
|
|
|
10
13
|
return useCallback(
|
|
11
|
-
async (data:
|
|
12
|
-
|
|
13
|
-
hookCallback?.({ ...data, success: false, cancelled: true });
|
|
14
|
-
|
|
15
|
-
navigationAction(data);
|
|
16
|
-
} else {
|
|
17
|
-
hookCallback?.(data);
|
|
18
|
-
}
|
|
14
|
+
async (data: CallbackResult) => {
|
|
15
|
+
navigationAction(data, hookCallback);
|
|
19
16
|
},
|
|
20
17
|
[navigationAction, hookCallback]
|
|
21
18
|
);
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
import { isNil, startsWith } from "@applicaster/zapp-react-native-utils/utils";
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
QUICK_BRICK_CONTENT,
|
|
5
|
-
QUICK_BRICK_NAVBAR,
|
|
6
|
-
} from "@applicaster/quick-brick-core/const";
|
|
7
|
-
|
|
8
|
-
const isNavBar = (node) => startsWith(QUICK_BRICK_NAVBAR, node?.id);
|
|
9
|
-
const isContent = (node) => startsWith(QUICK_BRICK_CONTENT, node?.id);
|
|
10
|
-
const isRoot = (node) => node?.id === "root";
|
|
11
|
-
|
|
12
|
-
export const isPartOfTabsScreenContent = (
|
|
13
|
-
focusableTree,
|
|
14
|
-
screenPickerContentContainerId,
|
|
15
|
-
id
|
|
16
|
-
) => {
|
|
17
|
-
const node = focusableTree.findInTree(id);
|
|
18
|
-
|
|
19
|
-
if (isNil(node)) {
|
|
20
|
-
return false;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
if (isRoot(node)) {
|
|
24
|
-
return false;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
if (isNavBar(node)) {
|
|
28
|
-
return false;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
if (isContent(node)) {
|
|
32
|
-
return false;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
if (node?.id === screenPickerContentContainerId) {
|
|
36
|
-
return true;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
return isPartOfTabsScreenContent(
|
|
40
|
-
focusableTree,
|
|
41
|
-
screenPickerContentContainerId,
|
|
42
|
-
node.parent?.id
|
|
43
|
-
);
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
export const isPartOfMenu = (focusableTree, id): boolean => {
|
|
47
|
-
const node = focusableTree.findInTree(id);
|
|
48
|
-
|
|
49
|
-
if (isNil(node)) {
|
|
50
|
-
return false;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
if (isRoot(node)) {
|
|
54
|
-
return false;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
if (isNavBar(node)) {
|
|
58
|
-
return true;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
if (isContent(node)) {
|
|
62
|
-
return false;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
return isPartOfMenu(focusableTree, node.parent.id);
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
export const isPartOfContent = (focusableTree, id) => {
|
|
69
|
-
const node = focusableTree.findInTree(id);
|
|
70
|
-
|
|
71
|
-
if (isNil(node)) {
|
|
72
|
-
return false;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
if (isRoot(node)) {
|
|
76
|
-
return false;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
if (isNavBar(node)) {
|
|
80
|
-
return false;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
if (isContent(node)) {
|
|
84
|
-
return true;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
return isPartOfContent(focusableTree, node.parent?.id);
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
export const isCurrentFocusOn = (id, node) => {
|
|
91
|
-
if (!node) {
|
|
92
|
-
return false;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
if (isRoot(node)) {
|
|
96
|
-
return false;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
if (node?.id === id) {
|
|
100
|
-
return true;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
return isCurrentFocusOn(id, node.parent);
|
|
104
|
-
};
|