@applicaster/quick-brick-core 16.0.0-rc.58 → 16.0.0-rc.59

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 (2) hide show
  1. package/App/NotificationToastRenderer/NotificationToastRenderer.tv.tsx +131 -0
  2. package/package.json +8 -8
package/App/NotificationToastRenderer/NotificationToastRenderer.tv.tsx ADDED
@@ -0,0 +1,131 @@
1
+ import React, { useCallback, useEffect, useRef, useState } from "react";
2
+ import { View, Text, Animated, StyleSheet, ViewStyle } from "react-native";
3
+ import {
4
+ Directions,
5
+ FlingGestureHandler,
6
+ State,
7
+ } from "react-native-gesture-handler";
8
+ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
9
+
10
+ import {
11
+ CONFIRMATION_TOAST_SOURCE,
12
+ notificationToastManager,
13
+ } from "./NotificationToastManager";
14
+ import { useNotificationToastState } from "./useNotificationToastState";
15
+ import { useNotificationHeight } from "./useNotificationHeight";
16
+ import { resolveConfirmationToastStyle } from "./resolveConfirmationToastStyle";
17
+
18
+ const DEFAULT_TOAST_BACKGROUND_COLOR = "#000";
19
+ const DEFAULT_TOAST_MESSAGE_COLOR = "#fff";
20
+
21
+ const styles = StyleSheet.create({
22
+ notificationView: {
23
+ flex: 1,
24
+ position: "absolute",
25
+ alignItems: "center",
26
+ justifyContent: "center",
27
+ top: 0,
28
+ left: 0,
29
+ right: 0,
30
+ },
31
+ });
32
+
33
+ type NumberBoolean = 0 | 1;
34
+
35
+ export const NotificationToastRenderer = ({ children }) => {
36
+ const { statusHeight, notificationHeight } = useNotificationHeight();
37
+ const theme = useTheme<BaseThemePropertiesMobile>();
38
+
39
+ const toast = useNotificationToastState();
40
+
41
+ const [notificationOpacity, setNotificationOpacity] =
42
+ useState<NumberBoolean>(0);
43
+
44
+ const yPosition = useRef(new Animated.Value(0)).current;
45
+
46
+ const resolvedStyle =
47
+ toast?.source === CONFIRMATION_TOAST_SOURCE
48
+ ? resolveConfirmationToastStyle(theme, toast.style)
49
+ : toast?.style;
50
+
51
+ const backgroundColor =
52
+ resolvedStyle?.backgroundColor ?? DEFAULT_TOAST_BACKGROUND_COLOR;
53
+
54
+ const color = resolvedStyle?.color ?? DEFAULT_TOAST_MESSAGE_COLOR;
55
+
56
+ const textStyles = {
57
+ color,
58
+ fontFamily: resolvedStyle?.fontFamily,
59
+ fontSize: resolvedStyle?.fontSize,
60
+ lineHeight: resolvedStyle?.lineHeight,
61
+ letterSpacing: resolvedStyle?.letterSpacing,
62
+ };
63
+
64
+ const animatedViewStyles: ViewStyle = {
65
+ ...styles.notificationView,
66
+ transform: [
67
+ {
68
+ translateY: yPosition.interpolate({
69
+ inputRange: [0, 1],
70
+ outputRange: [-notificationHeight, 0],
71
+ }),
72
+ },
73
+ ],
74
+ opacity: notificationOpacity,
75
+ height: notificationHeight,
76
+ width: "100%",
77
+
78
+ backgroundColor,
79
+ };
80
+
81
+ const onFlingStateChange = useCallback(({ nativeEvent }) => {
82
+ // Fling activates then ends; dismiss once the upward fling is recognized.
83
+ if (nativeEvent.oldState === State.ACTIVE) {
84
+ notificationToastManager.dismiss();
85
+ }
86
+ }, []);
87
+
88
+ useEffect(() => {
89
+ if (toast) {
90
+ setNotificationOpacity(1);
91
+
92
+ Animated.timing(yPosition, {
93
+ toValue: 1,
94
+ useNativeDriver: true,
95
+ duration: 300,
96
+ }).start();
97
+ } else {
98
+ Animated.timing(yPosition, {
99
+ toValue: 0,
100
+ useNativeDriver: true,
101
+ duration: 300,
102
+ }).start(() => setNotificationOpacity(0));
103
+ }
104
+ }, [toast]);
105
+
106
+ return (
107
+ <View
108
+ testID="NotificationToastRenderer"
109
+ style={StyleSheet.absoluteFill}
110
+ pointerEvents="box-none"
111
+ >
112
+ {children}
113
+ <FlingGestureHandler
114
+ enabled={!!toast}
115
+ direction={Directions.UP}
116
+ onHandlerStateChange={onFlingStateChange}
117
+ >
118
+ <Animated.View
119
+ testID="NotificationToastRenderer-fling"
120
+ pointerEvents={toast ? "auto" : "none"}
121
+ style={animatedViewStyles}
122
+ >
123
+ <View style={{ height: statusHeight, backgroundColor }} />
124
+ <Text testID="NotificationToastRenderer-message" style={textStyles}>
125
+ {toast?.message}
126
+ </Text>
127
+ </Animated.View>
128
+ </FlingGestureHandler>
129
+ </View>
130
+ );
131
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@applicaster/quick-brick-core",
3
- "version": "16.0.0-rc.58",
3
+ "version": "16.0.0-rc.59",
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": "16.0.0-rc.58",
32
- "@applicaster/quick-brick-core-plugins": "16.0.0-rc.58",
33
- "@applicaster/zapp-pipes-v2-client": "16.0.0-rc.58",
34
- "@applicaster/zapp-react-native-bridge": "16.0.0-rc.58",
35
- "@applicaster/zapp-react-native-redux": "16.0.0-rc.58",
36
- "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.58",
37
- "@applicaster/zapp-react-native-utils": "16.0.0-rc.58",
31
+ "@applicaster/applicaster-types": "16.0.0-rc.59",
32
+ "@applicaster/quick-brick-core-plugins": "16.0.0-rc.59",
33
+ "@applicaster/zapp-pipes-v2-client": "16.0.0-rc.59",
34
+ "@applicaster/zapp-react-native-bridge": "16.0.0-rc.59",
35
+ "@applicaster/zapp-react-native-redux": "16.0.0-rc.59",
36
+ "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.59",
37
+ "@applicaster/zapp-react-native-utils": "16.0.0-rc.59",
38
38
  "atob": "^2.1.2",
39
39
  "axios": "^0.28.0",
40
40
  "btoa": "^1.2.1",