@applicaster/zapp-react-native-utils 13.0.0-alpha.2463108475 → 13.0.0-alpha.2545325570
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/README.md +0 -10
- package/analyticsUtils/currentScreenProperities.ts +6 -4
- package/appUtils/HooksManager/index.ts +1 -1
- package/appUtils/contextKeysManager/index.ts +2 -2
- package/appUtils/contextKeysManager/utils/index.ts +2 -1
- package/appUtils/focusManager/index.ts +1 -10
- package/appUtils/keyCodes/index.ts +11 -7
- package/appUtils/orientationHelper.ts +11 -13
- package/appUtils/playerManager/index.ts +1 -1
- package/appUtils/playerManager/player.ts +24 -12
- package/appUtils/playerManager/playerNative.ts +18 -3
- package/equalUtils/__tests__/isEqual/combination.test.ts +263 -0
- package/equalUtils/index.ts +41 -29
- package/focusManager/FocusManager.ts +11 -1
- package/focusManager/index.ts +49 -4
- package/functionUtils/index.ts +21 -8
- package/manifestUtils/defaultManifestConfigurations/player.js +8 -0
- package/manifestUtils/fonts/index.js +5 -6
- package/manifestUtils/sharedConfiguration/screenPicker/__tests__/utils.test.js +304 -0
- package/manifestUtils/sharedConfiguration/screenPicker/stylesFields.js +875 -0
- package/manifestUtils/sharedConfiguration/screenPicker/utils.js +130 -0
- package/numberUtils/index.ts +7 -5
- package/package.json +4 -10
- package/playerUtils/configurationGenerator.ts +8 -0
- package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx +5 -7
- package/reactHooks/autoscrolling/useTrackedView.ts +12 -1
- package/reactHooks/navigation/__mocks__/useNavigation.ts +3 -0
- package/reactHooks/navigation/__tests__/index.test.tsx +6 -17
- package/reactHooks/navigation/index.ts +13 -23
- package/reactHooks/navigation/useProfilerLogging.ts +15 -0
- package/reactUtils/__tests__/__snapshots__/reactUtilsHelpers.test.js.snap +16 -4
- package/reactUtils/__tests__/reactUtils.test.js +1 -19
- package/reactUtils/__tests__/reactUtilsHelpers.test.js +72 -71
- package/reactUtils/createContext/__tests__/__snapshots__/helpers.test.js.snap +6 -72
- package/reactUtils/createContext/__tests__/__snapshots__/provider.test.js.snap +3 -28
- package/reactUtils/createContext/__tests__/__snapshots__/withConsumer.test.js.snap +3 -4
- package/reactUtils/createContext/__tests__/__snapshots__/withProvider.test.js.snap +7 -3
- package/reactUtils/createContext/__tests__/helpers.test.js +107 -121
- package/reactUtils/createContext/__tests__/{index.test.js → index.test.ts} +2 -2
- package/reactUtils/createContext/__tests__/provider.test.js +4 -6
- package/reactUtils/createContext/__tests__/withConsumer.test.js +12 -12
- package/reactUtils/createContext/__tests__/withProvider.test.js +4 -4
- package/reactUtils/createContext/helpers.ts +6 -1
- package/reactUtils/createContext/index.ts +11 -25
- package/reactUtils/index.ts +0 -11
- package/services/js2native.ts +673 -0
- package/testUtils/index.tsx +0 -10
- package/time/BackgroundTimer.ts +55 -0
- package/time/Timer.ts +6 -6
- package/reactUtils/createContext/__tests__/index-no-react.test.js +0 -27
- /package/reactUtils/createContext/__tests__/__snapshots__/{index.test.js.snap → index.test.ts.snap} +0 -0
package/README.md
CHANGED
|
@@ -376,16 +376,6 @@ useEffect(() => {
|
|
|
376
376
|
}, []);
|
|
377
377
|
```
|
|
378
378
|
|
|
379
|
-
### testUtils
|
|
380
|
-
|
|
381
|
-
`@applicaster/zapp-react-native-utils/testUtils`
|
|
382
|
-
|
|
383
|
-
- `testIDEquals: (testId: any) => boolean | { width: number, height: number }` - Function to be used in tandem with enzyme findWhere
|
|
384
|
-
|
|
385
|
-
```javascript
|
|
386
|
-
wrapper.findWhere(testIDEquals("text"));
|
|
387
|
-
```
|
|
388
|
-
|
|
389
379
|
### appUtils - contextKeysManager
|
|
390
380
|
|
|
391
381
|
`@applicaster/zapp-react-native-utils/appUtils/contextKeyManager`
|
|
@@ -72,12 +72,14 @@ const mappedScreenPropertiesScreen = (
|
|
|
72
72
|
screenData
|
|
73
73
|
): AnalyticsScreenProperties => {
|
|
74
74
|
return {
|
|
75
|
-
screen_name: screenData?.targetScreen?.name,
|
|
75
|
+
screen_name: screenData?.targetScreen?.name || screenData?.name,
|
|
76
76
|
screen_entry_title: screenData?.title,
|
|
77
77
|
screen_entry_id: R.isNil(screenData?.type) ? null : screenData?.id,
|
|
78
|
-
screen_layout_id: screenData?.targetScreen?.id,
|
|
79
|
-
screen_type: screenData?.targetScreen?.type,
|
|
80
|
-
home_screen: screenData?.targetScreen?.home
|
|
78
|
+
screen_layout_id: screenData?.targetScreen?.id || screenData?.id,
|
|
79
|
+
screen_type: screenData?.targetScreen?.type || screenData?.type,
|
|
80
|
+
home_screen: !R.isNil(screenData?.targetScreen?.home)
|
|
81
|
+
? screenData?.targetScreen?.home
|
|
82
|
+
: screenData?.home,
|
|
81
83
|
};
|
|
82
84
|
};
|
|
83
85
|
|
|
@@ -84,7 +84,7 @@ export function HooksManager({
|
|
|
84
84
|
plugins,
|
|
85
85
|
startUpHooksData = {},
|
|
86
86
|
}: HookManagerArgs): HookManager {
|
|
87
|
-
hooksManagerLogger.addContext({ targetScreen });
|
|
87
|
+
hooksManagerLogger.addContext({ targetScreenId: targetScreen.id });
|
|
88
88
|
|
|
89
89
|
function logHookEvent(func, message, data) {
|
|
90
90
|
func({
|
|
@@ -16,12 +16,12 @@ import {
|
|
|
16
16
|
|
|
17
17
|
export { StorageLevel };
|
|
18
18
|
|
|
19
|
-
type KeyNameObj = {
|
|
19
|
+
export type KeyNameObj = {
|
|
20
20
|
namespace: string;
|
|
21
21
|
key: string;
|
|
22
22
|
};
|
|
23
23
|
|
|
24
|
-
type KeyName = string | KeyNameObj;
|
|
24
|
+
export type KeyName = string | KeyNameObj;
|
|
25
25
|
|
|
26
26
|
type ParsedKeyAndNamespace = {
|
|
27
27
|
namespace?: string;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import * as R from "ramda";
|
|
2
2
|
import { DEFAULT_NAMESPACE } from "../consts";
|
|
3
|
+
import { KeyName, KeyNameObj } from "../index";
|
|
3
4
|
|
|
4
5
|
const lastDotRegex = /\.([^.]+)$/;
|
|
5
6
|
const splitByLastDot = R.compose(R.init, R.split(lastDotRegex));
|
|
6
7
|
|
|
7
|
-
export function getNamespaceAndKey(namespacedKey) {
|
|
8
|
+
export function getNamespaceAndKey(namespacedKey: KeyName): KeyNameObj {
|
|
8
9
|
if (typeof namespacedKey !== "string") return namespacedKey;
|
|
9
10
|
|
|
10
11
|
const namespacedKeyProps = namespacedKey.includes(".")
|
|
@@ -334,16 +334,7 @@ export const focusManager = (function () {
|
|
|
334
334
|
return { success: false };
|
|
335
335
|
}
|
|
336
336
|
|
|
337
|
-
function treeLoaded(
|
|
338
|
-
logger.log({
|
|
339
|
-
message: "treeLoaded",
|
|
340
|
-
data: {
|
|
341
|
-
val,
|
|
342
|
-
node,
|
|
343
|
-
currentFocusNode,
|
|
344
|
-
},
|
|
345
|
-
});
|
|
346
|
-
}
|
|
337
|
+
function treeLoaded(_val, _node) {}
|
|
347
338
|
|
|
348
339
|
function pressIn() {
|
|
349
340
|
const currentFocusable = getCurrentFocus();
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import * as R from "ramda";
|
|
2
|
-
|
|
3
1
|
// more keys can be added here. Simply make sure
|
|
4
2
|
// the key matches the code value
|
|
5
3
|
|
|
@@ -34,12 +32,18 @@ export function keyCode(key) {
|
|
|
34
32
|
keyCode(keyEvent).matchesAny("Enter", "Backspace", KEYS.ArrowLeft, ...)
|
|
35
33
|
*/
|
|
36
34
|
|
|
37
|
-
const matches =
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
35
|
+
const matches = (compareKey) => {
|
|
36
|
+
// If compareKey is a string, look it up in KEYS object
|
|
37
|
+
const keyToCompare =
|
|
38
|
+
typeof compareKey === "string" ? KEYS[compareKey] : compareKey;
|
|
39
|
+
|
|
40
|
+
// Compare either code or keyCode properties
|
|
41
|
+
return (
|
|
42
|
+
keyToCompare?.code === key.code || keyToCompare?.keyCode === key.keyCode
|
|
43
|
+
);
|
|
44
|
+
};
|
|
41
45
|
|
|
42
|
-
const matchesAny = (...args) =>
|
|
46
|
+
const matchesAny = (...args) => args.some(matches);
|
|
43
47
|
|
|
44
48
|
const direction = () =>
|
|
45
49
|
matchesAny(...ARROW_KEYS) ? directionHelper(key) : null;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/// <reference types="@types/react-native" />
|
|
2
1
|
import * as ReactNative from "react-native";
|
|
3
|
-
import { isTV, platformSelect } from "../reactUtils";
|
|
4
2
|
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
|
|
5
|
-
|
|
3
|
+
|
|
4
|
+
import { isTV, platformSelect } from "../reactUtils";
|
|
5
|
+
import { useIsTablet } from "../reactHooks";
|
|
6
6
|
|
|
7
7
|
import {
|
|
8
8
|
QUICK_BRICK_EVENTS,
|
|
@@ -121,8 +121,15 @@ export const removeOrientationChangeListener = (listener: any): void => {
|
|
|
121
121
|
*/
|
|
122
122
|
export const isOrientationCompatible = ({
|
|
123
123
|
orientation,
|
|
124
|
-
layoutData: { width, height },
|
|
124
|
+
layoutData: { width, height, isTablet, isTabletPortrait },
|
|
125
125
|
}) => {
|
|
126
|
+
// We count portrait as compatible, because if default in zapp for mobile layout
|
|
127
|
+
// We count landscape as compatible, because if isTabletPortrait is false,
|
|
128
|
+
// it defaults for device
|
|
129
|
+
if (isTablet && !isTabletPortrait) {
|
|
130
|
+
return true;
|
|
131
|
+
}
|
|
132
|
+
|
|
126
133
|
const isLandscape = width > height;
|
|
127
134
|
|
|
128
135
|
if (
|
|
@@ -146,15 +153,6 @@ export const isOrientationCompatible = ({
|
|
|
146
153
|
return true;
|
|
147
154
|
};
|
|
148
155
|
|
|
149
|
-
export const useIsOrientationCompatible = (orientation) => {
|
|
150
|
-
const { height, width } = ReactNative.useWindowDimensions();
|
|
151
|
-
|
|
152
|
-
return isOrientationCompatible({
|
|
153
|
-
orientation,
|
|
154
|
-
layoutData: { width, height },
|
|
155
|
-
});
|
|
156
|
-
};
|
|
157
|
-
|
|
158
156
|
/**
|
|
159
157
|
* Determine final screen orientation based on device type,
|
|
160
158
|
* settings and orientation value provided by screen data settings
|
|
@@ -452,7 +452,7 @@ export class PlayerManager {
|
|
|
452
452
|
if (this.castingReceiver) {
|
|
453
453
|
this.castingReceiver.closeNativePlayer();
|
|
454
454
|
} else {
|
|
455
|
-
this.getActivePlayer()
|
|
455
|
+
this.getActivePlayer()?.closeNativePlayer();
|
|
456
456
|
this.invokeHandler("close");
|
|
457
457
|
}
|
|
458
458
|
}
|
|
@@ -97,7 +97,7 @@ export class Player {
|
|
|
97
97
|
this.onVideoLoad = this.onVideoLoad.bind(this);
|
|
98
98
|
this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
|
|
99
99
|
this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
|
|
100
|
-
|
|
100
|
+
this.onAdBreakEnd = this.onAdBreakEnd.bind(this);
|
|
101
101
|
this.entryObservable = null;
|
|
102
102
|
}
|
|
103
103
|
|
|
@@ -201,17 +201,25 @@ export class Player {
|
|
|
201
201
|
adPosition: currentTime,
|
|
202
202
|
};
|
|
203
203
|
} else {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
204
|
+
this.updateContentDuration({ seekableDuration, duration, currentTime });
|
|
205
|
+
}
|
|
206
|
+
};
|
|
207
207
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
208
|
+
protected updateContentDuration = ({
|
|
209
|
+
seekableDuration = null,
|
|
210
|
+
duration = null,
|
|
211
|
+
currentTime = null,
|
|
212
|
+
}) => {
|
|
213
|
+
if (!isEmptyOrNil(seekableDuration) && seekableDuration >= 0) {
|
|
214
|
+
this.playerState.seekableDuration = seekableDuration;
|
|
215
|
+
}
|
|
211
216
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
217
|
+
if (!isEmptyOrNil(duration) && duration >= 0) {
|
|
218
|
+
this.playerState.contentDuration = duration;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
if (!isEmptyOrNil(currentTime) && currentTime >= 0) {
|
|
222
|
+
this.playerState.contentPosition = currentTime;
|
|
215
223
|
}
|
|
216
224
|
};
|
|
217
225
|
|
|
@@ -559,7 +567,7 @@ export class Player {
|
|
|
559
567
|
});
|
|
560
568
|
};
|
|
561
569
|
|
|
562
|
-
onAdBreakEnd
|
|
570
|
+
onAdBreakEnd(event) {
|
|
563
571
|
this.playerState.adState = null;
|
|
564
572
|
this.playerState.isInAdBreak = false;
|
|
565
573
|
|
|
@@ -567,7 +575,7 @@ export class Player {
|
|
|
567
575
|
callbackName: SharedPlayerCallBacksKeys.OnAdBreakEnd,
|
|
568
576
|
event,
|
|
569
577
|
});
|
|
570
|
-
}
|
|
578
|
+
}
|
|
571
579
|
|
|
572
580
|
onAdEnd = (event) => {
|
|
573
581
|
this.playerState.adState = null;
|
|
@@ -736,6 +744,10 @@ export class Player {
|
|
|
736
744
|
return null;
|
|
737
745
|
};
|
|
738
746
|
|
|
747
|
+
public hasResumePosition() {
|
|
748
|
+
return false;
|
|
749
|
+
}
|
|
750
|
+
|
|
739
751
|
public getConfig = () => this.config;
|
|
740
752
|
|
|
741
753
|
// TODO: replace with enum of supported orientations
|
|
@@ -54,6 +54,10 @@ export class PlayerNative extends Player {
|
|
|
54
54
|
});
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
+
public hasResumePosition() {
|
|
58
|
+
return true;
|
|
59
|
+
}
|
|
60
|
+
|
|
57
61
|
getContentPosition = () => {
|
|
58
62
|
return this.playerState.contentPosition;
|
|
59
63
|
};
|
|
@@ -221,11 +225,13 @@ export class PlayerNative extends Player {
|
|
|
221
225
|
};
|
|
222
226
|
|
|
223
227
|
onVideoLoad = (event) => {
|
|
224
|
-
|
|
225
|
-
this.seekTo(this.startPosition);
|
|
226
|
-
this.startPosition = null;
|
|
228
|
+
this.updateContentDuration(event);
|
|
227
229
|
|
|
230
|
+
if (this.startPosition && !this.playerState.isInAdBreak) {
|
|
228
231
|
super.onVideoLoad({ ...event, ignoreContinueWatching: true });
|
|
232
|
+
|
|
233
|
+
this.seekTo(this.startPosition);
|
|
234
|
+
this.startPosition = null;
|
|
229
235
|
} else {
|
|
230
236
|
super.onVideoLoad(event);
|
|
231
237
|
}
|
|
@@ -249,6 +255,15 @@ export class PlayerNative extends Player {
|
|
|
249
255
|
}
|
|
250
256
|
};
|
|
251
257
|
|
|
258
|
+
onAdBreakEnd = (event) => {
|
|
259
|
+
super.onAdBreakEnd(event);
|
|
260
|
+
|
|
261
|
+
if (this.startPosition) {
|
|
262
|
+
this.seekTo(this.startPosition);
|
|
263
|
+
this.startPosition = null;
|
|
264
|
+
}
|
|
265
|
+
};
|
|
266
|
+
|
|
252
267
|
// This function is called when native player used directly without wrapped component,
|
|
253
268
|
// Since event from native comes with wrapped in NativeEvent property
|
|
254
269
|
getNativeViewListener = (): QuickBrickPlayer.SharedPlayerCallBacks => {
|
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
import { isEqual } from "../..";
|
|
2
|
+
|
|
3
|
+
const array = [1, 2, 3];
|
|
4
|
+
const sameProp = "sameProp";
|
|
5
|
+
|
|
6
|
+
describe("isEqual - comprehensive tests", () => {
|
|
7
|
+
describe("all conditions together", () => {
|
|
8
|
+
it("all conditions checked and not equal", () => {
|
|
9
|
+
const prev = {
|
|
10
|
+
byValueProp: { a: 1, b: 2 },
|
|
11
|
+
byRefProp: array,
|
|
12
|
+
byComparatorProp: "test",
|
|
13
|
+
extraProp1: 123,
|
|
14
|
+
extraProp2: sameProp,
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
const next = {
|
|
18
|
+
byValueProp: { a: 1, b: 2 },
|
|
19
|
+
byRefProp: array,
|
|
20
|
+
byComparatorProp: "different",
|
|
21
|
+
extraProp1: 456,
|
|
22
|
+
extraProp2: sameProp,
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const customComparator = jest.fn().mockReturnValue(true);
|
|
26
|
+
|
|
27
|
+
const result = isEqual({
|
|
28
|
+
byValue: ["byValueProp"],
|
|
29
|
+
byReference: ["byRefProp"],
|
|
30
|
+
byComparator: {
|
|
31
|
+
comparator: customComparator,
|
|
32
|
+
keys: ["byComparatorProp"],
|
|
33
|
+
},
|
|
34
|
+
compareRemainingKeysBySameValue: true,
|
|
35
|
+
})(prev, next);
|
|
36
|
+
|
|
37
|
+
expect(result).toBe(false);
|
|
38
|
+
|
|
39
|
+
expect(customComparator).toHaveBeenCalledWith(
|
|
40
|
+
prev.byComparatorProp,
|
|
41
|
+
next.byComparatorProp
|
|
42
|
+
);
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
it("all conditions pass with exact remaining keys check", () => {
|
|
46
|
+
const prev = {
|
|
47
|
+
byValueProp: { a: 1, b: 2 },
|
|
48
|
+
byRefProp: array,
|
|
49
|
+
byComparatorProp: "test",
|
|
50
|
+
extraProp: sameProp,
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
const next = {
|
|
54
|
+
byValueProp: { a: 1, b: 2 },
|
|
55
|
+
byRefProp: array,
|
|
56
|
+
byComparatorProp: "test",
|
|
57
|
+
extraProp: sameProp,
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const customComparator = jest.fn().mockReturnValue(true);
|
|
61
|
+
|
|
62
|
+
const result = isEqual({
|
|
63
|
+
byValue: ["byValueProp"],
|
|
64
|
+
byReference: ["byRefProp"],
|
|
65
|
+
byComparator: {
|
|
66
|
+
comparator: customComparator,
|
|
67
|
+
keys: ["byComparatorProp"],
|
|
68
|
+
},
|
|
69
|
+
compareRemainingKeysBySameValue: true,
|
|
70
|
+
})(prev, next);
|
|
71
|
+
|
|
72
|
+
expect(result).toBe(true);
|
|
73
|
+
|
|
74
|
+
expect(customComparator).toHaveBeenCalledWith(
|
|
75
|
+
prev.byComparatorProp,
|
|
76
|
+
next.byComparatorProp
|
|
77
|
+
);
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
it("byReference check fails first (early return)", () => {
|
|
81
|
+
const prev = {
|
|
82
|
+
byValueProp: { a: 1, b: 2 },
|
|
83
|
+
byRefProp: array,
|
|
84
|
+
byComparatorProp: sameProp,
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
const next = {
|
|
88
|
+
byValueProp: { a: 1, b: 2 },
|
|
89
|
+
byRefProp: [1, 2, 3],
|
|
90
|
+
byComparatorProp: sameProp,
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
const customComparator = jest.fn().mockReturnValue(true);
|
|
94
|
+
|
|
95
|
+
const result = isEqual({
|
|
96
|
+
byValue: ["byValueProp"],
|
|
97
|
+
byReference: ["byRefProp"],
|
|
98
|
+
byComparator: {
|
|
99
|
+
comparator: customComparator,
|
|
100
|
+
keys: ["byComparatorProp"],
|
|
101
|
+
},
|
|
102
|
+
})(prev, next);
|
|
103
|
+
|
|
104
|
+
expect(result).toBe(false);
|
|
105
|
+
expect(customComparator).not.toHaveBeenCalled();
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
it("byValue check fails after byReference passes", () => {
|
|
109
|
+
const prev = {
|
|
110
|
+
byValueProp: { a: 1, b: 2 },
|
|
111
|
+
byRefProp: array,
|
|
112
|
+
byComparatorProp: sameProp,
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
const next = {
|
|
116
|
+
byValueProp: { a: 1, b: 3 },
|
|
117
|
+
byRefProp: array,
|
|
118
|
+
byComparatorProp: sameProp,
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
const customComparator = jest.fn().mockReturnValue(true);
|
|
122
|
+
|
|
123
|
+
const result = isEqual({
|
|
124
|
+
byValue: ["byValueProp"],
|
|
125
|
+
byReference: ["byRefProp"],
|
|
126
|
+
byComparator: {
|
|
127
|
+
comparator: customComparator,
|
|
128
|
+
keys: ["byComparatorProp"],
|
|
129
|
+
},
|
|
130
|
+
})(prev, next);
|
|
131
|
+
|
|
132
|
+
expect(result).toBe(false);
|
|
133
|
+
expect(customComparator).not.toHaveBeenCalled();
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
it("byComparator check fails after other checks pass", () => {
|
|
137
|
+
const prev = {
|
|
138
|
+
byValueProp: { a: 1, b: 2 },
|
|
139
|
+
byRefProp: array,
|
|
140
|
+
byComparatorProp: "test",
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
const next = {
|
|
144
|
+
byValueProp: { a: 1, b: 2 },
|
|
145
|
+
byRefProp: array,
|
|
146
|
+
byComparatorProp: "different",
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
const customComparator = jest.fn().mockReturnValue(false);
|
|
150
|
+
|
|
151
|
+
const result = isEqual({
|
|
152
|
+
byValue: ["byValueProp"],
|
|
153
|
+
byReference: ["byRefProp"],
|
|
154
|
+
byComparator: {
|
|
155
|
+
comparator: customComparator,
|
|
156
|
+
keys: ["byComparatorProp"],
|
|
157
|
+
},
|
|
158
|
+
})(prev, next);
|
|
159
|
+
|
|
160
|
+
expect(result).toBe(false);
|
|
161
|
+
|
|
162
|
+
expect(customComparator).toHaveBeenCalledWith(
|
|
163
|
+
prev.byComparatorProp,
|
|
164
|
+
next.byComparatorProp
|
|
165
|
+
);
|
|
166
|
+
});
|
|
167
|
+
|
|
168
|
+
it("remaining keys comparison fails", () => {
|
|
169
|
+
const sharedArray = [1, 2, 3];
|
|
170
|
+
|
|
171
|
+
const prev = {
|
|
172
|
+
byValueProp: { a: 1, b: 2 },
|
|
173
|
+
byRefProp: sharedArray,
|
|
174
|
+
byComparatorProp: "test",
|
|
175
|
+
extraProp: "original",
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
const next = {
|
|
179
|
+
byValueProp: { a: 1, b: 2 },
|
|
180
|
+
byRefProp: sharedArray,
|
|
181
|
+
byComparatorProp: "different",
|
|
182
|
+
extraProp: "changed",
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
const customComparator = jest.fn().mockReturnValue(true);
|
|
186
|
+
|
|
187
|
+
const result = isEqual({
|
|
188
|
+
byValue: ["byValueProp"],
|
|
189
|
+
byReference: ["byRefProp"],
|
|
190
|
+
byComparator: {
|
|
191
|
+
comparator: customComparator,
|
|
192
|
+
keys: ["byComparatorProp"],
|
|
193
|
+
},
|
|
194
|
+
compareRemainingKeysBySameValue: true,
|
|
195
|
+
})(prev, next);
|
|
196
|
+
|
|
197
|
+
expect(result).toBe(false);
|
|
198
|
+
expect(customComparator).toHaveBeenCalled();
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
it("with debug flag", () => {
|
|
202
|
+
const consoleSpy = jest.spyOn(console, "log").mockImplementation();
|
|
203
|
+
|
|
204
|
+
const prev = {
|
|
205
|
+
byValueProp: { a: 1, b: 2 },
|
|
206
|
+
byRefProp: array,
|
|
207
|
+
byComparatorProp: "test",
|
|
208
|
+
extraProp: sameProp,
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
const next = {
|
|
212
|
+
byValueProp: { a: 1, b: 2 },
|
|
213
|
+
byRefProp: array,
|
|
214
|
+
byComparatorProp: "different",
|
|
215
|
+
extraProp: sameProp,
|
|
216
|
+
};
|
|
217
|
+
|
|
218
|
+
const customComparator = jest.fn().mockReturnValue(true);
|
|
219
|
+
|
|
220
|
+
const result = isEqual({
|
|
221
|
+
byValue: ["byValueProp"],
|
|
222
|
+
byReference: ["byRefProp"],
|
|
223
|
+
byComparator: {
|
|
224
|
+
comparator: customComparator,
|
|
225
|
+
keys: ["byComparatorProp"],
|
|
226
|
+
},
|
|
227
|
+
compareRemainingKeysBySameValue: true,
|
|
228
|
+
debug: true,
|
|
229
|
+
})(prev, next);
|
|
230
|
+
|
|
231
|
+
expect(result).toBe(true);
|
|
232
|
+
expect(consoleSpy).toHaveBeenCalled();
|
|
233
|
+
|
|
234
|
+
consoleSpy.mockRestore();
|
|
235
|
+
});
|
|
236
|
+
|
|
237
|
+
it("handles missing properties", () => {
|
|
238
|
+
const prev = {
|
|
239
|
+
byValueProp: { a: 1, b: 2 },
|
|
240
|
+
byRefProp: [1, 2, 3],
|
|
241
|
+
};
|
|
242
|
+
|
|
243
|
+
const next = {
|
|
244
|
+
byValueProp: { a: 1, b: 2 },
|
|
245
|
+
byComparatorProp: "test",
|
|
246
|
+
};
|
|
247
|
+
|
|
248
|
+
const customComparator = jest.fn().mockReturnValue(true);
|
|
249
|
+
|
|
250
|
+
const result = isEqual({
|
|
251
|
+
byValue: ["byValueProp"],
|
|
252
|
+
byReference: ["byRefProp"],
|
|
253
|
+
byComparator: {
|
|
254
|
+
comparator: customComparator,
|
|
255
|
+
keys: ["byComparatorProp"],
|
|
256
|
+
},
|
|
257
|
+
})(prev, next);
|
|
258
|
+
|
|
259
|
+
expect(result).toBe(false);
|
|
260
|
+
expect(customComparator).not.toHaveBeenCalled();
|
|
261
|
+
});
|
|
262
|
+
});
|
|
263
|
+
});
|
package/equalUtils/index.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/* eslint no-console: off */
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import { equals } from "ramda";
|
|
4
|
+
|
|
5
|
+
const alwaysTrue = () => true;
|
|
4
6
|
|
|
5
7
|
export const isParentFocusEqual = (
|
|
6
8
|
prevParentFocus: ParentFocus,
|
|
@@ -18,7 +20,7 @@ export const isEqual =
|
|
|
18
20
|
({
|
|
19
21
|
byValue = [],
|
|
20
22
|
byReference = [],
|
|
21
|
-
byComparator = { comparator:
|
|
23
|
+
byComparator = { comparator: alwaysTrue, keys: [] },
|
|
22
24
|
debug = false,
|
|
23
25
|
compareRemainingKeysBySameValue = false,
|
|
24
26
|
}: {
|
|
@@ -29,23 +31,28 @@ export const isEqual =
|
|
|
29
31
|
compareRemainingKeysBySameValue?: boolean;
|
|
30
32
|
}) =>
|
|
31
33
|
(prev, next) => {
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
for (const key of byReference) {
|
|
35
|
+
if (prev[key] !== next[key]) {
|
|
36
|
+
if (debug) console.log({ isEqualByReference: false });
|
|
35
37
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
38
|
+
return false;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
39
41
|
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
(key) => byComparator.comparator(prev[key], next[key]),
|
|
44
|
-
byComparator.keys
|
|
45
|
-
);
|
|
42
|
+
for (const key of byValue) {
|
|
43
|
+
if (!equals(prev[key], next[key])) {
|
|
44
|
+
if (debug) console.log({ isEqualByValue: false });
|
|
46
45
|
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
return false;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
for (const key of byComparator.keys) {
|
|
51
|
+
if (!byComparator.comparator(prev[key], next[key])) {
|
|
52
|
+
if (debug) console.log({ isEqualByComparator: false });
|
|
53
|
+
|
|
54
|
+
return false;
|
|
55
|
+
}
|
|
49
56
|
}
|
|
50
57
|
|
|
51
58
|
if (compareRemainingKeysBySameValue) {
|
|
@@ -57,21 +64,26 @@ export const isEqual =
|
|
|
57
64
|
...byComparator.keys,
|
|
58
65
|
]);
|
|
59
66
|
|
|
60
|
-
const
|
|
61
|
-
(key)
|
|
62
|
-
|
|
67
|
+
for (const key of Array.from(allKeys)) {
|
|
68
|
+
if (!declaredKeys.has(key) && !Object.is(prev[key], next[key])) {
|
|
69
|
+
if (debug) console.log({ isRestKeysEqualAllBySameValue: false });
|
|
63
70
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
71
|
+
return false;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
67
75
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
76
|
+
// if we made it here, everything matched
|
|
77
|
+
if (debug) {
|
|
78
|
+
console.log({
|
|
79
|
+
isEqualByValue: true,
|
|
80
|
+
isEqualByReference: true,
|
|
81
|
+
isEqualByComparator: true,
|
|
82
|
+
isRestKeysEqualAllBySameValue: compareRemainingKeysBySameValue
|
|
83
|
+
? true
|
|
84
|
+
: undefined,
|
|
85
|
+
});
|
|
74
86
|
}
|
|
75
87
|
|
|
76
|
-
return
|
|
88
|
+
return true;
|
|
77
89
|
};
|
|
@@ -250,7 +250,17 @@ class FocusManager {
|
|
|
250
250
|
}
|
|
251
251
|
|
|
252
252
|
onDisableFocusChange = (id) => {
|
|
253
|
-
|
|
253
|
+
const isFocused = FocusManager.instance.isFocused(id);
|
|
254
|
+
|
|
255
|
+
const isDescendantFocused = (() => {
|
|
256
|
+
try {
|
|
257
|
+
return FocusManager.instance.isAnyDescendantFocused(id);
|
|
258
|
+
} catch (_e) {
|
|
259
|
+
return false;
|
|
260
|
+
}
|
|
261
|
+
})();
|
|
262
|
+
|
|
263
|
+
if (isFocused || isDescendantFocused) {
|
|
254
264
|
// Move focus to next one
|
|
255
265
|
const nextFocus = FocusManager.instance.focused?.props
|
|
256
266
|
?.nextFocusDown as string;
|