@applicaster/quick-brick-core 13.0.0-alpha.2957047383 → 13.0.0-alpha.3003916059
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/App/ModalProvider/ModalBottomSheet/DraggableBottomSheet/index.tsx +0 -1
- package/App/ModalProvider/ModalBottomSheet/ModalBottomSheetFrame.tsx +68 -11
- package/App/ModalProvider/ModalBottomSheet/index.tsx +15 -39
- package/App/ModalProvider/ModalPresenter.tsx +1 -1
- package/App/ModalProvider/index.tsx +5 -1
- package/App/index.tsx +4 -0
- package/package.json +8 -8
|
@@ -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}
|
|
@@ -1,21 +1,33 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { StyleSheet, View } from "react-native";
|
|
2
|
+
import { LayoutChangeEvent, Platform, 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
|
+
useSafeAreaFrame,
|
|
9
|
+
useSafeAreaInsets,
|
|
10
|
+
} from "react-native-safe-area-context";
|
|
11
|
+
import {
|
|
12
|
+
isAndroidPlatform,
|
|
13
|
+
isAndroidVersionAtLeast,
|
|
14
|
+
platformSelect,
|
|
15
|
+
} from "@applicaster/zapp-react-native-utils/reactUtils";
|
|
6
16
|
|
|
7
17
|
type Props = {
|
|
8
18
|
children: React.ReactChild;
|
|
9
19
|
backgroundColor: string;
|
|
10
20
|
cornerRadius: number;
|
|
11
|
-
contentHeight: number;
|
|
12
21
|
maxHeight: number;
|
|
13
22
|
maxWidth: number;
|
|
14
23
|
visible: boolean;
|
|
15
24
|
handleProps: HandleProps;
|
|
16
25
|
closeToast: () => void;
|
|
17
|
-
dimensions: {
|
|
18
|
-
|
|
26
|
+
dimensions: {
|
|
27
|
+
statusBarHeight: any;
|
|
28
|
+
width: number;
|
|
29
|
+
height: number;
|
|
30
|
+
};
|
|
19
31
|
};
|
|
20
32
|
|
|
21
33
|
const styles = StyleSheet.create({
|
|
@@ -25,6 +37,32 @@ const styles = StyleSheet.create({
|
|
|
25
37
|
},
|
|
26
38
|
});
|
|
27
39
|
|
|
40
|
+
const defaultBottomOffset = platformSelect({
|
|
41
|
+
ios: 34,
|
|
42
|
+
android: 0,
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
const getSheetHeight = ({ height, bottomOffset, maxHeight }) => {
|
|
46
|
+
return platformSelect({
|
|
47
|
+
ios: height - bottomOffset,
|
|
48
|
+
default:
|
|
49
|
+
(height || maxHeight) -
|
|
50
|
+
(!isAndroidVersionAtLeast(35) && isAndroidPlatform() ? bottomOffset : 0),
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const useGetSheetHeight = (height, maxHeight) => {
|
|
55
|
+
const { bottom = defaultBottomOffset } = useSafeAreaInsets();
|
|
56
|
+
|
|
57
|
+
const bottomOffset = bottom;
|
|
58
|
+
|
|
59
|
+
return getSheetHeight({
|
|
60
|
+
height,
|
|
61
|
+
bottomOffset,
|
|
62
|
+
maxHeight,
|
|
63
|
+
});
|
|
64
|
+
};
|
|
65
|
+
|
|
28
66
|
export function ModalBottomSheetFrame(props: Props) {
|
|
29
67
|
const {
|
|
30
68
|
children,
|
|
@@ -34,31 +72,50 @@ export function ModalBottomSheetFrame(props: Props) {
|
|
|
34
72
|
maxWidth,
|
|
35
73
|
visible,
|
|
36
74
|
handleProps,
|
|
37
|
-
contentHeight,
|
|
38
75
|
dimensions,
|
|
39
|
-
paddingBottom,
|
|
40
76
|
} = props;
|
|
41
77
|
|
|
78
|
+
const safeAreaDims = useSafeAreaFrame();
|
|
79
|
+
|
|
42
80
|
const extraStyles = {
|
|
43
81
|
backgroundColor,
|
|
44
82
|
borderTopLeftRadius: cornerRadius,
|
|
45
83
|
borderTopRightRadius: cornerRadius,
|
|
46
84
|
maxHeight,
|
|
47
|
-
|
|
48
|
-
|
|
85
|
+
maxWidth: Math.min(Number(maxWidth), safeAreaDims.width),
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
const [height, setHeight] = React.useState(0);
|
|
89
|
+
|
|
90
|
+
const onLayout = (event: LayoutChangeEvent) => {
|
|
91
|
+
const { height } = event.nativeEvent.layout;
|
|
92
|
+
|
|
93
|
+
if (height !== 0) {
|
|
94
|
+
setHeight((oldHeight) => oldHeight || height);
|
|
95
|
+
}
|
|
49
96
|
};
|
|
50
97
|
|
|
98
|
+
const { bottom = defaultBottomOffset } = useSafeAreaInsets();
|
|
99
|
+
|
|
100
|
+
const sheetHeight = useGetSheetHeight(height, maxHeight);
|
|
101
|
+
|
|
51
102
|
return (
|
|
52
103
|
<DraggableBottomSheet
|
|
53
|
-
sheetHeight={
|
|
54
|
-
visible={visible}
|
|
104
|
+
sheetHeight={sheetHeight}
|
|
105
|
+
visible={height > 0 && visible}
|
|
55
106
|
dismiss={props.closeToast}
|
|
56
107
|
hasHeader={handleProps.enabled}
|
|
57
108
|
header={(dragging) => <Handle {...handleProps} focused={dragging} />}
|
|
58
109
|
maxWidth={maxWidth}
|
|
59
110
|
{...dimensions}
|
|
111
|
+
height={safeAreaDims.height - (Platform.OS === "ios" ? bottom : 0)}
|
|
60
112
|
>
|
|
61
|
-
<
|
|
113
|
+
<SafeAreaView
|
|
114
|
+
edges={["left", "right", "bottom"]}
|
|
115
|
+
style={[styles.toastFrameContainer, extraStyles]}
|
|
116
|
+
>
|
|
117
|
+
<View onLayout={onLayout}>{children}</View>
|
|
118
|
+
</SafeAreaView>
|
|
62
119
|
</DraggableBottomSheet>
|
|
63
120
|
);
|
|
64
121
|
}
|
|
@@ -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
|
-
|
|
93
|
-
maxHeight={sheetMaxHeight + bottomOffset}
|
|
94
|
-
paddingBottom={bottomOffset}
|
|
73
|
+
maxHeight={sheetMaxHeight}
|
|
95
74
|
maxWidth={maxWidth}
|
|
96
75
|
dimensions={dimensions}
|
|
97
|
-
visible={
|
|
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
|
-
<
|
|
106
|
-
|
|
107
|
-
width
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
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
|
);
|
|
@@ -40,7 +40,11 @@ export function ModalProvider() {
|
|
|
40
40
|
return (
|
|
41
41
|
<PathnameContext.Provider value={pathname}>
|
|
42
42
|
<ScreenContextProvider pathname={pathname}>
|
|
43
|
-
<ModalPresenter
|
|
43
|
+
<ModalPresenter
|
|
44
|
+
visible={shouldShowModal}
|
|
45
|
+
{...modalState?.options}
|
|
46
|
+
statusBarTranslucent
|
|
47
|
+
>
|
|
44
48
|
<ModalChildrenWrapper>
|
|
45
49
|
<ModalContent modalScreenProps={modalScreenProps} />
|
|
46
50
|
</ModalChildrenWrapper>
|
package/App/index.tsx
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applicaster/quick-brick-core",
|
|
3
|
-
"version": "13.0.0-alpha.
|
|
3
|
+
"version": "13.0.0-alpha.3003916059",
|
|
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.
|
|
32
|
-
"@applicaster/quick-brick-core-plugins": "13.0.0-alpha.
|
|
33
|
-
"@applicaster/zapp-pipes-v2-client": "13.0.0-alpha.
|
|
34
|
-
"@applicaster/zapp-react-native-bridge": "13.0.0-alpha.
|
|
35
|
-
"@applicaster/zapp-react-native-redux": "13.0.0-alpha.
|
|
36
|
-
"@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.
|
|
37
|
-
"@applicaster/zapp-react-native-utils": "13.0.0-alpha.
|
|
31
|
+
"@applicaster/applicaster-types": "13.0.0-alpha.3003916059",
|
|
32
|
+
"@applicaster/quick-brick-core-plugins": "13.0.0-alpha.3003916059",
|
|
33
|
+
"@applicaster/zapp-pipes-v2-client": "13.0.0-alpha.3003916059",
|
|
34
|
+
"@applicaster/zapp-react-native-bridge": "13.0.0-alpha.3003916059",
|
|
35
|
+
"@applicaster/zapp-react-native-redux": "13.0.0-alpha.3003916059",
|
|
36
|
+
"@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.3003916059",
|
|
37
|
+
"@applicaster/zapp-react-native-utils": "13.0.0-alpha.3003916059",
|
|
38
38
|
"atob": "^2.1.2",
|
|
39
39
|
"axios": "^0.28.0",
|
|
40
40
|
"btoa": "^1.2.1",
|