@applicaster/zapp-react-native-utils 15.0.0-rc.48 → 15.0.0-rc.49
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/actionsExecutor/ActionExecutorContext.tsx +3 -6
- package/analyticsUtils/README.md +1 -1
- package/appUtils/orientationHelper.ts +2 -4
- package/package.json +2 -2
- package/pluginUtils/index.ts +4 -0
- package/reactHooks/advertising/index.ts +2 -2
- package/reactHooks/device/useMemoizedIsTablet.ts +3 -3
- package/reactHooks/feed/__tests__/useEntryScreenId.test.tsx +3 -0
- package/reactHooks/feed/useEntryScreenId.ts +2 -2
- package/reactHooks/layout/useDimensions/__tests__/{useDimensions.test.ts → useDimensions.test.tsx} +105 -25
- package/reactHooks/layout/useDimensions/useDimensions.ts +2 -2
- package/reactHooks/navigation/index.ts +7 -6
- package/reactHooks/navigation/useRoute.ts +8 -6
- package/reactHooks/resolvers/useCellResolver.ts +6 -2
- package/reactHooks/resolvers/useComponentResolver.ts +8 -2
- package/reactHooks/screen/__tests__/useTargetScreenData.test.tsx +10 -2
- package/reactHooks/screen/useTargetScreenData.ts +4 -2
- package/reactHooks/state/useRivers.ts +1 -1
- package/reactHooks/usePluginConfiguration.ts +2 -2
- package/testUtils/index.tsx +29 -20
- package/utils/__tests__/selectors.test.ts +124 -0
- package/utils/selectors.ts +46 -0
|
@@ -23,12 +23,9 @@ import {
|
|
|
23
23
|
EntryResolver,
|
|
24
24
|
resolveObjectValues,
|
|
25
25
|
} from "../appUtils/contextKeysManager/contextResolver";
|
|
26
|
-
import { useNavigation } from "../reactHooks";
|
|
26
|
+
import { useNavigation, useRivers } from "../reactHooks";
|
|
27
27
|
|
|
28
|
-
import {
|
|
29
|
-
useContentTypes,
|
|
30
|
-
usePickFromState,
|
|
31
|
-
} from "@applicaster/zapp-react-native-redux/hooks";
|
|
28
|
+
import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
|
|
32
29
|
import { useSubscriberFor } from "../reactHooks/useSubscriberFor";
|
|
33
30
|
import { APP_EVENTS } from "../appUtils/events";
|
|
34
31
|
import {
|
|
@@ -278,7 +275,7 @@ export function withActionExecutor(Component) {
|
|
|
278
275
|
|
|
279
276
|
return function ActionExecutorComponent(props: Props) {
|
|
280
277
|
const navigator = useNavigation();
|
|
281
|
-
const
|
|
278
|
+
const rivers = useRivers();
|
|
282
279
|
const contentTypes = useContentTypes();
|
|
283
280
|
|
|
284
281
|
const handlers = useMemo(() => {
|
package/analyticsUtils/README.md
CHANGED
|
@@ -388,7 +388,7 @@ export function AnalyticsProvider(props: ComponentWithChildrenProps) {
|
|
|
388
388
|
|
|
389
389
|
```ts
|
|
390
390
|
export function useAnalytics(props: any): any {
|
|
391
|
-
const
|
|
391
|
+
const appData = useAppData();
|
|
392
392
|
const getAnalyticsFunctions = React.useContext(AnalyticsContext);
|
|
393
393
|
|
|
394
394
|
const analyticsFunctions = React.useMemo(
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as ReactNative from "react-native";
|
|
2
|
-
import {
|
|
2
|
+
import { useAppData } from "@applicaster/zapp-react-native-redux/hooks";
|
|
3
3
|
|
|
4
4
|
import { isTV, platformSelect } from "../reactUtils";
|
|
5
5
|
import { useIsTablet } from "../reactHooks";
|
|
@@ -184,9 +184,7 @@ export const getScreenOrientation = ({
|
|
|
184
184
|
|
|
185
185
|
export const useGetScreenOrientation = (screenData) => {
|
|
186
186
|
const isTablet = useIsTablet();
|
|
187
|
-
|
|
188
|
-
const { appData } = usePickFromState(["appData"]);
|
|
189
|
-
const isTabletPortrait = appData?.isTabletPortrait;
|
|
187
|
+
const { isTabletPortrait } = useAppData();
|
|
190
188
|
|
|
191
189
|
return getScreenOrientation({
|
|
192
190
|
screenData,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applicaster/zapp-react-native-utils",
|
|
3
|
-
"version": "15.0.0-rc.
|
|
3
|
+
"version": "15.0.0-rc.49",
|
|
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-rc.
|
|
30
|
+
"@applicaster/applicaster-types": "15.0.0-rc.49",
|
|
31
31
|
"buffer": "^5.2.1",
|
|
32
32
|
"camelize": "^1.0.0",
|
|
33
33
|
"dayjs": "^1.11.10",
|
package/pluginUtils/index.ts
CHANGED
|
@@ -6,6 +6,7 @@ import { deprecationMessage } from "../appUtils";
|
|
|
6
6
|
|
|
7
7
|
import { pluginUtilsLogger } from "./logger";
|
|
8
8
|
import { platformSelect } from "../reactUtils";
|
|
9
|
+
import { get } from "../utils";
|
|
9
10
|
|
|
10
11
|
type PluginModule = any;
|
|
11
12
|
type Plugin = {
|
|
@@ -254,3 +255,6 @@ const getPluginType = R.pathOr("unknown_plugin_type", [
|
|
|
254
255
|
|
|
255
256
|
export const isPlayerPlugin = (routeState): boolean =>
|
|
256
257
|
getPluginType(routeState) === "player";
|
|
258
|
+
|
|
259
|
+
export const getPluginModuleUrlScheme = (plugin) =>
|
|
260
|
+
get(plugin, ["module", "urlScheme"]);
|
|
@@ -3,7 +3,7 @@ import { View } from "react-native";
|
|
|
3
3
|
import * as R from "ramda";
|
|
4
4
|
|
|
5
5
|
import { useNavigation } from "../navigation";
|
|
6
|
-
import {
|
|
6
|
+
import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
|
|
7
7
|
import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
|
|
8
8
|
import { dismissModal, openModal } from "../../modalState";
|
|
9
9
|
|
|
@@ -16,7 +16,7 @@ const ModalContainer = platformSelect({
|
|
|
16
16
|
|
|
17
17
|
export function useAdvertisingInterstitial() {
|
|
18
18
|
const { screenData, currentRoute } = useNavigation();
|
|
19
|
-
const
|
|
19
|
+
const plugins = usePlugins();
|
|
20
20
|
|
|
21
21
|
return useEffect(() => {
|
|
22
22
|
// TODD: typing problem: fix any type
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
|
|
3
2
|
import { useIsTablet } from "./useIsTablet";
|
|
3
|
+
import { useAppData } from "@applicaster/zapp-react-native-redux";
|
|
4
4
|
|
|
5
5
|
export const useMemoizedIsTablet = () => {
|
|
6
6
|
const isTablet = useIsTablet();
|
|
@@ -14,9 +14,9 @@ export const useMemoizedIsTablet = () => {
|
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
export const useIsTabletLandscape = (): boolean => {
|
|
17
|
-
const {
|
|
17
|
+
const { isTabletPortrait } = useAppData();
|
|
18
18
|
|
|
19
19
|
const isTablet = useIsTablet();
|
|
20
20
|
|
|
21
|
-
return isTablet && !
|
|
21
|
+
return isTablet && !isTabletPortrait;
|
|
22
22
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useContentTypes } from "@applicaster/zapp-react-native-redux";
|
|
2
2
|
|
|
3
3
|
export const useEntryScreenId = (entry?: ZappEntry): string | undefined => {
|
|
4
|
-
const
|
|
4
|
+
const contentTypes = useContentTypes();
|
|
5
5
|
|
|
6
6
|
if (!entry) {
|
|
7
7
|
return;
|
package/reactHooks/layout/useDimensions/__tests__/{useDimensions.test.ts → useDimensions.test.tsx}
RENAMED
|
@@ -1,16 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { renderHook } from "@testing-library/react-native";
|
|
2
3
|
import { Dimensions, StatusBar } from "react-native";
|
|
3
4
|
import { useDimensions } from "../useDimensions";
|
|
4
|
-
import { usePickFromState } from "@applicaster/zapp-react-native-redux";
|
|
5
5
|
|
|
6
6
|
import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
|
|
7
|
-
|
|
8
|
-
jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
|
|
9
|
-
return {
|
|
10
|
-
...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
|
|
11
|
-
usePickFromState: jest.fn(),
|
|
12
|
-
};
|
|
13
|
-
});
|
|
7
|
+
import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
|
|
14
8
|
|
|
15
9
|
jest.mock(
|
|
16
10
|
"@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
|
|
@@ -42,12 +36,22 @@ describe("useDimensions", () => {
|
|
|
42
36
|
|
|
43
37
|
beforeEach(() => {
|
|
44
38
|
StatusBar.currentHeight = 20;
|
|
45
|
-
(usePickFromState as jest.Mock).mockReturnValue({ appData: mockAppData });
|
|
46
39
|
});
|
|
47
40
|
|
|
48
41
|
it("returns correct initial dimensions", () => {
|
|
49
|
-
const { result } = renderHook(
|
|
50
|
-
useDimensions("window", { fullDimensions: false })
|
|
42
|
+
const { result } = renderHook(
|
|
43
|
+
() => useDimensions("window", { fullDimensions: false }),
|
|
44
|
+
{
|
|
45
|
+
wrapper: ({ children }) => (
|
|
46
|
+
<WrappedWithProviders
|
|
47
|
+
store={{
|
|
48
|
+
appData: mockAppData,
|
|
49
|
+
}}
|
|
50
|
+
>
|
|
51
|
+
{children}
|
|
52
|
+
</WrappedWithProviders>
|
|
53
|
+
),
|
|
54
|
+
}
|
|
51
55
|
);
|
|
52
56
|
|
|
53
57
|
expect(result.current).toMatchObject({
|
|
@@ -56,7 +60,17 @@ describe("useDimensions", () => {
|
|
|
56
60
|
});
|
|
57
61
|
|
|
58
62
|
it("calls handler on mount", () => {
|
|
59
|
-
renderHook(() => useDimensions("window", { fullDimensions: false })
|
|
63
|
+
renderHook(() => useDimensions("window", { fullDimensions: false }), {
|
|
64
|
+
wrapper: ({ children }) => (
|
|
65
|
+
<WrappedWithProviders
|
|
66
|
+
store={{
|
|
67
|
+
appData: mockAppData,
|
|
68
|
+
}}
|
|
69
|
+
>
|
|
70
|
+
{children}
|
|
71
|
+
</WrappedWithProviders>
|
|
72
|
+
),
|
|
73
|
+
});
|
|
60
74
|
|
|
61
75
|
expect(Dimensions.addEventListener).toHaveBeenCalledWith(
|
|
62
76
|
"change",
|
|
@@ -65,12 +79,23 @@ describe("useDimensions", () => {
|
|
|
65
79
|
});
|
|
66
80
|
|
|
67
81
|
it("calls handler on isActive change", () => {
|
|
68
|
-
const { rerender } = renderHook(
|
|
69
|
-
useDimensions("window", { fullDimensions: false })
|
|
82
|
+
const { rerender } = renderHook(
|
|
83
|
+
() => useDimensions("window", { fullDimensions: false }),
|
|
84
|
+
{
|
|
85
|
+
wrapper: ({ children }) => (
|
|
86
|
+
<WrappedWithProviders
|
|
87
|
+
store={{
|
|
88
|
+
appData: mockAppData,
|
|
89
|
+
}}
|
|
90
|
+
>
|
|
91
|
+
{children}
|
|
92
|
+
</WrappedWithProviders>
|
|
93
|
+
),
|
|
94
|
+
}
|
|
70
95
|
);
|
|
71
96
|
|
|
72
97
|
(useIsScreenActive as jest.Mock).mockReturnValue(false);
|
|
73
|
-
rerender();
|
|
98
|
+
rerender({});
|
|
74
99
|
|
|
75
100
|
expect(Dimensions.addEventListener).toHaveBeenCalledWith(
|
|
76
101
|
"change",
|
|
@@ -79,8 +104,19 @@ describe("useDimensions", () => {
|
|
|
79
104
|
});
|
|
80
105
|
|
|
81
106
|
it("handles fullDimensions option", () => {
|
|
82
|
-
const { result } = renderHook(
|
|
83
|
-
useDimensions("window", { fullDimensions: true })
|
|
107
|
+
const { result } = renderHook(
|
|
108
|
+
() => useDimensions("window", { fullDimensions: true }),
|
|
109
|
+
{
|
|
110
|
+
wrapper: ({ children }) => (
|
|
111
|
+
<WrappedWithProviders
|
|
112
|
+
store={{
|
|
113
|
+
appData: mockAppData,
|
|
114
|
+
}}
|
|
115
|
+
>
|
|
116
|
+
{children}
|
|
117
|
+
</WrappedWithProviders>
|
|
118
|
+
),
|
|
119
|
+
}
|
|
84
120
|
);
|
|
85
121
|
|
|
86
122
|
expect(result.current).toMatchObject({
|
|
@@ -91,8 +127,19 @@ describe("useDimensions", () => {
|
|
|
91
127
|
});
|
|
92
128
|
|
|
93
129
|
it("handles excludeStatusBar option", () => {
|
|
94
|
-
const { result } = renderHook(
|
|
95
|
-
useDimensions("window", { excludeStatusBar: true })
|
|
130
|
+
const { result } = renderHook(
|
|
131
|
+
() => useDimensions("window", { excludeStatusBar: true }),
|
|
132
|
+
{
|
|
133
|
+
wrapper: ({ children }) => (
|
|
134
|
+
<WrappedWithProviders
|
|
135
|
+
store={{
|
|
136
|
+
appData: mockAppData,
|
|
137
|
+
}}
|
|
138
|
+
>
|
|
139
|
+
{children}
|
|
140
|
+
</WrappedWithProviders>
|
|
141
|
+
),
|
|
142
|
+
}
|
|
96
143
|
);
|
|
97
144
|
|
|
98
145
|
expect(result.current.height).toBe(
|
|
@@ -101,8 +148,19 @@ describe("useDimensions", () => {
|
|
|
101
148
|
});
|
|
102
149
|
|
|
103
150
|
it("handles rounded option", () => {
|
|
104
|
-
const { result } = renderHook(
|
|
105
|
-
useDimensions("window", { rounded: true })
|
|
151
|
+
const { result } = renderHook(
|
|
152
|
+
() => useDimensions("window", { rounded: true }),
|
|
153
|
+
{
|
|
154
|
+
wrapper: ({ children }) => (
|
|
155
|
+
<WrappedWithProviders
|
|
156
|
+
store={{
|
|
157
|
+
appData: mockAppData,
|
|
158
|
+
}}
|
|
159
|
+
>
|
|
160
|
+
{children}
|
|
161
|
+
</WrappedWithProviders>
|
|
162
|
+
),
|
|
163
|
+
}
|
|
106
164
|
);
|
|
107
165
|
|
|
108
166
|
expect(result.current.width).toBe(Math.ceil(mockDimensions.width));
|
|
@@ -110,8 +168,19 @@ describe("useDimensions", () => {
|
|
|
110
168
|
});
|
|
111
169
|
|
|
112
170
|
it("handles deviceInfo option", () => {
|
|
113
|
-
const { result } = renderHook(
|
|
114
|
-
useDimensions("window", { deviceInfo: true })
|
|
171
|
+
const { result } = renderHook(
|
|
172
|
+
() => useDimensions("window", { deviceInfo: true }),
|
|
173
|
+
{
|
|
174
|
+
wrapper: ({ children }) => (
|
|
175
|
+
<WrappedWithProviders
|
|
176
|
+
store={{
|
|
177
|
+
appData: mockAppData,
|
|
178
|
+
}}
|
|
179
|
+
>
|
|
180
|
+
{children}
|
|
181
|
+
</WrappedWithProviders>
|
|
182
|
+
),
|
|
183
|
+
}
|
|
115
184
|
);
|
|
116
185
|
|
|
117
186
|
expect(result.current.deviceInfo).toMatchObject({
|
|
@@ -121,7 +190,18 @@ describe("useDimensions", () => {
|
|
|
121
190
|
|
|
122
191
|
it("logs deprecation warning when fullDimensions is boolean", () => {
|
|
123
192
|
const consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation();
|
|
124
|
-
|
|
193
|
+
|
|
194
|
+
renderHook(() => useDimensions("window", true), {
|
|
195
|
+
wrapper: ({ children }) => (
|
|
196
|
+
<WrappedWithProviders
|
|
197
|
+
store={{
|
|
198
|
+
appData: mockAppData,
|
|
199
|
+
}}
|
|
200
|
+
>
|
|
201
|
+
{children}
|
|
202
|
+
</WrappedWithProviders>
|
|
203
|
+
),
|
|
204
|
+
});
|
|
125
205
|
|
|
126
206
|
expect(consoleWarnSpy).toHaveBeenCalledWith(
|
|
127
207
|
"Deprecation Warning\nSecond argument is now the options object. {fullDimensions: boolean, ...}"
|
|
@@ -3,7 +3,7 @@ import { useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
|
3
3
|
import * as R from "ramda";
|
|
4
4
|
|
|
5
5
|
import { Dimensions, Platform, StatusBar } from "react-native";
|
|
6
|
-
import {
|
|
6
|
+
import { useAppData } from "@applicaster/zapp-react-native-redux/hooks";
|
|
7
7
|
|
|
8
8
|
import { isTV } from "../../../reactUtils";
|
|
9
9
|
|
|
@@ -37,7 +37,7 @@ export const useDimensions: UseDimensions = (
|
|
|
37
37
|
) => {
|
|
38
38
|
const statusBarHeight = StatusBar?.currentHeight;
|
|
39
39
|
const isActive = useIsScreenActive();
|
|
40
|
-
const
|
|
40
|
+
const appData = useAppData();
|
|
41
41
|
|
|
42
42
|
if (typeof fullDimensions === "boolean") {
|
|
43
43
|
// eslint-disable-next-line no-console
|
|
@@ -3,7 +3,7 @@ import { BackHandler } from "react-native";
|
|
|
3
3
|
|
|
4
4
|
import {
|
|
5
5
|
useContentTypes,
|
|
6
|
-
|
|
6
|
+
usePlugins,
|
|
7
7
|
} from "@applicaster/zapp-react-native-redux/hooks";
|
|
8
8
|
import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
|
|
9
9
|
|
|
@@ -16,6 +16,8 @@ import { useConnectionInfo } from "../connection";
|
|
|
16
16
|
|
|
17
17
|
import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
|
|
18
18
|
import { useNavbarState } from "../screen";
|
|
19
|
+
import { useRivers } from "../state";
|
|
20
|
+
import { useLayoutVersion } from "../layout";
|
|
19
21
|
|
|
20
22
|
export { useNavigation } from "./useNavigation";
|
|
21
23
|
|
|
@@ -164,11 +166,10 @@ export const useZappHooksForEntry = (
|
|
|
164
166
|
setIsRunningInBackground,
|
|
165
167
|
}: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
|
|
166
168
|
|
|
167
|
-
const
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
} = usePickFromState(["appData", "rivers", "plugins"]);
|
|
169
|
+
const plugins = usePlugins();
|
|
170
|
+
const rivers = useRivers();
|
|
171
|
+
|
|
172
|
+
const layoutVersion = useLayoutVersion();
|
|
172
173
|
|
|
173
174
|
const contentTypes = useContentTypes();
|
|
174
175
|
|
|
@@ -3,7 +3,10 @@
|
|
|
3
3
|
|
|
4
4
|
import { useContext } from "react";
|
|
5
5
|
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
useContentTypes,
|
|
8
|
+
usePlugins,
|
|
9
|
+
} from "@applicaster/zapp-react-native-redux/hooks";
|
|
7
10
|
|
|
8
11
|
import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
|
|
9
12
|
|
|
@@ -14,6 +17,7 @@ import { useNavigation } from "./useNavigation";
|
|
|
14
17
|
import { useModalStoreState } from "../../modalState";
|
|
15
18
|
import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
|
|
16
19
|
import { usePathname } from "./usePathname";
|
|
20
|
+
import { useRivers } from "../state";
|
|
17
21
|
|
|
18
22
|
// starts with modal/
|
|
19
23
|
const isModalPathname = (pathname: string) => /^modal\//.test(pathname);
|
|
@@ -42,11 +46,9 @@ export const useRoute = (
|
|
|
42
46
|
? legacyScreenData(screenContext)
|
|
43
47
|
: screenContext;
|
|
44
48
|
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
"contentTypes",
|
|
49
|
-
]);
|
|
49
|
+
const plugins = usePlugins();
|
|
50
|
+
const rivers = useRivers();
|
|
51
|
+
const contentTypes = useContentTypes();
|
|
50
52
|
|
|
51
53
|
const modalState = useModalStoreState();
|
|
52
54
|
|
|
@@ -3,7 +3,10 @@ import memoizee from "memoizee";
|
|
|
3
3
|
import * as R from "ramda";
|
|
4
4
|
|
|
5
5
|
import { CellRendererResolver } from "@applicaster/zapp-react-native-ui-components/Components/CellRendererResolver";
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
usePlugins,
|
|
8
|
+
useCellStyles,
|
|
9
|
+
} from "@applicaster/zapp-react-native-redux";
|
|
7
10
|
import { useDimensions } from "../layout";
|
|
8
11
|
import { useIsRTL } from "../../localizationUtils";
|
|
9
12
|
|
|
@@ -53,7 +56,8 @@ export function useCellResolver({
|
|
|
53
56
|
updateForInactiveScreens: false,
|
|
54
57
|
});
|
|
55
58
|
|
|
56
|
-
const
|
|
59
|
+
const plugins = usePlugins();
|
|
60
|
+
const cellStyles = useCellStyles();
|
|
57
61
|
const isRTL = useIsRTL();
|
|
58
62
|
|
|
59
63
|
const options = {
|
|
@@ -2,7 +2,11 @@
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
|
|
4
4
|
import { findComponentByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
|
|
5
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
usePlugins,
|
|
7
|
+
useAppSelector,
|
|
8
|
+
selectComponents,
|
|
9
|
+
} from "@applicaster/zapp-react-native-redux";
|
|
6
10
|
|
|
7
11
|
type Decorator = (component: React.Component<any>) => React.Component<any>;
|
|
8
12
|
type Watcher = Array<any>;
|
|
@@ -15,7 +19,9 @@ export function useComponentResolver(
|
|
|
15
19
|
{ componentType, decorators }: Props,
|
|
16
20
|
watchers?: Watcher
|
|
17
21
|
): React.ComponentType<any> {
|
|
18
|
-
const
|
|
22
|
+
const plugins = usePlugins();
|
|
23
|
+
|
|
24
|
+
const components = useAppSelector(selectComponents);
|
|
19
25
|
|
|
20
26
|
return React.useMemo(
|
|
21
27
|
() =>
|
|
@@ -9,8 +9,16 @@ const mockStore = configureStore([thunk]);
|
|
|
9
9
|
import { useTargetScreenData } from "../useTargetScreenData";
|
|
10
10
|
|
|
11
11
|
describe("useTargetScreenData", function () {
|
|
12
|
-
const river_id_2 = {
|
|
13
|
-
|
|
12
|
+
const river_id_2 = {
|
|
13
|
+
id: "river_id_2",
|
|
14
|
+
type: "any",
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
const river_id_1 = {
|
|
18
|
+
id: "river_id_1",
|
|
19
|
+
type: "any",
|
|
20
|
+
};
|
|
21
|
+
|
|
14
22
|
const screenId = "river_id_2";
|
|
15
23
|
const entry = { id: "test", type: { value: "video" } };
|
|
16
24
|
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
|
|
3
3
|
import * as R from "ramda";
|
|
4
4
|
import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
|
|
5
|
+
import { useRivers } from "../state";
|
|
5
6
|
|
|
6
7
|
export function getTargetScreenData(
|
|
7
8
|
entry: ZappEntry,
|
|
@@ -43,7 +44,8 @@ export function getTargetScreenDataFromEntry(entry: ZappEntry): ZappRiver {
|
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
export const useTargetScreenData = (entry: ZappEntry) => {
|
|
46
|
-
const
|
|
47
|
+
const rivers = useRivers();
|
|
48
|
+
const contentTypes = useContentTypes();
|
|
47
49
|
|
|
48
50
|
return React.useMemo(
|
|
49
51
|
() => getTargetScreenData(entry, rivers, contentTypes),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as R from "ramda";
|
|
2
2
|
import { useMemo } from "react";
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
|
|
5
5
|
|
|
6
6
|
// importing this way prevents typescript packages importing from this
|
|
7
7
|
// file to go crazy reporting errors on JS
|
|
@@ -25,7 +25,7 @@ export function parsePluginConfiguration(plugin, manifest) {
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
export function usePluginConfiguration<T, S>(identifier, manifest) {
|
|
28
|
-
const
|
|
28
|
+
const plugins = usePlugins();
|
|
29
29
|
|
|
30
30
|
const plugin = useMemo(
|
|
31
31
|
() => R.find(R.propEq("identifier", identifier), plugins),
|
package/testUtils/index.tsx
CHANGED
|
@@ -56,9 +56,29 @@ const initialState = {
|
|
|
56
56
|
contentTypes: null,
|
|
57
57
|
};
|
|
58
58
|
|
|
59
|
+
const themeObjDefault = {
|
|
60
|
+
component_margin_top: 0,
|
|
61
|
+
component_margin_bottom: 0,
|
|
62
|
+
component_margin_left: 0,
|
|
63
|
+
component_margin_right: 0,
|
|
64
|
+
component_padding_top: 0,
|
|
65
|
+
component_padding_bottom: 0,
|
|
66
|
+
component_padding_left: 0,
|
|
67
|
+
component_padding_right: 0,
|
|
68
|
+
component_gutter_vertical: 0,
|
|
69
|
+
component_gutter_horizontal: 0,
|
|
70
|
+
component_corner_radius: 0,
|
|
71
|
+
app_background_color: "rgba(0,0,0,0)",
|
|
72
|
+
screen_margin_top: 0,
|
|
73
|
+
screen_margin_bottom: 0,
|
|
74
|
+
component_anchor_point_y: 0,
|
|
75
|
+
assets: "",
|
|
76
|
+
};
|
|
77
|
+
|
|
59
78
|
export const WrappedWithProviders = ({
|
|
60
79
|
children,
|
|
61
80
|
store: storeObj = {},
|
|
81
|
+
theme: themeObj = themeObjDefault,
|
|
62
82
|
}: any) => {
|
|
63
83
|
const _store = configureStore([thunk])(
|
|
64
84
|
R.mergeDeepRight(initialState, { ...storeObj })
|
|
@@ -70,24 +90,7 @@ export const WrappedWithProviders = ({
|
|
|
70
90
|
<ThemeContext.Provider
|
|
71
91
|
value={{
|
|
72
92
|
themes: {
|
|
73
|
-
light:
|
|
74
|
-
component_margin_top: 0,
|
|
75
|
-
component_margin_bottom: 0,
|
|
76
|
-
component_margin_left: 0,
|
|
77
|
-
component_margin_right: 0,
|
|
78
|
-
component_padding_top: 0,
|
|
79
|
-
component_padding_bottom: 0,
|
|
80
|
-
component_padding_left: 0,
|
|
81
|
-
component_padding_right: 0,
|
|
82
|
-
component_gutter_vertical: 0,
|
|
83
|
-
component_gutter_horizontal: 0,
|
|
84
|
-
component_corner_radius: 0,
|
|
85
|
-
app_background_color: "rgba(0,0,0,0)",
|
|
86
|
-
screen_margin_top: 0,
|
|
87
|
-
screen_margin_bottom: 0,
|
|
88
|
-
component_anchor_point_y: 0,
|
|
89
|
-
assets: "",
|
|
90
|
-
},
|
|
93
|
+
light: themeObj,
|
|
91
94
|
},
|
|
92
95
|
selectedThemeId: "light",
|
|
93
96
|
setSelectedThemeId: () => {},
|
|
@@ -113,11 +116,17 @@ export const WrappedWithProviders = ({
|
|
|
113
116
|
* @param store optional store to pass to the provider
|
|
114
117
|
* @returns
|
|
115
118
|
*/
|
|
116
|
-
export const renderWithProviders = (
|
|
119
|
+
export const renderWithProviders = (
|
|
120
|
+
component,
|
|
121
|
+
storeObj?: unknown,
|
|
122
|
+
themeObj?: unknown
|
|
123
|
+
) => {
|
|
117
124
|
return render(component, {
|
|
118
125
|
wrapper: function TestWrapper({ children }: PropsWithChildren<any>) {
|
|
119
126
|
return (
|
|
120
|
-
<WrappedWithProviders store={storeObj}
|
|
127
|
+
<WrappedWithProviders store={storeObj} theme={themeObj}>
|
|
128
|
+
{children}
|
|
129
|
+
</WrappedWithProviders>
|
|
121
130
|
);
|
|
122
131
|
},
|
|
123
132
|
});
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import {
|
|
2
|
+
createPluginsByPathSelector,
|
|
3
|
+
createPluginsByModuleSelector,
|
|
4
|
+
combinePluginSelectors,
|
|
5
|
+
} from "../selectors";
|
|
6
|
+
|
|
7
|
+
describe("Plugin Selectors", () => {
|
|
8
|
+
const mockPlugins = [
|
|
9
|
+
{
|
|
10
|
+
identifier: "plugin1",
|
|
11
|
+
module: {
|
|
12
|
+
urlScheme: { host: "test" },
|
|
13
|
+
player: { type: "default" },
|
|
14
|
+
},
|
|
15
|
+
customField: true,
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
identifier: "plugin2",
|
|
19
|
+
module: {
|
|
20
|
+
urlScheme: { host: "other" },
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
identifier: "plugin3",
|
|
25
|
+
module: {
|
|
26
|
+
player: { type: "custom" },
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
];
|
|
30
|
+
|
|
31
|
+
const mockState = {
|
|
32
|
+
plugins: mockPlugins,
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
describe("createPluginsByPathSelector", () => {
|
|
36
|
+
it("filters plugins by string path", () => {
|
|
37
|
+
const selector = createPluginsByPathSelector("customField");
|
|
38
|
+
const result = selector(mockState);
|
|
39
|
+
|
|
40
|
+
expect(result).toHaveLength(1);
|
|
41
|
+
expect(result[0].identifier).toBe("plugin1");
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
it("filters plugins by array path", () => {
|
|
45
|
+
const selector = createPluginsByPathSelector(["module", "urlScheme"]);
|
|
46
|
+
const result = selector(mockState);
|
|
47
|
+
|
|
48
|
+
expect(result).toHaveLength(2);
|
|
49
|
+
expect(result.map((p) => p.identifier)).toEqual(["plugin1", "plugin2"]);
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
it("handles missing plugins array", () => {
|
|
53
|
+
const selector = createPluginsByPathSelector("customField");
|
|
54
|
+
const result = selector({});
|
|
55
|
+
|
|
56
|
+
expect(result).toEqual([]);
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
it("handles non-existent path", () => {
|
|
60
|
+
const selector = createPluginsByPathSelector("nonexistent");
|
|
61
|
+
const result = selector(mockState);
|
|
62
|
+
|
|
63
|
+
expect(result).toEqual([]);
|
|
64
|
+
});
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
describe("createPluginsByModuleSelector", () => {
|
|
68
|
+
it("filters plugins by module path", () => {
|
|
69
|
+
const selector = createPluginsByModuleSelector("player");
|
|
70
|
+
const result = selector(mockState);
|
|
71
|
+
|
|
72
|
+
expect(result).toHaveLength(2);
|
|
73
|
+
expect(result.map((p) => p.identifier)).toEqual(["plugin1", "plugin3"]);
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
it("handles non-existent module", () => {
|
|
77
|
+
const selector = createPluginsByModuleSelector("nonexistent");
|
|
78
|
+
const result = selector(mockState);
|
|
79
|
+
|
|
80
|
+
expect(result).toEqual([]);
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
describe("combinePluginSelectors", () => {
|
|
85
|
+
it("combines multiple selectors with AND logic", () => {
|
|
86
|
+
const urlSchemeSelector = createPluginsByModuleSelector("urlScheme");
|
|
87
|
+
const playerSelector = createPluginsByModuleSelector("player");
|
|
88
|
+
|
|
89
|
+
const combinedSelector = combinePluginSelectors(
|
|
90
|
+
urlSchemeSelector,
|
|
91
|
+
playerSelector
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
const result = combinedSelector(mockState);
|
|
95
|
+
|
|
96
|
+
expect(result).toHaveLength(1);
|
|
97
|
+
expect(result[0].identifier).toBe("plugin1");
|
|
98
|
+
});
|
|
99
|
+
|
|
100
|
+
it("returns empty array when no plugins match all conditions", () => {
|
|
101
|
+
const urlSchemeSelector = createPluginsByModuleSelector("urlScheme");
|
|
102
|
+
const customSelector = createPluginsByPathSelector("nonexistent");
|
|
103
|
+
|
|
104
|
+
const combinedSelector = combinePluginSelectors(
|
|
105
|
+
urlSchemeSelector,
|
|
106
|
+
customSelector
|
|
107
|
+
);
|
|
108
|
+
|
|
109
|
+
const result = combinedSelector(mockState);
|
|
110
|
+
|
|
111
|
+
expect(result).toEqual([]);
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
it("handles empty state", () => {
|
|
115
|
+
const selector = combinePluginSelectors(
|
|
116
|
+
createPluginsByModuleSelector("urlScheme")
|
|
117
|
+
);
|
|
118
|
+
|
|
119
|
+
const result = selector({});
|
|
120
|
+
|
|
121
|
+
expect(result).toEqual([]);
|
|
122
|
+
});
|
|
123
|
+
});
|
|
124
|
+
});
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { get } from "lodash";
|
|
2
|
+
|
|
3
|
+
export type Selector<T> = (state: any) => T;
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Creates a selector for filtering plugins by path
|
|
7
|
+
* @param path - Path to check in plugin. Can be a dot notation string or array
|
|
8
|
+
* @returns A selector function that returns matching plugins
|
|
9
|
+
*/
|
|
10
|
+
export const createPluginsByPathSelector = (
|
|
11
|
+
path: string | string[]
|
|
12
|
+
): Selector<any[]> => {
|
|
13
|
+
return (state: any) => {
|
|
14
|
+
const plugins = state.plugins || [];
|
|
15
|
+
|
|
16
|
+
return plugins.filter((plugin: any) => get(plugin, path));
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Creates a selector for filtering plugins by module path
|
|
22
|
+
* @param modulePath - Module path to check in plugin (e.g., "urlScheme", "player")
|
|
23
|
+
* @returns A selector function that returns plugins with specified module
|
|
24
|
+
*/
|
|
25
|
+
export const createPluginsByModuleSelector = (
|
|
26
|
+
modulePath: string
|
|
27
|
+
): Selector<any[]> => {
|
|
28
|
+
return createPluginsByPathSelector(["module", modulePath]);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Creates a selector that combines multiple plugin selectors
|
|
33
|
+
* @param selectors - Array of plugin selectors to combine
|
|
34
|
+
* @returns A selector function that returns plugins matching all conditions
|
|
35
|
+
*/
|
|
36
|
+
export const combinePluginSelectors = (
|
|
37
|
+
...selectors: Selector<any[]>[]
|
|
38
|
+
): Selector<any[]> => {
|
|
39
|
+
return (state: any) => {
|
|
40
|
+
return selectors.reduce((filtered, selector) => {
|
|
41
|
+
const selected = selector(state);
|
|
42
|
+
|
|
43
|
+
return filtered.filter((plugin) => selected.includes(plugin));
|
|
44
|
+
}, state.plugins || []);
|
|
45
|
+
};
|
|
46
|
+
};
|