@applicaster/quick-brick-core 13.0.0-alpha.5790181722 → 13.0.0-alpha.5814285061

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/ModalProvider/ModalBottomSheet/DraggableBottomSheet/index.tsx +0 -1
  2. package/App/ModalProvider/ModalBottomSheet/ModalBottomSheetFrame.tsx +20 -8
  3. package/App/ModalProvider/ModalBottomSheet/index.tsx +14 -29
  4. package/App/ModalProvider/ModalPresenter.tsx +1 -1
  5. package/App/ModalProvider/index.tsx +5 -1
  6. package/package.json +8 -8
package/App/ModalProvider/ModalBottomSheet/DraggableBottomSheet/index.tsx CHANGED
@@ -300,7 +300,6 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
300
300
  simultaneousHandlers={this.drawer}
301
301
  >
302
302
  <Animated.ScrollView
303
- style={{ marginBottom: this._snapPoints.top }}
304
303
  bounces={false}
305
304
  onScrollBeginDrag={this._onRegisterLastScroll}
306
305
  scrollEventThrottle={1}
package/App/ModalProvider/ModalBottomSheet/ModalBottomSheetFrame.tsx CHANGED
@@ -1,21 +1,20 @@
1
1
  import React from "react";
2
- import { StyleSheet, View } from "react-native";
2
+ import { LayoutChangeEvent, StyleSheet, View } from "react-native";
3
3
 
4
4
  import { Handle, HandleProps } from "./Handle";
5
5
  import { DraggableBottomSheet } from "./DraggableBottomSheet";
6
+ import { SafeAreaView } from "react-native-safe-area-context";
6
7
 
7
8
  type Props = {
8
9
  children: React.ReactChild;
9
10
  backgroundColor: string;
10
11
  cornerRadius: number;
11
- contentHeight: number;
12
12
  maxHeight: number;
13
13
  maxWidth: number;
14
14
  visible: boolean;
15
15
  handleProps: HandleProps;
16
16
  closeToast: () => void;
17
17
  dimensions: { width: number; height: number };
18
- paddingBottom: number;
19
18
  };
20
19
 
