@applicaster/zapp-react-native-app 12.0.0-alpha.5035843303 → 12.0.0-alpha.5050333009

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.
Files changed (6) hide show
  1. package/App/InteractionManager/index.js +2 -2
  2. package/App/Layout/__tests__/index.test.ts +7 -0
  3. package/App/Layout/index.tsx +110 -83
  4. package/App/__tests__/app.test.js +5 -0
  5. package/package.json +8 -9
  6. package/tsconfig.json +11 -0
package/App/InteractionManager/index.js CHANGED
@@ -8,7 +8,7 @@ import {
8
8
  } from "@applicaster/zapp-react-native-bridge/QuickBrick";
9
9
  import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
10
10
  import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
11
- import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
11
+ import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
12
12
 
13
13
  type Props = {
14
14
  children: React.CElement,
@@ -19,7 +19,7 @@ const getHome = R.compose(R.find(R.propEq("home", true)), R.values);
19
19
  const InteractionManagerComponent = (props: Props) => {
20
20
  const { children } = props;
21
21
  const { sendHardwareBackButtonClickEvent } = useAnalytics();
22
- const { rivers } = usePickFromState(["rivers"]);
22
+ const rivers = useRivers();
23
23
  const navigator = useNavigation();
24
24
 
25
25
  const isHomeScreen = () => {
package/App/Layout/__tests__/index.test.ts ADDED
@@ -0,0 +1,7 @@
1
+ describe("Layout", () => {
2
+ it.todo("should match snapshot when appReady is true");
3
+ it.todo("should not render transitioner with screen when appReady is false");
4
+ it.todo("should render menu when showMenu is true");
5
+ it.todo("should render VideoModal when visible & VideoModal is true");
6
+ it.todo("should render ZappHooksModal");
7
+ });
package/App/Layout/index.tsx CHANGED
@@ -3,12 +3,15 @@ import * as R from "ramda";
3
3
 
4
4
  import { View } from "react-native";
5
5
 
6
- import { getNavigationProps } from "@applicaster/zapp-react-native-utils/navigationUtils";
7
6
  import {
7
+ getNavigationProps,
8
+ resolveNavigationPlugin,
9
+ } from "@applicaster/zapp-react-native-utils/navigationUtils";
10
+ import {
11
+ useDimensions,
8
12
  useGetBottomTabBarHeight,
13
+ useNavbarState,
9
14
  useNavigation,
10
- useDimensions,
11
- useIsNavBarVisible,
12
15
  } from "@applicaster/zapp-react-native-utils/reactHooks";
13
16
  import { Transitioner } from "@applicaster/zapp-react-native-ui-components/Components/Transitioner";
14
17
  import { transitionConfig } from "@applicaster/zapp-react-native-ui-components/Components/Transitioner/config";
@@ -20,31 +23,30 @@ import { getNavigationPluginModule } from "./layoutHelpers";
20
23
  import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
21
24
  import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
22
25
 
23
- import { MenuToggleContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
26
+ import {
27
+ useMenuToggleContext,
28
+ MenuToggleContextType,
29
+ } from "@applicaster/zapp-react-native-ui-components/Contexts/MenuToggleContext";
24
30
  import { VideoModal } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal";
25
31
  import { withDimensionsProvider } from "@applicaster/zapp-react-native-utils/dimensionsProvider";
32
+ import {
33
+ withModalAnimationProvider,
34
+ useModalAnimationContext,
35
+ } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
26
36
 
27
37
  import { ZappHooksModal } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal";
28
- import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
29
38
  import { useListenEventBusEvent } from "@applicaster/zapp-react-native-utils/reactHooks/useListenEventBusEvent";
30
- import { PushTopicManager, PushTopicManagerConsts, PushTopicManagerEvents } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
31
-
32
- type Props = {
33
- children: React.ReactNode;
34
- toggleMenu: any;
35
- setToggleMenu: () => void;
36
- openMenu: any;
37
- setOpenMenu: () => void;
38
- closeMenu: any;
39
- setCloseMenu: () => void;
40
- navigator: QuickBrickAppNavigator;
41
- };
39
+ import {
40
+ PushTopicManager,
41
+ PushTopicManagerConsts,
42
+ PushTopicManagerEvents,
43
+ } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
42
44
 
43
45
  const containerStyle = {
44
46
  height: "100%",
45
47
  };
46
48
 
47
- const LayoutWithMenu = (props: Props) => {
49
+ const LayoutWithMenu = () => {
48
50
  const {
49
51
  plugins,
50
52
  appState: { appReady },
@@ -57,47 +59,68 @@ const LayoutWithMenu = (props: Props) => {
57
59
  setOpenMenu,
58
60
  closeMenu,
59
61
  setCloseMenu,
60
- } = props;
62
+ } = useMenuToggleContext();
61
63
 
62
64
  const dimensions = useDimensions("screen", { fullDimensions: true });
63
65
  const isRTL = useIsRTL();
64
-
65
66
  const navigator = useNavigation();
66
67
  const bottomTabBarHeight = useGetBottomTabBarHeight();
67
-
68
- const {
69
- activeRiver,
70
- currentRoute,
71
- screenData,
72
- videoModalState,
73
- isVideoModalDocked,
74
- videoModalState: { visible },
75
- } = navigator;
76
-
77
- const isNavBarVisible = useIsNavBarVisible();
78
68
  const { title } = useNavbarState();
79
69
 
80
- const NavBar = React.useMemo(
81
- () => getNavigationPluginModule("nav_bar", activeRiver, plugins),
82
- []
83
- );
70
+ const { activeRiver, videoModalState, isVideoModalDocked } = navigator;
71
+
72
+ const plugin = resolveNavigationPlugin({
73
+ category: "menu",
74
+ navigations: activeRiver?.navigations,
75
+ plugins,
76
+ });
84
77
 
85
78
  const Menu = React.useMemo(
86
- () => getNavigationPluginModule("menu", activeRiver, plugins),
87
- []
79
+ () =>
80
+ getNavigationPluginModule(
81
+ "menu",
82
+ activeRiver,
83
+ plugins
84
+ ) as React.ComponentType<
85
+ MobileNavBarPluginProps &
86
+ MenuToggleContextType & {
87
+ navigator: QuickBrickAppNavigator;
88
+ }
89
+ >,
90
+ [activeRiver]
88
91
  );
89
92
 
93
+ const { isActiveGesture } = useModalAnimationContext();
94
+
95
+ /** BTB shown when videoModalState - visible & minimized, maximized & animation gesture is active
96
+ * otherwise hidden if videoModalState - visible
97
+ * also check isMenuVisible
98
+ */
90
99
  const showMenu = React.useMemo(
91
- () => isMenuVisible(navigator.currentRoute, navigator.screenData),
92
- [navigator.currentRoute]
100
+ () =>
101
+ ((videoModalState.visible &&
102
+ (videoModalState.mode === "MINIMIZED" ||
103
+ (videoModalState.mode === "MAXIMIZED" && isActiveGesture))) ||
104
+ !videoModalState.visible) &&
105
+ isMenuVisible(navigator.currentRoute, navigator.screenData),
106
+ [
107
+ videoModalState.visible,
108
+ videoModalState.mode,
109
+ navigator.currentRoute,
110
+ isActiveGesture,
111
+ ]
93
112
  );
94
113
 
114
+ const isBottomTabsPlugin = plugin?.identifier === "quick-brick-bottom-tabs";
115
+
116
+ const shouldApplyStyleForBottomTabs = showMenu && isBottomTabsPlugin;
117
+
95
118
  const contentStyle = React.useMemo(
96
119
  () => ({
97
- ...(showMenu
120
+ ...(shouldApplyStyleForBottomTabs
98
121
  ? {
99
- paddingBottom: bottomTabBarHeight,
100
- }
122
+ paddingBottom: bottomTabBarHeight,
123
+ }
101
124
  : {}),
102
125
  ...containerStyle,
103
126
  opacity: videoModalState.visible && !isVideoModalDocked ? 0 : 1,
@@ -105,37 +128,31 @@ const LayoutWithMenu = (props: Props) => {
105
128
  [bottomTabBarHeight, videoModalState.visible, isVideoModalDocked, showMenu]
106
129
  );
107
130
 
108
- const navBarProps = React.useMemo(
109
- () => ({
110
- setToggleMenu,
111
- toggleMenu,
112
- openMenu,
113
- setOpenMenu,
114
- closeMenu,
115
- setCloseMenu,
116
- navigator,
117
- ...getNavigationProps({ navigator, title, category: "nav_bar" }),
118
- }),
119
- [navigator.currentRoute]
120
- );
121
-
122
- const menuProps = {
123
- setToggleMenu: setToggleMenu,
124
- toggleMenu: toggleMenu,
125
- openMenu: openMenu,
126
- setOpenMenu: setOpenMenu,
127
- closeMenu: closeMenu,
128
- setCloseMenu: setCloseMenu,
129
- dimensions: { window: dimensions },
130
- navigator: navigator,
131
- ...getNavigationProps({
131
+ const menuProps = React.useMemo(() => {
132
+ const navigationProps = getNavigationProps({
132
133
  navigator,
133
134
  title,
134
135
  category: "menu",
135
- }),
136
- bottomTabBarHeight,
137
- isRTL,
138
- };
136
+ }) ?? {
137
+ selected: "",
138
+ title: "",
139
+ home: false,
140
+ rules: {} as ZappNavBarRules,
141
+ assets: {} as ZappNavBarAssets,
142
+ styles: {},
143
+ nav_items: [] as NavBarItem[],
144
+ };
145
+
146
+ const props = {
147
+ ...navigationProps,
148
+ dimensions: { window: dimensions },
149
+ bottomTabBarHeight,
150
+ isRTL,
151
+ navigator,
152
+ };
153
+
154
+ return { ...props, id: navigator.currentRoute };
155
+ }, [dimensions, isRTL, bottomTabBarHeight, navigator.currentRoute]);
139
156
 
140
157
  useListenEventBusEvent(
141
158
  PushTopicManagerConsts.PushTopicManagerSubscriptionID,
@@ -144,37 +161,47 @@ const LayoutWithMenu = (props: Props) => {
144
161
  PushTopicManager.getInstance().routeEvent
145
162
  );
146
163
 
164
+ React.useEffect(() => {
165
+ // getting tags right after subscription
166
+ PushTopicManager.getInstance().prepareTags();
167
+ }, []);
168
+
147
169
  return (
148
170
  <>
149
171
  {appReady ? (
150
172
  <View style={contentStyle}>
151
173
  <Transitioner
152
174
  transitionConfig={transitionConfig}
153
- contentStyle={showMenu ? contentStyle : {}}
175
+ contentStyle={{}}
154
176
  isRTL={isRTL}
155
177
  >
156
178
  <Screen
157
179
  key={navigator.currentRoute}
158
- NavBar={NavBar}
159
- navBarProps={navBarProps}
160
- Menu={Menu}
161
- menuProps={menuProps}
162
- pathname={currentRoute}
163
- screenData={screenData}
164
- isNavBarVisible={isNavBarVisible}
180
+ pathname={navigator.currentRoute} // required by TransitionerComponent
181
+ screenData={navigator.data} // required by TransitionerComponent
165
182
  />
166
183
  </Transitioner>
167
184
  </View>
168
185
  ) : null}
169
- {showMenu && <Menu {...menuProps} />}
170
- {VideoModal && visible && <VideoModal />}
171
-
186
+ {showMenu && (
187
+ <Menu
188
+ {...menuProps}
189
+ setToggleMenu={setToggleMenu}
190
+ toggleMenu={toggleMenu}
191
+ openMenu={openMenu}
192
+ setOpenMenu={setOpenMenu}
193
+ closeMenu={closeMenu}
194
+ setCloseMenu={setCloseMenu}
195
+ />
196
+ )}
197
+ {/* depends on active river. @TODO move below screen context */}
198
+ {VideoModal && videoModalState.visible && <VideoModal />}
172
199
  <ZappHooksModal />
173
200
  </>
174
201
  );
175
202
  };
176
203
 
177
204
  export const Layout = R.compose(
178
- MenuToggleContext.withConsumer,
179
- withDimensionsProvider
205
+ withDimensionsProvider,
206
+ withModalAnimationProvider
180
207
  )(LayoutWithMenu);
package/App/__tests__/app.test.js CHANGED
@@ -54,6 +54,11 @@ jest.mock(
54
54
  () => () => null
55
55
  );
56
56
 
57
+ jest.mock(
58
+ "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation",
59
+ () => ({ withModalAnimationProvider: () => null })
60
+ );
61
+
57
62
  jest.mock("react-native-safe-area-context", () => ({
58
63
  SafeAreaProvider: jest.fn(
59
64
  () =>
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@applicaster/zapp-react-native-app",
3
- "version": "12.0.0-alpha.5035843303",
3
+ "version": "12.0.0-alpha.5050333009",
4
4
  "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
5
5
  "main": "index.js",
6
6
  "scripts": {
7
7
  "test": "jest -w=2",
8
- "flow-types": "node_modules/.bin/flow-copy-source -v -i '**/__tests__**' . ."
8
+ "build": "echo 'skipping ts build for core packages'"
9
9
  },
10
10
  "repository": {
11
11
  "type": "git",
@@ -28,12 +28,12 @@
28
28
  },
29
29
  "homepage": "https://github.com/applicaster/quickbrick#readme",
30
30
  "dependencies": {
31
- "@applicaster/quick-brick-core": "12.0.0-alpha.5035843303",
32
- "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5035843303",
33
- "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5035843303",
34
- "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.5035843303",
35
- "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5035843303",
36
- "axios": "^0.21.2",
31
+ "@applicaster/quick-brick-core": "12.0.0-alpha.5050333009",
32
+ "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5050333009",
33
+ "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5050333009",
34
+ "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.5050333009",
35
+ "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5050333009",
36
+ "axios": "^0.28.0",
37
37
  "camelize": "^1.0.0",
38
38
  "query-string": "7.1.3",
39
39
  "react-router-native": "5.1.2",
@@ -44,7 +44,6 @@
44
44
  "react-native": "0.68.6"
45
45
  },
46
46
  "devDependencies": {
47
- "@applicaster/zapp-react-native-flow-types": "1.5.0",
48
47
  "nock": "^10.0.0",
49
48
  "redux-mock-store": "^1.5.3"
50
49
  },
package/tsconfig.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "extends": "../../tsconfig.base.json",
3
+
4
+ "compilerOptions": {
5
+ "outDir": "./lib",
6
+ "rootDir": "./src"
7
+ },
8
+
9
+ "include": ["src/**/*"],
10
+ "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
11
+ }