@applicaster/quick-brick-core 13.0.0-alpha.2957047383 → 13.0.0-alpha.3013095924

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 +68 -10
  3. package/App/ModalProvider/ModalBottomSheet/index.tsx +15 -39
  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,32 @@
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 {
7
+ SafeAreaView,
8
+ useSafeAreaInsets,
9
+ } from "react-native-safe-area-context";
10
+ import {
11
+ isAndroidPlatform,
12
+ isAndroidVersionAtLeast,
13
+ platformSelect,
14
+ } from "@applicaster/zapp-react-native-utils/reactUtils";
6
15
 
7
16
  type Props = {
8
17
  children: React.ReactChild;
9
18
  backgroundColor: string;
10
19
  cornerRadius: number;
11
- contentHeight: number;
12
20
  maxHeight: number;
13
21
  maxWidth: number;
14
22
  visible: boolean;
15
23
  handleProps: HandleProps;
16
24
  closeToast: () => void;
17
- dimensions: { width: number; height: number };
18
- paddingBottom: number;
25
+ dimensions: {
26
+ statusBarHeight: any;
27
+ width: number;
28
+ height: number;
29
+ };
19
30
  };
20
31
 
21
32
  const styles = StyleSheet.create({
@@ -25,6 +36,34 @@ const styles = StyleSheet.create({
25
36
  },
26
37
  });
27
38
 
39
+ const defaultBottomOffset = platformSelect({
40
+ ios: 34,
41
+ android: 0,
42
+ });
43
+
44
+ const getSheetHeight = ({ height, bottomOffset, maxHeight, dimensions }) => {
45
+ return platformSelect({
46
+ ios: height - bottomOffset,
47
+ default:
48
+ !isAndroidVersionAtLeast(35) && isAndroidPlatform()
49
+ ? (height || maxHeight) - (bottomOffset + dimensions.statusBarHeight)
50
+ : height || maxHeight,
51
+ });
52
+ };
53
+
54
+ const useGetSheetHeight = (height, maxHeight, dimensions) => {
55
+ const { bottom = defaultBottomOffset } = useSafeAreaInsets();
56
+
57
+ const bottomOffset = bottom;
58
+
59
+ return getSheetHeight({
60
+ height,
61
+ bottomOffset,
62
+ maxHeight,
63
+ dimensions,
64
+ });
65
+ };
66
+
28
67
  export function ModalBottomSheetFrame(props: Props) {
29
68
  const {
30
69
  children,
@@ -34,9 +73,7 @@ export function ModalBottomSheetFrame(props: Props) {
34
73
  maxWidth,
35
74
  visible,
36
75
  handleProps,
37
- contentHeight,
38
76
  dimensions,
39
- paddingBottom,
40
77
  } = props;
41
78
 
42
79
  const extraStyles = {
@@ -44,21 +81,42 @@ export function ModalBottomSheetFrame(props: Props) {
44
81
  borderTopLeftRadius: cornerRadius,
45
82
  borderTopRightRadius: cornerRadius,
46
83
  maxHeight,
47
- paddingBottom,
48
84
  maxWidth: Math.min(Number(maxWidth), dimensions.width),
49
85
  };
50
86
 
87
+ const [height, setHeight] = React.useState(0);
88
+
89
+ const onLayout = (event: LayoutChangeEvent) => {
90
+ const { height } = event.nativeEvent.layout;
91
+
92
+ if (height !== 0) {
93
+ setHeight((oldHeight) => oldHeight || height);
94
+ }
95
+ };
96
+
97
+ const { bottom = defaultBottomOffset } = useSafeAreaInsets();
98
+
99
+ const bottomOffset = bottom;
100
+
101
+ const sheetHeight = useGetSheetHeight(height, maxHeight, dimensions);
102
+
51
103
  return (
52
104
  <DraggableBottomSheet
53
- sheetHeight={contentHeight}
54
- visible={visible}
105
+ sheetHeight={sheetHeight}
106
+ visible={height > 0 && visible}
55
107
  dismiss={props.closeToast}
56
108
  hasHeader={handleProps.enabled}
57
109
  header={(dragging) => <Handle {...handleProps} focused={dragging} />}
58
110
  maxWidth={maxWidth}
59
111
  {...dimensions}
112
+ height={dimensions.height - bottomOffset}
60
113
  >
61
- <View style={[styles.toastFrameContainer, extraStyles]}>{children}</View>
114
+ <SafeAreaView
115
+ edges={["left", "right", "bottom"]}
116
+ style={[styles.toastFrameContainer, extraStyles]}
117
+ >
118
+ <View onLayout={onLayout}>{children}</View>
119
+ </SafeAreaView>
62
120
  </DraggableBottomSheet>
63
121
  );
64
122
  }
package/App/ModalProvider/ModalBottomSheet/index.tsx CHANGED
@@ -1,7 +1,5 @@
1
1
  /// <reference types="@applicaster/applicaster-types" />
2
2
  import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
3
- import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
4
- import { useSafeAreaInsets } from "react-native-safe-area-context";
5
3
 
6
4
  import React, { useCallback, useEffect, useState } from "react";
7
5
  import { Keyboard, StyleSheet, View } from "react-native";
@@ -29,56 +27,39 @@ type Props = {
29
27
  modalBottomSheetContentProps: Record<string, any>;
30
28
  };
31
29
 
32
- const defaultBottomOffset = platformSelect({
33
- ios: 34,
34
- android: 0,
35
- });
36
-
37
30
  export function ModalBottomSheet(props: Props) {
38
31
  const theme = useTheme<BaseThemePropertiesMobile>();
39
32
  const navigator = useNavigation();
40
33
  const dimensions = useDimensions();
41
- const [sheetHeight, setSheetHeight] = useState(0);
42
34
  const [visible, setVisible] = useState(true);
43
- const dismiss = () => setVisible(false);
44
- const { bottom = defaultBottomOffset } = useSafeAreaInsets();
45
-
46
- const bottomOffset = bottom + dimensions.statusBarHeight;
47
35
 
48
36
  const {
49
37
  modal_bottom_sheet_background_color: sheetBackgroundColor,
50
38
  modal_bottom_sheet_overlay_color: sheetOverlayColor,
51
39
  modal_bottom_sheet_top_corner_radius: sheetCornerRadius,
52
- modal_bottom_sheet_max_height: sheetMaxHeight,
53
40
  modal_bottom_sheet_handle: sheetHandleEnabled,
54
41
  modal_bottom_sheet_handle_color: sheetHandleColor,
55
42
  modal_bottom_sheet_handle_focus_color: sheetHandleFocusedColor,
56
43
  modal_bottom_sheet_tablet_max_width: sheetTabletMaxWidth,
57
44
  } = theme;
58
45
 
46
+ const sheetMaxHeight = dimensions.height * 0.75; // Set a default max height
47
+
59
48
  const {
60
49
  ModalBottomSheetContent = ModalComponent,
61
50
  modalBottomSheetContentProps,
62
51
  } = props;
63
52
 
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
53
  useEffect(() => {
73
54
  Keyboard.dismiss();
74
55
  }, []);
75
56
 
57
+ const dismiss = useCallback(() => setVisible(false), []);
58
+
76
59
  const isTablet = useIsTablet();
77
60
 
78
61
  const maxWidth = isTablet ? sheetTabletMaxWidth : dimensions.width;
79
62
 
80
- const modalVisible = visible && sheetHeight > 0;
81
-
82
63
  return (
83
64
  <View style={styles.container}>
84
65
  <Overlay
@@ -89,12 +70,10 @@ export function ModalBottomSheet(props: Props) {
89
70
  <ModalBottomSheetFrame
90
71
  backgroundColor={sheetBackgroundColor}
91
72
  cornerRadius={sheetCornerRadius}
92
- contentHeight={sheetHeight + bottomOffset}
93
- maxHeight={sheetMaxHeight + bottomOffset}
94
- paddingBottom={bottomOffset}
73
+ maxHeight={sheetMaxHeight}
95
74
  maxWidth={maxWidth}
96
75
  dimensions={dimensions}
97
- visible={modalVisible}
76
+ visible={visible}
98
77
  closeToast={dismiss}
99
78
  handleProps={{
100
79
  enabled: sheetHandleEnabled,
@@ -102,18 +81,15 @@ export function ModalBottomSheet(props: Props) {
102
81
  focusedColor: sheetHandleFocusedColor,
103
82
  }}
104
83
  >
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>
84
+ <ModalBottomSheetContent
85
+ width={
86
+ Math.min(sheetTabletMaxWidth, dimensions.width) || dimensions.width
87
+ }
88
+ maxHeight={sheetMaxHeight}
89
+ {...modalBottomSheetContentProps}
90
+ dismiss={dismiss}
91
+ currentRoute={navigator.currentRoute}
92
+ />
117
93
  </ModalBottomSheetFrame>
118
94
  </View>
119
95
  );
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.2957047383",
3
+ "version": "13.0.0-alpha.3013095924",
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.2957047383",
32
- "@applicaster/quick-brick-core-plugins": "13.0.0-alpha.2957047383",
33
- "@applicaster/zapp-pipes-v2-client": "13.0.0-alpha.2957047383",
34
- "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.2957047383",
35
- "@applicaster/zapp-react-native-redux": "13.0.0-alpha.2957047383",
36
- "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.2957047383",
37
- "@applicaster/zapp-react-native-utils": "13.0.0-alpha.2957047383",
31
+ "@applicaster/applicaster-types": "13.0.0-alpha.3013095924",
32
+ "@applicaster/quick-brick-core-plugins": "13.0.0-alpha.3013095924",
33
+ "@applicaster/zapp-pipes-v2-client": "13.0.0-alpha.3013095924",
34
+ "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.3013095924",
35
+ "@applicaster/zapp-react-native-redux": "13.0.0-alpha.3013095924",
36
+ "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.3013095924",
37
+ "@applicaster/zapp-react-native-utils": "13.0.0-alpha.3013095924",
38
38
  "atob": "^2.1.2",
39
39
  "axios": "^0.28.0",
40
40
  "btoa": "^1.2.1",