21
20
  const styles = StyleSheet.create({
@@ -34,9 +33,7 @@ export function ModalBottomSheetFrame(props: Props) {
34
33
  maxWidth,
35
34
  visible,
36
35
  handleProps,
37
- contentHeight,
38
36
  dimensions,
39
- paddingBottom,
40
37
  } = props;
41
38
 
42
39
  const extraStyles = {
@@ -44,13 +41,22 @@ export function ModalBottomSheetFrame(props: Props) {
44
41
  borderTopLeftRadius: cornerRadius,
45
42
  borderTopRightRadius: cornerRadius,
46
43
  maxHeight,
47
- paddingBottom,
48
44
  maxWidth: Math.min(Number(maxWidth), dimensions.width),
49
45
  };
50
46
 
47
+ const [height, setHeight] = React.useState(0);
48
+
49
+ const onLayout = (event: LayoutChangeEvent) => {
50
+ const { height } = event.nativeEvent.layout;
51
+
52
+ if (height !== 0) {
53
+ setHeight((oldHeight) => oldHeight || height);
54
+ }
55
+ };
56
+
51
57
  return (
52
58
  <DraggableBottomSheet
53
- sheetHeight={contentHeight}
59
+ sheetHeight={height}
54
60
  visible={visible}
55
61
  dismiss={props.closeToast}
56
62
  hasHeader={handleProps.enabled}
@@ -58,7 +64,13 @@ export function ModalBottomSheetFrame(props: Props) {
58
64
  maxWidth={maxWidth}
59
65
  {...dimensions}
60
66
  >
61
- <View style={[styles.toastFrameContainer, extraStyles]}>{children}</View>
67
+ <SafeAreaView
68
+ edges={["left", "right", "bottom"]}
69
+ style={[styles.toastFrameContainer, extraStyles]}
70
+ onLayout={onLayout}
71
+ >
72
+ <View>{children}</View>
73
+ </SafeAreaView>
62
74
  </DraggableBottomSheet>
63
75
  );
64
76
  }
package/App/ModalProvider/ModalBottomSheet/index.tsx CHANGED
@@ -3,7 +3,7 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
3
3
  import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
4
4
  import { useSafeAreaInsets } from "react-native-safe-area-context";
5
5
 
6
- import React, { useCallback, useEffect, useState } from "react";
6
+ import React, { useEffect, useState } from "react";
7
7
  import { Keyboard, StyleSheet, View } from "react-native";
8
8
 
9
9
  import { Overlay } from "./Overlay";
@@ -38,37 +38,29 @@ export function ModalBottomSheet(props: Props) {
38
38
  const theme = useTheme<BaseThemePropertiesMobile>();
39
39
  const navigator = useNavigation();
40
40
  const dimensions = useDimensions();
41
- const [sheetHeight, setSheetHeight] = useState(0);
42
41
  const [visible, setVisible] = useState(true);
43
42
  const dismiss = () => setVisible(false);
44
43
  const { bottom = defaultBottomOffset } = useSafeAreaInsets();
45
44
 
46
- const bottomOffset = bottom + dimensions.statusBarHeight;
45
+ const bottomOffset = bottom;
47
46
 
48
47
  const {
49
48
  modal_bottom_sheet_background_color: sheetBackgroundColor,
50
49
  modal_bottom_sheet_overlay_color: sheetOverlayColor,
51
50
  modal_bottom_sheet_top_corner_radius: sheetCornerRadius,
52
- modal_bottom_sheet_max_height: sheetMaxHeight,
53
51
  modal_bottom_sheet_handle: sheetHandleEnabled,
54
52
  modal_bottom_sheet_handle_color: sheetHandleColor,
55
53
  modal_bottom_sheet_handle_focus_color: sheetHandleFocusedColor,
56
54
  modal_bottom_sheet_tablet_max_width: sheetTabletMaxWidth,
57
55
  } = theme;
58
56
 
57
+ const sheetMaxHeight = dimensions.height * 0.75; // Set a default max height
58
+
59
59
  const {
60
60
  ModalBottomSheetContent = ModalComponent,
61
61
  modalBottomSheetContentProps,
62
62
  } = props;
63
63
 
64
- const onLayout = useCallback(({ nativeEvent }) => {
65
- const calculatedHeight = nativeEvent?.layout?.height;
66
-
67
- if (calculatedHeight > 0 && sheetHeight === 0) {
68
- setSheetHeight(Math.min(calculatedHeight, sheetMaxHeight));
69
- }
70
- }, []);
71
-
72
64
  useEffect(() => {
73
65
  Keyboard.dismiss();
74
66
  }, []);
@@ -77,8 +69,6 @@ export function ModalBottomSheet(props: Props) {
77
69
 
78
70
  const maxWidth = isTablet ? sheetTabletMaxWidth : dimensions.width;
79
71
 
80
- const modalVisible = visible && sheetHeight > 0;
81
-
82
72
  return (
83
73
  <View style={styles.container}>
84
74
  <Overlay
@@ -89,12 +79,10 @@ export function ModalBottomSheet(props: Props) {
89
79
  <ModalBottomSheetFrame
90
80
  backgroundColor={sheetBackgroundColor}
91
81
  cornerRadius={sheetCornerRadius}
92
- contentHeight={sheetHeight + bottomOffset}
93
82
  maxHeight={sheetMaxHeight + bottomOffset}
94
- paddingBottom={bottomOffset}
95
83
  maxWidth={maxWidth}
96
84
  dimensions={dimensions}
97
- visible={modalVisible}
85
+ visible={visible}
98
86
  closeToast={dismiss}
99
87
  handleProps={{
100
88
  enabled: sheetHandleEnabled,
@@ -102,18 +90,15 @@ export function ModalBottomSheet(props: Props) {
102
90
  focusedColor: sheetHandleFocusedColor,
103
91
  }}
104
92
  >
105
- <View onLayout={onLayout}>
106
- <ModalBottomSheetContent
107
- width={
108
- Math.min(sheetTabletMaxWidth, dimensions.width) ||
109
- dimensions.width
110
- }
111
- maxHeight={sheetMaxHeight}
112
- {...modalBottomSheetContentProps}
113
- dismiss={dismiss}
114
- currentRoute={navigator.currentRoute}
115
- />
116
- </View>
93
+ <ModalBottomSheetContent
94
+ width={
95
+ Math.min(sheetTabletMaxWidth, dimensions.width) || dimensions.width
96
+ }
97
+ maxHeight={sheetMaxHeight}
98
+ {...modalBottomSheetContentProps}
99
+ dismiss={dismiss}
100
+ currentRoute={navigator.currentRoute}
101
+ />
117
102
  </ModalBottomSheetFrame>
118
103
  </View>
119
104
  );
package/App/ModalProvider/ModalPresenter.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from "react";
2
2
  import { Modal, ModalProps } from "react-native";
3
3
 
4
- type Props = {
4
+ type Props = ModalProps & {
5
5
  children: React.ReactChild;
6
6
  ModalContainer?: React.FC<ModalProps> | React.ComponentClass<ModalProps>;
7
7
  visible: boolean;
package/App/ModalProvider/index.tsx CHANGED
@@ -40,7 +40,11 @@ export function ModalProvider() {
40
40
  return (
41
41
  <PathnameContext.Provider value={pathname}>
42
42
  <ScreenContextProvider pathname={pathname}>
43
- <ModalPresenter visible={shouldShowModal} {...modalState?.options}>
43
+ <ModalPresenter
44
+ visible={shouldShowModal}
45
+ {...modalState?.options}
46
+ statusBarTranslucent
47
+ >
44
48
  <ModalChildrenWrapper>
45
49
  <ModalContent modalScreenProps={modalScreenProps} />
46
50
  </ModalChildrenWrapper>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@applicaster/quick-brick-core",
3
- "version": "13.0.0-alpha.5790181722",
3
+ "version": "13.0.0-alpha.5814285061",
4
4
  "description": "Core package for Applicaster's Quick Brick App",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
@@ -28,13 +28,13 @@
28
28
  },
29
29
  "homepage": "https://github.com/applicaster/quickbrick#readme",
30
30
  "dependencies": {
31
- "@applicaster/applicaster-types": "13.0.0-alpha.5790181722",
32
- "@applicaster/quick-brick-core-plugins": "13.0.0-alpha.5790181722",
33
- "@applicaster/zapp-pipes-v2-client": "13.0.0-alpha.5790181722",
34
- "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.5790181722",
35
- "@applicaster/zapp-react-native-redux": "13.0.0-alpha.5790181722",
36
- "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.5790181722",
37
- "@applicaster/zapp-react-native-utils": "13.0.0-alpha.5790181722",
31
+ "@applicaster/applicaster-types": "13.0.0-alpha.5814285061",
32
+ "@applicaster/quick-brick-core-plugins": "13.0.0-alpha.5814285061",
33
+ "@applicaster/zapp-pipes-v2-client": "13.0.0-alpha.5814285061",
34
+ "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.5814285061",
35
+ "@applicaster/zapp-react-native-redux": "13.0.0-alpha.5814285061",
36
+ "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.5814285061",
37
+ "@applicaster/zapp-react-native-utils": "13.0.0-alpha.5814285061",
38
38
  "atob": "^2.1.2",
39
39
  "axios": "^0.28.0",
40
40
  "btoa": "^1.2.1",