@applicaster/zapp-react-native-ui-components 13.0.0-alpha.5771418585 → 13.0.0-alpha.5928753399
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/Components/AppContainer/__tests__/AppContainer.test.js +4 -6
- package/Components/AudioPlayer/AudioPlayer.tsx +7 -0
- package/Components/AudioPlayer/__tests__/Runtime.test.js +5 -8
- package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayer.test.js.snap +54 -111
- package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayerLayout.test.js.snap +36 -20
- package/Components/AudioPlayer/__tests__/artWork.test.js +3 -5
- package/Components/AudioPlayer/__tests__/audioPlayer.test.js +3 -5
- package/Components/AudioPlayer/__tests__/audioPlayerLayout.test.js +7 -8
- package/Components/AudioPlayer/__tests__/channel.test.js +3 -5
- package/Components/AudioPlayer/__tests__/summary.test.js +3 -5
- package/Components/AudioPlayer/__tests__/title.test.js +3 -5
- package/Components/AudioPlayer/helpers.tsx +1 -0
- package/Components/BaseFocusable/index.tsx +1 -2
- package/Components/Cell/Cell.tsx +1 -0
- package/Components/Cell/CellWithFocusable.tsx +2 -1
- package/Components/Cell/TvOSCellComponent.tsx +20 -22
- package/Components/Cell/index.js +3 -1
- package/Components/CellRendererResolver/__tests__/cellRendererResolver.test.js +46 -48
- package/Components/ComponentResolver/__tests__/__snapshots__/componentResolver.test.js.snap +1 -42
- package/Components/ComponentResolver/__tests__/componentResolver.test.js +16 -22
- package/Components/ContentScreen/__tests__/contentScreen.test.js +3 -3
- package/Components/Focusable/FocusableTvOS.tsx +5 -1
- package/Components/Focusable/index.android.tsx +10 -3
- package/Components/FocusableCell/index.tsx +1 -1
- package/Components/FocusableGroup/FocusableTvOS.tsx +34 -86
- package/Components/FocusableGroup/index.tsx +0 -3
- package/Components/FocusableList/index.tsx +26 -9
- package/Components/FocusableScrollView/index.tsx +43 -13
- package/Components/HandlePlayable/HandlePlayable.tsx +14 -27
- package/Components/Layout/TV/NavBarContainer.tsx +19 -23
- package/Components/Layout/TV/ScreenContainer.tsx +8 -1
- package/Components/Layout/TV/ScreenLayoutContextProvider.tsx +5 -0
- package/Components/Layout/TV/__tests__/ScreenContainer.test.tsx +2 -1
- package/Components/Layout/TV/__tests__/__snapshots__/NavBarContainer.test.tsx.snap +3 -2
- package/Components/Layout/TV/__tests__/__snapshots__/ScreenContainer.test.tsx.snap +3 -2
- package/Components/MasterCell/DefaultComponents/ActionButton.tsx +2 -3
- package/Components/MasterCell/SharedUI/ProgressBar/hooks/useFillInPercent.ts +2 -8
- package/Components/MasterCell/__tests__/__snapshots__/elementMapper.test.js.snap +4 -12
- package/Components/MasterCell/__tests__/__snapshots__/masterCell.test.js.snap +0 -229
- package/Components/MasterCell/__tests__/elementMapper.test.js +18 -5
- package/Components/MasterCell/__tests__/masterCell.test.js +26 -26
- package/Components/MasterCell/utils/behaviorProvider.ts +136 -0
- package/Components/MasterCell/utils/index.ts +8 -134
- package/Components/OfflineHandler/NotificationView/__tests__/index.test.tsx +0 -5
- package/Components/OfflineHandler/utils/index.ts +1 -1
- package/Components/PlayerContainer/PlayerContainer.tsx +9 -5
- package/Components/PlayerImageBackground/index.tsx +1 -1
- package/Components/River/ComponentsMap/ComponentsMap.tsx +3 -0
- package/Components/River/ComponentsMap/hooks/useLoadingState.ts +3 -3
- package/Components/River/TV/index.tsx +6 -1
- package/Components/River/__tests__/__snapshots__/river.test.js.snap +20 -82
- package/Components/River/__tests__/river.test.js +75 -40
- package/Components/RouteManager/__tests__/__snapshots__/routeManager.test.js.snap +11 -4
- package/Components/RouteManager/__tests__/routeManager.test.js +29 -14
- package/Components/RouteManager/__tests__/testId.test.js +8 -6
- package/Components/Screen/TV/index.web.tsx +5 -6
- package/Components/Screen/hooks.ts +3 -6
- package/Components/ScreenResolver/__tests__/screenResolver.test.js +91 -70
- package/Components/TrackedView/index.tsx +1 -0
- package/Components/Transitioner/AnimationManager.js +15 -15
- package/Components/Transitioner/__tests__/Scene.test.js +25 -14
- package/Components/Transitioner/__tests__/__snapshots__/Scene.test.js.snap +12 -68
- package/Components/Transitioner/__tests__/__snapshots__/transitioner.test.js.snap +2 -2
- package/Components/Transitioner/__tests__/transitioner.test.js +13 -4
- package/Components/VideoLive/PlayerLiveImageComponent.tsx +4 -0
- package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap +1 -0
- package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx +1 -1
- package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx +33 -19
- package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx +3 -3
- package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx +17 -4
- package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx +2 -2
- package/Components/VideoModal/PlayerDetails.tsx +4 -1
- package/Components/VideoModal/VideoModal.tsx +2 -2
- package/Components/Viewport/ViewportAware/__tests__/__snapshots__/viewportAware.test.js.snap +24 -36
- package/Components/Viewport/ViewportAware/__tests__/viewportAware.test.js +12 -18
- package/Components/Viewport/__tests__/utils.test.js +5 -4
- package/Components/ZappUIComponent/Placeholder.tsx +3 -1
- package/Components/ZappUIComponent/__tests__/{ZappUIComponent.test.js → ZappUIComponent.test.tsx} +26 -10
- package/Components/ZappUIComponent/index.tsx +3 -16
- package/Components/default-cell-renderer/__tests__/defaultCellRenderer.test.tsx +20 -17
- package/Components/default-cell-renderer/viewTrees/tv/DefaultCell/__tests__/DefaultCell.test.tsx +15 -11
- package/Contexts/ComponentsMapOffsetContext/index.tsx +49 -0
- package/Contexts/FocusableGroupContext/withFocusableContext.tsx +4 -10
- package/Contexts/HeaderOffsetContext/index.tsx +4 -6
- package/Contexts/ScreenContext/index.tsx +3 -10
- package/Contexts/ScreenLayoutContext/index.tsx +5 -3
- package/Decorators/Navigator/__tests__/navigator.test.js +16 -16
- package/Decorators/Navigator/index.tsx +1 -1
- package/Decorators/RiverResolver/__tests__/riverResolver.test.tsx +18 -24
- package/Decorators/RiverResolver/index.tsx +6 -8
- package/Decorators/ZappPipesDataConnector/__tests__/zappPipesDataConnector.test.js +29 -22
- package/Decorators/ZappPipesDataConnector/index.tsx +4 -30
- package/package.json +7 -11
- package/tsconfig.json +2 -3
- package/.babelrc +0 -8
- package/Components/Cell/CellWithFocusable.ios.tsx +0 -126
- package/Components/CellRendererResolver/__tests__/__snapshots__/cellRendererResolver.test.js.snap +0 -53
- package/Components/RouteManager/__tests__/__snapshots__/testId.test.js.snap +0 -17
- package/Components/ScreenResolver/__tests__/__snapshots__/screenResolver.test.js.snap +0 -17
- package/Components/ZappUIComponent/__tests__/__snapshots__/ZappUIComponent.test.js.snap +0 -91
- package/Components/default-cell-renderer/__tests__/__snapshots__/defaultCellRenderer.test.tsx.snap +0 -338
- package/Decorators/Navigator/__tests__/__snapshots__/navigator.test.js.snap +0 -18
- package/Decorators/RiverResolver/__tests__/__snapshots__/riverResolver.test.tsx.snap +0 -28
package/Components/default-cell-renderer/viewTrees/tv/DefaultCell/__tests__/DefaultCell.test.tsx
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
|
|
3
|
+
import { DefaultCell } from "../";
|
|
4
|
+
import { masterCellBuilder } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell";
|
|
5
|
+
import { View, Text, Image } from "react-native";
|
|
3
6
|
|
|
4
7
|
jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
|
|
5
8
|
useRoute: jest.fn(() => ({ screenData: { id: "test" } })),
|
|
9
|
+
useIsScreenActive: jest.fn(() => true),
|
|
6
10
|
}));
|
|
7
11
|
|
|
8
12
|
jest.mock("@applicaster/zapp-react-native-utils/screenState", () => ({
|
|
@@ -12,12 +16,6 @@ jest.mock("@applicaster/zapp-react-native-utils/screenState", () => ({
|
|
|
12
16
|
})),
|
|
13
17
|
}));
|
|
14
18
|
|
|
15
|
-
const {
|
|
16
|
-
masterCellBuilder,
|
|
17
|
-
} = require("@applicaster/zapp-react-native-ui-components/Components/MasterCell");
|
|
18
|
-
|
|
19
|
-
const { DefaultCell } = require("../");
|
|
20
|
-
|
|
21
19
|
describe("DefaultCell", () => {
|
|
22
20
|
it("is a function", () => {
|
|
23
21
|
expect(DefaultCell).toBeFunction();
|
|
@@ -33,15 +31,21 @@ describe("DefaultCell", () => {
|
|
|
33
31
|
} as const;
|
|
34
32
|
|
|
35
33
|
const CellRenderer = masterCellBuilder({
|
|
34
|
+
components: {
|
|
35
|
+
View: View,
|
|
36
|
+
Text: Text,
|
|
37
|
+
Image: Image,
|
|
38
|
+
},
|
|
36
39
|
containerStyle: {},
|
|
37
40
|
cellConfiguration: DefaultCell(styles),
|
|
38
41
|
});
|
|
39
42
|
|
|
40
|
-
const
|
|
43
|
+
const { UNSAFE_getAllByType } = renderWithProviders(<CellRenderer />);
|
|
44
|
+
const textElement = UNSAFE_getAllByType(Text)[0];
|
|
41
45
|
|
|
42
|
-
expect(
|
|
43
|
-
"rgba(239,239,239,1.0)"
|
|
44
|
-
);
|
|
46
|
+
expect(textElement.props.style).toMatchObject({
|
|
47
|
+
color: "rgba(239,239,239,1.0)",
|
|
48
|
+
});
|
|
45
49
|
});
|
|
46
50
|
|
|
47
51
|
it.skip("matches snapshot", () => {
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
|
|
2
|
+
import React, { PropsWithChildren, useMemo } from "react";
|
|
3
|
+
|
|
4
|
+
export const ComponentsMapOffsetContext = React.createContext({
|
|
5
|
+
setComponentsMapOffset: (_offset: number) => void 0,
|
|
6
|
+
componentsMapOffset: 0,
|
|
7
|
+
});
|
|
8
|
+
|
|
9
|
+
export const ComponentsMapOffsetContextProvider = ({
|
|
10
|
+
children,
|
|
11
|
+
}: PropsWithChildren<{}>) => {
|
|
12
|
+
const theme = useTheme<BaseThemePropertiesTV>();
|
|
13
|
+
|
|
14
|
+
const [componentsMapOffset, setComponentsMapOffset] = React.useState(
|
|
15
|
+
theme?.screen_margin_top
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
const contextValue = useMemo(
|
|
19
|
+
() => ({
|
|
20
|
+
componentsMapOffset,
|
|
21
|
+
setComponentsMapOffset,
|
|
22
|
+
}),
|
|
23
|
+
[componentsMapOffset]
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<ComponentsMapOffsetContext.Provider value={contextValue}>
|
|
28
|
+
{children}
|
|
29
|
+
</ComponentsMapOffsetContext.Provider>
|
|
30
|
+
);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export const withComponentsMapOffsetContext = (Component: any) =>
|
|
34
|
+
function ComponentsMapOffsetContextProviderWrapper(props: {}) {
|
|
35
|
+
return (
|
|
36
|
+
<ComponentsMapOffsetContextProvider>
|
|
37
|
+
<Component {...props} />
|
|
38
|
+
</ComponentsMapOffsetContextProvider>
|
|
39
|
+
);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export const withComponentsMapOffsetContextConsumer = (Component: any) =>
|
|
43
|
+
function ComponentsMapOffsetContextConsumerWrapper(props: {}) {
|
|
44
|
+
const { componentsMapOffset } = React.useContext(
|
|
45
|
+
ComponentsMapOffsetContext
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
return <Component {...props} componentsMapOffset={componentsMapOffset} />;
|
|
49
|
+
};
|
|
@@ -7,17 +7,11 @@ export const withFocusableContext = (Component) => {
|
|
|
7
7
|
{ groupId, ...props }: Record<string, any>,
|
|
8
8
|
ref
|
|
9
9
|
) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
// eslint-disable-next-line react/display-name
|
|
14
|
-
const propsGroupId = groupId || null;
|
|
15
|
-
const providedGroupId = propsGroupId || groupIdContext;
|
|
10
|
+
const groupIdContext = React.useContext(FocusableGroupContext);
|
|
11
|
+
const propsGroupId = groupId || null;
|
|
12
|
+
const providedGroupId = propsGroupId || groupIdContext;
|
|
16
13
|
|
|
17
|
-
|
|
18
|
-
}}
|
|
19
|
-
</FocusableGroupContext.Consumer>
|
|
20
|
-
);
|
|
14
|
+
return <Component {...props} groupId={providedGroupId} ref={ref} />;
|
|
21
15
|
};
|
|
22
16
|
|
|
23
17
|
return React.forwardRef(WithFocusableContext);
|
|
@@ -13,7 +13,7 @@ type ProviderProps = {
|
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
15
|
|
|
16
|
-
const initialHeaderOffsetContext = () => ({
|
|
16
|
+
const initialHeaderOffsetContext: HeaderOffsetContextType = () => ({
|
|
17
17
|
headerOffset: 0,
|
|
18
18
|
headersAbove: null,
|
|
19
19
|
});
|
|
@@ -24,11 +24,9 @@ export const HeaderOffsetContext = React.createContext<HeaderOffsetContextType>(
|
|
|
24
24
|
|
|
25
25
|
export function withConsumer(Component) {
|
|
26
26
|
return function WithConsumer(props) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
</HeaderOffsetContext.Consumer>
|
|
31
|
-
);
|
|
27
|
+
const getHeaderOffset = React.useContext(HeaderOffsetContext);
|
|
28
|
+
|
|
29
|
+
return <Component getHeaderOffset={getHeaderOffset} {...props} />;
|
|
32
30
|
};
|
|
33
31
|
}
|
|
34
32
|
|
|
@@ -176,15 +176,8 @@ export function ScreenContextProvider({
|
|
|
176
176
|
|
|
177
177
|
export function withScreenContext(Component: React.ComponentType<any>) {
|
|
178
178
|
return function WithScreenContextWrapper(props) {
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
(value) => (
|
|
183
|
-
<Component {...props} screenContext={value} />
|
|
184
|
-
),
|
|
185
|
-
[Component, props]
|
|
186
|
-
)}
|
|
187
|
-
</ScreenContext.Consumer>
|
|
188
|
-
);
|
|
179
|
+
const screenContext = React.useContext(ScreenContext);
|
|
180
|
+
|
|
181
|
+
return <Component {...props} screenContext={screenContext} />;
|
|
189
182
|
};
|
|
190
183
|
}
|
|
@@ -8,10 +8,11 @@ type LayoutContext = {
|
|
|
8
8
|
componentAnchorPointY: number | null;
|
|
9
9
|
componentAvailableWidth: number | null;
|
|
10
10
|
setScreenLayout?: (properties: {}) => void;
|
|
11
|
+
resetScreenLayout?: () => void;
|
|
11
12
|
extraAnchorPointYOffset: number;
|
|
12
13
|
};
|
|
13
14
|
|
|
14
|
-
const
|
|
15
|
+
const initialScreenLayoutContext: LayoutContext = {
|
|
15
16
|
screenMarginTop: null,
|
|
16
17
|
screenMarginBottom: null,
|
|
17
18
|
screenHeight: null,
|
|
@@ -21,8 +22,9 @@ const screenLayoutContext: LayoutContext = {
|
|
|
21
22
|
extraAnchorPointYOffset: 0,
|
|
22
23
|
};
|
|
23
24
|
|
|
24
|
-
export const ScreenLayoutContext =
|
|
25
|
-
|
|
25
|
+
export const ScreenLayoutContext = React.createContext<LayoutContext>(
|
|
26
|
+
initialScreenLayoutContext
|
|
27
|
+
);
|
|
26
28
|
|
|
27
29
|
export function ScreenLayoutContextConsumer(Component) {
|
|
28
30
|
return function WithConsumer(props) {
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { View } from "react-native";
|
|
3
|
+
import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
|
|
4
|
+
import { withNavigator } from "..";
|
|
2
5
|
|
|
3
6
|
const navigatorMock = {
|
|
4
7
|
push: jest.fn(),
|
|
@@ -12,27 +15,24 @@ const navigatorMock = {
|
|
|
12
15
|
|
|
13
16
|
const mocked_context = navigatorMock;
|
|
14
17
|
|
|
15
|
-
jest.mock(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
import { shallow } from "enzyme";
|
|
24
|
-
|
|
25
|
-
const React = require("react");
|
|
26
|
-
const { withNavigator } = require("../index");
|
|
18
|
+
jest.mock(
|
|
19
|
+
"@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
|
|
20
|
+
() => {
|
|
21
|
+
return {
|
|
22
|
+
useNavigation: jest.fn(() => mocked_context),
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
);
|
|
27
26
|
|
|
28
27
|
describe("withNavigator Decorator", () => {
|
|
29
28
|
it("renders correctly", () => {
|
|
30
29
|
const Component = () => <View />;
|
|
31
30
|
const WrappedComponent = withNavigator(Component);
|
|
32
31
|
|
|
33
|
-
const wrapper =
|
|
32
|
+
const wrapper = renderWithProviders(<WrappedComponent someProp="foo" />);
|
|
34
33
|
|
|
35
|
-
expect(wrapper).
|
|
36
|
-
|
|
34
|
+
expect(wrapper.UNSAFE_getByType(Component).props.navigator).toEqual(
|
|
35
|
+
navigatorMock
|
|
36
|
+
);
|
|
37
37
|
});
|
|
38
38
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
|
|
3
|
-
import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
|
|
3
|
+
import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
|
|
4
4
|
import { deprecationWarningWithIdentifier } from "@applicaster/zapp-react-native-utils/appUtils";
|
|
5
5
|
|
|
6
6
|
export function withNavigator(Component) {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { shallow } from "enzyme";
|
|
3
2
|
import { View } from "react-native";
|
|
4
|
-
import {
|
|
5
|
-
|
|
3
|
+
import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
|
|
4
|
+
|
|
5
|
+
import { withRiver } from "../";
|
|
6
6
|
|
|
7
7
|
const rivers = {
|
|
8
8
|
A123: {
|
|
@@ -20,37 +20,31 @@ jest.doMock(
|
|
|
20
20
|
})
|
|
21
21
|
);
|
|
22
22
|
|
|
23
|
-
jest.
|
|
24
|
-
"@applicaster/zapp-react-native-utils/reactHooks/
|
|
23
|
+
jest.doMock(
|
|
24
|
+
"@applicaster/zapp-react-native-utils/reactHooks/navigation/usePathname",
|
|
25
25
|
() => ({
|
|
26
|
-
|
|
26
|
+
usePathname: jest.fn(() => "/home"),
|
|
27
27
|
})
|
|
28
28
|
);
|
|
29
29
|
|
|
30
|
-
jest.
|
|
31
|
-
|
|
32
|
-
// mocks useNavigator to return currentRoute: "/home"
|
|
33
|
-
jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
|
|
34
|
-
useNavigation: jest.fn(() => ({ currentRoute: "/home" })),
|
|
35
|
-
useRoute: jest.fn(() => ({ pathname: "/home" })),
|
|
36
|
-
}));
|
|
37
|
-
|
|
38
|
-
const { withRiver } = require("../index");
|
|
39
|
-
|
|
40
|
-
const TestComponent = jest.fn(() => <View />);
|
|
30
|
+
const TestComponent = jest.fn((props) => <View {...props} />);
|
|
41
31
|
|
|
42
32
|
describe("withRiver HoC", () => {
|
|
43
33
|
const WrappedComponent = withRiver(TestComponent);
|
|
44
34
|
|
|
45
|
-
const wrapper =
|
|
46
|
-
<WrappedComponent
|
|
35
|
+
const wrapper = renderWithProviders(
|
|
36
|
+
<WrappedComponent
|
|
37
|
+
testID="test-view"
|
|
38
|
+
screenId="A123"
|
|
39
|
+
otherProp="otherProp"
|
|
40
|
+
/>,
|
|
41
|
+
{ rivers: rivers }
|
|
47
42
|
);
|
|
48
43
|
|
|
49
|
-
it("renders correctly", () => {
|
|
50
|
-
expect(shallowToJson(wrapper)).toMatchSnapshot();
|
|
51
|
-
});
|
|
52
|
-
|
|
53
44
|
it("populates the river prop", () => {
|
|
54
|
-
|
|
45
|
+
const targetView = wrapper.getByTestId("test-view");
|
|
46
|
+
|
|
47
|
+
expect(targetView.props.river).toEqual(rivers.A123);
|
|
48
|
+
expect(targetView.props.screenData).toEqual(rivers.A123);
|
|
55
49
|
});
|
|
56
50
|
});
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
|
|
3
|
-
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
|
|
4
3
|
import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
|
|
5
|
-
import { usePathname } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
|
|
4
|
+
import { usePathname } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/usePathname";
|
|
5
|
+
import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks";
|
|
6
6
|
|
|
7
7
|
type Props = ZappUIComponentProps & {
|
|
8
8
|
rivers: ZappRivers;
|
|
@@ -12,27 +12,25 @@ type Props = ZappUIComponentProps & {
|
|
|
12
12
|
|
|
13
13
|
export function withRiver(Component: ZappComponent): ZappComponent {
|
|
14
14
|
const RiverWithData = ({ screenId, ...otherProps }: Props) => {
|
|
15
|
-
const
|
|
15
|
+
const river = useRivers()?.[screenId];
|
|
16
16
|
const pathname = usePathname();
|
|
17
|
-
const river = rivers[screenId];
|
|
18
17
|
|
|
19
18
|
if (!river) {
|
|
20
19
|
return null;
|
|
21
20
|
}
|
|
22
21
|
|
|
23
|
-
if (!otherProps.screenData) {
|
|
24
|
-
otherProps.screenData = river;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
22
|
return (
|
|
28
23
|
<Component
|
|
29
24
|
screenId={screenId}
|
|
30
25
|
river={river}
|
|
31
26
|
key={isTV() ? pathname : undefined}
|
|
32
27
|
{...otherProps}
|
|
28
|
+
screenData={otherProps.screenData || river}
|
|
33
29
|
/>
|
|
34
30
|
);
|
|
35
31
|
};
|
|
36
32
|
|
|
33
|
+
RiverWithData.displayName = `RiverWithData(${Component.displayName || Component.name})`;
|
|
34
|
+
|
|
37
35
|
return RiverWithData;
|
|
38
36
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
|
|
3
|
+
|
|
4
4
|
import * as zappPipesRedux from "@applicaster/zapp-react-native-redux/ZappPipes";
|
|
5
5
|
import configureStore from "redux-mock-store";
|
|
6
6
|
import thunk from "redux-thunk";
|
|
@@ -8,6 +8,7 @@ import thunk from "redux-thunk";
|
|
|
8
8
|
import { zappPipesDataConnector } from "../index";
|
|
9
9
|
|
|
10
10
|
import { Hero } from "./Hero";
|
|
11
|
+
import { render } from "ejs";
|
|
11
12
|
|
|
12
13
|
const mockStore = configureStore([thunk]);
|
|
13
14
|
|
|
@@ -20,6 +21,15 @@ const initialState = {
|
|
|
20
21
|
},
|
|
21
22
|
};
|
|
22
23
|
|
|
24
|
+
jest.mock(
|
|
25
|
+
"@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
|
|
26
|
+
() => ({
|
|
27
|
+
useIsScreenActive: () => ({
|
|
28
|
+
isScreenActive: true,
|
|
29
|
+
}),
|
|
30
|
+
})
|
|
31
|
+
);
|
|
32
|
+
|
|
23
33
|
const store = mockStore(initialState);
|
|
24
34
|
|
|
25
35
|
const zappPipesSpy = jest
|
|
@@ -31,6 +41,7 @@ const WrappedComponent = zappPipesDataConnector(Hero);
|
|
|
31
41
|
const componentProp = (data) => ({ data });
|
|
32
42
|
|
|
33
43
|
// tests need to be re-written due to TS refactor
|
|
44
|
+
// this test has old usage of enzyme API, that's need to be replaced with @testing-library/react-native
|
|
34
45
|
describe.skip("zappPipesDataConnector", () => {
|
|
35
46
|
beforeEach(() => {
|
|
36
47
|
zappPipesSpy.mockClear();
|
|
@@ -43,7 +54,7 @@ describe.skip("zappPipesDataConnector", () => {
|
|
|
43
54
|
it("loads the provided feed url", () => {
|
|
44
55
|
expect(zappPipesDataConnector).toBeFunction();
|
|
45
56
|
|
|
46
|
-
const wrapper =
|
|
57
|
+
const wrapper = renderWithProviders(
|
|
47
58
|
<WrappedComponent
|
|
48
59
|
component={componentProp(data)}
|
|
49
60
|
feedUrl={feedUrl}
|
|
@@ -51,8 +62,7 @@ describe.skip("zappPipesDataConnector", () => {
|
|
|
51
62
|
/>
|
|
52
63
|
).dive();
|
|
53
64
|
|
|
54
|
-
expect(
|
|
55
|
-
expect(wrapper.first().shallow()).toMatchSnapshot();
|
|
65
|
+
expect(wrapper.toJSON()).toMatchSnapshot();
|
|
56
66
|
|
|
57
67
|
expect(zappPipesSpy).toHaveBeenCalledWith(feedUrl, {
|
|
58
68
|
clearCache: false,
|
|
@@ -71,12 +81,11 @@ describe.skip("zappPipesDataConnector", () => {
|
|
|
71
81
|
it("is a HoC", () => {
|
|
72
82
|
expect(zappPipesDataConnector).toBeFunction();
|
|
73
83
|
|
|
74
|
-
const wrapper =
|
|
84
|
+
const wrapper = renderWithProviders(
|
|
75
85
|
<WrappedComponent component={componentProp(data)} store={store} />
|
|
76
86
|
).dive();
|
|
77
87
|
|
|
78
|
-
expect(
|
|
79
|
-
expect(wrapper.first().shallow()).toMatchSnapshot();
|
|
88
|
+
expect(wrapper.toJSON()).toMatchSnapshot();
|
|
80
89
|
|
|
81
90
|
expect(zappPipesSpy).toHaveBeenCalledWith(data.source, {
|
|
82
91
|
clearCache: false,
|
|
@@ -99,12 +108,11 @@ describe.skip("zappPipesDataConnector", () => {
|
|
|
99
108
|
it("calls clearCache true and silentRefresh with false", () => {
|
|
100
109
|
expect(zappPipesDataConnector).toBeFunction();
|
|
101
110
|
|
|
102
|
-
const wrapper =
|
|
111
|
+
const wrapper = renderWithProviders(
|
|
103
112
|
<WrappedComponent component={{ data, rules }} store={store} />
|
|
104
113
|
).dive();
|
|
105
114
|
|
|
106
|
-
expect(
|
|
107
|
-
expect(wrapper.first().shallow()).toMatchSnapshot();
|
|
115
|
+
expect(wrapper.toJSON()).toMatchSnapshot();
|
|
108
116
|
|
|
109
117
|
expect(zappPipesSpy).toHaveBeenCalledWith(data.source, {
|
|
110
118
|
clearCache: true,
|
|
@@ -123,12 +131,11 @@ describe.skip("zappPipesDataConnector", () => {
|
|
|
123
131
|
it("is a HoC", () => {
|
|
124
132
|
expect(zappPipesDataConnector).toBeFunction();
|
|
125
133
|
|
|
126
|
-
const wrapper =
|
|
134
|
+
const wrapper = renderWithProviders(
|
|
127
135
|
<WrappedComponent component={componentProp(data)} store={store} />
|
|
128
136
|
).dive();
|
|
129
137
|
|
|
130
|
-
expect(
|
|
131
|
-
expect(wrapper.first().shallow()).toMatchSnapshot();
|
|
138
|
+
expect(wrapper.toJSON()).toMatchSnapshot();
|
|
132
139
|
|
|
133
140
|
expect(zappPipesSpy).toHaveBeenCalledWith(
|
|
134
141
|
"applicaster://fetchData?type=APPLICASTER_COLLECTION&collectionId=1234",
|
|
@@ -146,11 +153,11 @@ describe.skip("zappPipesDataConnector", () => {
|
|
|
146
153
|
it("is a HoC", () => {
|
|
147
154
|
expect(zappPipesDataConnector).toBeFunction();
|
|
148
155
|
|
|
149
|
-
const wrapper =
|
|
156
|
+
const wrapper = renderWithProviders(
|
|
150
157
|
<WrappedComponent component={componentProp(data)} store={store} />
|
|
151
158
|
).dive();
|
|
152
159
|
|
|
153
|
-
expect(
|
|
160
|
+
expect(wrapper.toJSON()).toMatchSnapshot();
|
|
154
161
|
expect(wrapper.first().shallow()).toMatchSnapshot();
|
|
155
162
|
|
|
156
163
|
expect(zappPipesSpy).toHaveBeenCalledWith(
|
|
@@ -171,11 +178,11 @@ describe.skip("zappPipesDataConnector", () => {
|
|
|
171
178
|
};
|
|
172
179
|
|
|
173
180
|
it("calls loadPipesData with favourites option", () => {
|
|
174
|
-
const wrapper =
|
|
181
|
+
const wrapper = renderWithProviders(
|
|
175
182
|
<WrappedComponent component={componentProp(data)} store={store} />
|
|
176
183
|
).dive();
|
|
177
184
|
|
|
178
|
-
expect(
|
|
185
|
+
expect(wrapper.toJSON()).toMatchSnapshot();
|
|
179
186
|
expect(wrapper.first().shallow()).toMatchSnapshot();
|
|
180
187
|
|
|
181
188
|
expect(zappPipesSpy).toHaveBeenCalledWith("FAVOURITES", {
|
|
@@ -188,7 +195,7 @@ describe.skip("zappPipesDataConnector", () => {
|
|
|
188
195
|
|
|
189
196
|
describe("getDataSourceUrl", () => {
|
|
190
197
|
it("returns null if data prop is empty", () => {
|
|
191
|
-
const wrapper =
|
|
198
|
+
const wrapper = render(
|
|
192
199
|
<WrappedComponent component={componentProp({})} store={store} />
|
|
193
200
|
).dive();
|
|
194
201
|
|
|
@@ -199,7 +206,7 @@ describe.skip("zappPipesDataConnector", () => {
|
|
|
199
206
|
});
|
|
200
207
|
|
|
201
208
|
it("returns null if data.source is falsy", () => {
|
|
202
|
-
const wrapper =
|
|
209
|
+
const wrapper = renderWithProviders(
|
|
203
210
|
<WrappedComponent
|
|
204
211
|
component={componentProp({ source: null })}
|
|
205
212
|
store={store}
|
|
@@ -222,7 +229,7 @@ describe.skip("zappPipesDataConnector", () => {
|
|
|
222
229
|
it("reloads the app's datasource", () => {
|
|
223
230
|
store.clearActions();
|
|
224
231
|
|
|
225
|
-
const wrapper =
|
|
232
|
+
const wrapper = renderWithProviders(
|
|
226
233
|
<WrappedComponent component={componentProp(data)} store={store} />
|
|
227
234
|
).dive();
|
|
228
235
|
|
|
@@ -251,7 +258,7 @@ describe.skip("zappPipesDataConnector", () => {
|
|
|
251
258
|
entry: [{ id: "test-entry", title: "test entry" }],
|
|
252
259
|
}));
|
|
253
260
|
|
|
254
|
-
const wrapper =
|
|
261
|
+
const wrapper = renderWithProviders(
|
|
255
262
|
<WrappedComponent
|
|
256
263
|
component={{ data, getStaticComponentFeed }}
|
|
257
264
|
store={store}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
/// <reference types="@applicaster/applicaster-types" />
|
|
2
2
|
/// <reference types="@applicaster/zapp-react-native-ui-components" />
|
|
3
3
|
import React, { useEffect, useMemo } from "react";
|
|
4
|
-
import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
|
|
5
4
|
|
|
6
5
|
import * as R from "ramda";
|
|
7
6
|
import { Platform } from "react-native";
|
|
8
7
|
import Url from "url";
|
|
9
|
-
import { ENDPOINT_TAGS } from "@applicaster/zapp-react-native-utils/types";
|
|
10
8
|
import { favoritesListener } from "@applicaster/zapp-react-native-bridge/Favorites";
|
|
11
9
|
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
|
|
12
10
|
import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
|
|
@@ -21,12 +19,7 @@ import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-compon
|
|
|
21
19
|
import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
|
|
22
20
|
|
|
23
21
|
import { isVerticalListOrGrid } from "./utils";
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
findEndpointForURL,
|
|
27
|
-
HTTP_METHODS,
|
|
28
|
-
} from "@applicaster/zapp-pipes-v2-client";
|
|
29
|
-
import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
|
|
22
|
+
import { subscribeForUrlContextKeyChanges } from "@applicaster/zapp-pipes-v2-client";
|
|
30
23
|
|
|
31
24
|
type Props = {
|
|
32
25
|
component: ZappUIComponent;
|
|
@@ -237,7 +230,8 @@ export function zappPipesDataConnector(
|
|
|
237
230
|
const entryContext =
|
|
238
231
|
(shouldUseNestedContext && screenContextData?.nested?.entry
|
|
239
232
|
? screenContextData?.nested?.entry
|
|
240
|
-
: screenContextData?.entry) ||
|
|
233
|
+
: (screenContextData?.entry?.payload ?? screenContextData?.entry)) ||
|
|
234
|
+
{};
|
|
241
235
|
|
|
242
236
|
const screenContext =
|
|
243
237
|
(shouldUseNestedContext && screenContextData?.nested?.screen
|
|
@@ -300,27 +294,7 @@ export function zappPipesDataConnector(
|
|
|
300
294
|
return addListener(reloadData);
|
|
301
295
|
}
|
|
302
296
|
} else {
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
const endpointURL = findEndpointForURL(
|
|
306
|
-
dataSourceUrl,
|
|
307
|
-
pipesEndpoints,
|
|
308
|
-
HTTP_METHODS.GET
|
|
309
|
-
);
|
|
310
|
-
|
|
311
|
-
const endpoint = pipesEndpoints?.[endpointURL];
|
|
312
|
-
|
|
313
|
-
if (endpoint?.tags?.includes(ENDPOINT_TAGS.observe_storage)) {
|
|
314
|
-
const subscriptions: (() => void)[] = endpoint.context_obj.map(
|
|
315
|
-
(data: Record<string, any>) => {
|
|
316
|
-
const { namespace, key } = getNamespaceAndKey(data.key);
|
|
317
|
-
|
|
318
|
-
return localStorage.addListener({ key, namespace }, reloadData);
|
|
319
|
-
}
|
|
320
|
-
);
|
|
321
|
-
|
|
322
|
-
return () => subscriptions.forEach((listener) => listener());
|
|
323
|
-
}
|
|
297
|
+
return subscribeForUrlContextKeyChanges(dataSourceUrl, {}, reloadData);
|
|
324
298
|
}
|
|
325
299
|
}, [dataSourceUrl, reloadData]);
|
|
326
300
|
|
package/package.json
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applicaster/zapp-react-native-ui-components",
|
|
3
|
-
"version": "13.0.0-alpha.
|
|
3
|
+
"version": "13.0.0-alpha.5928753399",
|
|
4
4
|
"description": "Applicaster Zapp React Native ui components for the Quick Brick App",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
7
7
|
"scripts": {
|
|
8
|
-
"test": "jest -w=2",
|
|
9
8
|
"build": "echo skipping hybrid typescript build for now"
|
|
10
9
|
},
|
|
11
10
|
"publishConfig": {
|
|
@@ -29,15 +28,13 @@
|
|
|
29
28
|
},
|
|
30
29
|
"homepage": "https://github.com/applicaster/quickbrick#readme",
|
|
31
30
|
"devDependencies": {
|
|
32
|
-
"@types/react": "17.0.2",
|
|
33
|
-
"@types/react-native": "0.69.6",
|
|
34
31
|
"redux-mock-store": "^1.5.3"
|
|
35
32
|
},
|
|
36
33
|
"dependencies": {
|
|
37
|
-
"@applicaster/applicaster-types": "13.0.0-alpha.
|
|
38
|
-
"@applicaster/zapp-react-native-bridge": "13.0.0-alpha.
|
|
39
|
-
"@applicaster/zapp-react-native-redux": "13.0.0-alpha.
|
|
40
|
-
"@applicaster/zapp-react-native-utils": "13.0.0-alpha.
|
|
34
|
+
"@applicaster/applicaster-types": "13.0.0-alpha.5928753399",
|
|
35
|
+
"@applicaster/zapp-react-native-bridge": "13.0.0-alpha.5928753399",
|
|
36
|
+
"@applicaster/zapp-react-native-redux": "13.0.0-alpha.5928753399",
|
|
37
|
+
"@applicaster/zapp-react-native-utils": "13.0.0-alpha.5928753399",
|
|
41
38
|
"promise": "^8.3.0",
|
|
42
39
|
"react-router-native": "^5.1.2",
|
|
43
40
|
"url": "^0.11.0",
|
|
@@ -46,10 +43,9 @@
|
|
|
46
43
|
"peerDependencies": {
|
|
47
44
|
"@applicaster/zapp-pipes-v2-client": "*",
|
|
48
45
|
"@react-native-community/netinfo": "*",
|
|
49
|
-
"@types/node": "*",
|
|
50
46
|
"immer": "*",
|
|
51
|
-
"react": "
|
|
52
|
-
"react-native": "
|
|
47
|
+
"react": "*",
|
|
48
|
+
"react-native": "*",
|
|
53
49
|
"react-native-safe-area-context": "*",
|
|
54
50
|
"react-native-svg": "*",
|
|
55
51
|
"uglify-js": "*",
|
package/tsconfig.json
CHANGED