@applicaster/quick-brick-core 15.1.6 → 15.1.7
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/NotificationToastRenderer/NotificationToastManager.ts +18 -2
- package/App/NotificationToastRenderer/NotificationToastRenderer.tsx +79 -19
- package/App/NotificationToastRenderer/__tests__/NotificationToastManager.test.ts +53 -0
- package/App/NotificationToastRenderer/__tests__/NotificationToastRenderer.test.tsx +172 -11
- package/App/NotificationToastRenderer/__tests__/resolveConfirmationToastStyle.test.ts +118 -0
- package/App/NotificationToastRenderer/index.tsx +6 -0
- package/App/NotificationToastRenderer/resolveConfirmationToastStyle.ts +33 -0
- package/package.json +8 -8
|
@@ -24,12 +24,21 @@ export interface ToastStyle {
|
|
|
24
24
|
letterSpacing?: number;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
export const DEFAULT_TOAST_TIMEOUT = 1000;
|
|
28
|
+
|
|
29
|
+
export const CONFIRMATION_TOAST_SOURCE = "confirmation";
|
|
30
|
+
|
|
27
31
|
export interface ToastPayload {
|
|
28
32
|
id?: string;
|
|
29
33
|
message: string;
|
|
30
34
|
extraMessage?: string; // secondary line; TV renderers show it as a subtitle, mobile ignores it
|
|
31
|
-
|
|
35
|
+
// ms; confirmation toasts default to DEFAULT_TOAST_TIMEOUT (1000) when omitted.
|
|
36
|
+
// Non-confirmation toasts stay until dismissed when timeout is omitted.
|
|
37
|
+
timeout?: number;
|
|
32
38
|
style?: ToastStyle;
|
|
39
|
+
// stamped by the showToast action; Theme confirmation styles apply when
|
|
40
|
+
// source === CONFIRMATION_TOAST_SOURCE ("confirmation")
|
|
41
|
+
source?: string;
|
|
33
42
|
[key: string]: unknown;
|
|
34
43
|
}
|
|
35
44
|
|
|
@@ -122,7 +131,14 @@ class NotificationToastManager {
|
|
|
122
131
|
};
|
|
123
132
|
|
|
124
133
|
private handleShowToast = (payload: ToastPayload) => {
|
|
125
|
-
const
|
|
134
|
+
const isConfirmation = payload.source === CONFIRMATION_TOAST_SOURCE;
|
|
135
|
+
|
|
136
|
+
const item = {
|
|
137
|
+
...payload,
|
|
138
|
+
id: payload.id ?? String(this.nextId++),
|
|
139
|
+
timeout:
|
|
140
|
+
payload.timeout ?? (isConfirmation ? DEFAULT_TOAST_TIMEOUT : undefined),
|
|
141
|
+
};
|
|
126
142
|
|
|
127
143
|
const queuedIndex = this.queue.findIndex((queued) => queued.id === item.id);
|
|
128
144
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useEffect, useRef, useState } from "react";
|
|
1
|
+
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
2
2
|
import {
|
|
3
3
|
View,
|
|
4
4
|
Text,
|
|
@@ -7,10 +7,23 @@ import {
|
|
|
7
7
|
TouchableWithoutFeedback,
|
|
8
8
|
ViewStyle,
|
|
9
9
|
} from "react-native";
|
|
10
|
+
import {
|
|
11
|
+
Directions,
|
|
12
|
+
FlingGestureHandler,
|
|
13
|
+
State,
|
|
14
|
+
} from "react-native-gesture-handler";
|
|
15
|
+
import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
|
|
10
16
|
|
|
11
|
-
import {
|
|
17
|
+
import {
|
|
18
|
+
CONFIRMATION_TOAST_SOURCE,
|
|
19
|
+
notificationToastManager,
|
|
20
|
+
} from "./NotificationToastManager";
|
|
12
21
|
import { useNotificationToastState } from "./useNotificationToastState";
|
|
13
22
|
import { useNotificationHeight } from "./useNotificationHeight";
|
|
23
|
+
import { resolveConfirmationToastStyle } from "./resolveConfirmationToastStyle";
|
|
24
|
+
|
|
25
|
+
const DEFAULT_TOAST_BACKGROUND_COLOR = "#000";
|
|
26
|
+
const DEFAULT_TOAST_MESSAGE_COLOR = "#fff";
|
|
14
27
|
|
|
15
28
|
const styles = StyleSheet.create({
|
|
16
29
|
notificationView: {
|
|
@@ -22,12 +35,19 @@ const styles = StyleSheet.create({
|
|
|
22
35
|
left: 0,
|
|
23
36
|
right: 0,
|
|
24
37
|
},
|
|
38
|
+
toastContent: {
|
|
39
|
+
flex: 1,
|
|
40
|
+
width: "100%",
|
|
41
|
+
alignItems: "center",
|
|
42
|
+
justifyContent: "center",
|
|
43
|
+
},
|
|
25
44
|
});
|
|
26
45
|
|
|
27
46
|
type NumberBoolean = 0 | 1;
|
|
28
47
|
|
|
29
48
|
export const NotificationToastRenderer = ({ children }) => {
|
|
30
49
|
const { statusHeight, notificationHeight } = useNotificationHeight();
|
|
50
|
+
const theme = useTheme<BaseThemePropertiesMobile>();
|
|
31
51
|
|
|
32
52
|
const toast = useNotificationToastState();
|
|
33
53
|
|
|
@@ -36,15 +56,22 @@ export const NotificationToastRenderer = ({ children }) => {
|
|
|
36
56
|
|
|
37
57
|
const yPosition = useRef(new Animated.Value(0)).current;
|
|
38
58
|
|
|
39
|
-
const
|
|
40
|
-
|
|
59
|
+
const resolvedStyle =
|
|
60
|
+
toast?.source === CONFIRMATION_TOAST_SOURCE
|
|
61
|
+
? resolveConfirmationToastStyle(theme, toast.style)
|
|
62
|
+
: toast?.style;
|
|
63
|
+
|
|
64
|
+
const backgroundColor =
|
|
65
|
+
resolvedStyle?.backgroundColor ?? DEFAULT_TOAST_BACKGROUND_COLOR;
|
|
66
|
+
|
|
67
|
+
const color = resolvedStyle?.color ?? DEFAULT_TOAST_MESSAGE_COLOR;
|
|
41
68
|
|
|
42
69
|
const textStyles = {
|
|
43
70
|
color,
|
|
44
|
-
fontFamily:
|
|
45
|
-
fontSize:
|
|
46
|
-
lineHeight:
|
|
47
|
-
letterSpacing:
|
|
71
|
+
fontFamily: resolvedStyle?.fontFamily,
|
|
72
|
+
fontSize: resolvedStyle?.fontSize,
|
|
73
|
+
lineHeight: resolvedStyle?.lineHeight,
|
|
74
|
+
letterSpacing: resolvedStyle?.letterSpacing,
|
|
48
75
|
};
|
|
49
76
|
|
|
50
77
|
const animatedViewStyles: ViewStyle = {
|
|
@@ -64,6 +91,20 @@ export const NotificationToastRenderer = ({ children }) => {
|
|
|
64
91
|
backgroundColor,
|
|
65
92
|
};
|
|
66
93
|
|
|
94
|
+
const dismissToast = useCallback(() => {
|
|
95
|
+
notificationToastManager.dismiss();
|
|
96
|
+
}, []);
|
|
97
|
+
|
|
98
|
+
const onFlingStateChange = useCallback(
|
|
99
|
+
({ nativeEvent }) => {
|
|
100
|
+
// Fling activates then ends; dismiss once the upward fling is recognized.
|
|
101
|
+
if (nativeEvent.oldState === State.ACTIVE) {
|
|
102
|
+
dismissToast();
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
[dismissToast]
|
|
106
|
+
);
|
|
107
|
+
|
|
67
108
|
useEffect(() => {
|
|
68
109
|
if (toast) {
|
|
69
110
|
setNotificationOpacity(1);
|
|
@@ -83,20 +124,39 @@ export const NotificationToastRenderer = ({ children }) => {
|
|
|
83
124
|
}, [toast]);
|
|
84
125
|
|
|
85
126
|
return (
|
|
86
|
-
<View
|
|
127
|
+
<View
|
|
128
|
+
testID="NotificationToastRenderer"
|
|
129
|
+
style={StyleSheet.absoluteFill}
|
|
130
|
+
pointerEvents="box-none"
|
|
131
|
+
>
|
|
87
132
|
{children}
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
133
|
+
<FlingGestureHandler
|
|
134
|
+
enabled={!!toast}
|
|
135
|
+
direction={Directions.UP}
|
|
136
|
+
onHandlerStateChange={onFlingStateChange}
|
|
92
137
|
>
|
|
93
|
-
<Animated.View
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
138
|
+
<Animated.View
|
|
139
|
+
testID="NotificationToastRenderer-fling"
|
|
140
|
+
pointerEvents={toast ? "auto" : "none"}
|
|
141
|
+
style={animatedViewStyles}
|
|
142
|
+
>
|
|
143
|
+
{/* Tap dismiss kept alongside fling for discoverability / a11y */}
|
|
144
|
+
<TouchableWithoutFeedback
|
|
145
|
+
testID="NotificationToastRenderer-touchable"
|
|
146
|
+
onPress={dismissToast}
|
|
147
|
+
>
|
|
148
|
+
<View style={styles.toastContent}>
|
|
149
|
+
<View style={{ height: statusHeight, backgroundColor }} />
|
|
150
|
+
<Text
|
|
151
|
+
testID="NotificationToastRenderer-message"
|
|
152
|
+
style={textStyles}
|
|
153
|
+
>
|
|
154
|
+
{toast?.message}
|
|
155
|
+
</Text>
|
|
156
|
+
</View>
|
|
157
|
+
</TouchableWithoutFeedback>
|
|
98
158
|
</Animated.View>
|
|
99
|
-
</
|
|
159
|
+
</FlingGestureHandler>
|
|
100
160
|
</View>
|
|
101
161
|
);
|
|
102
162
|
};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
notificationToastManager,
|
|
3
3
|
NOTIFICATION_TOAST_EVENTS,
|
|
4
|
+
DEFAULT_TOAST_TIMEOUT,
|
|
5
|
+
CONFIRMATION_TOAST_SOURCE,
|
|
4
6
|
} from "../NotificationToastManager";
|
|
5
7
|
import { postEvent } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
|
|
6
8
|
|
|
@@ -210,4 +212,55 @@ describe("NotificationToastManager", () => {
|
|
|
210
212
|
|
|
211
213
|
expect(onShow).not.toHaveBeenCalled();
|
|
212
214
|
});
|
|
215
|
+
|
|
216
|
+
it("defaults timeout to DEFAULT_TOAST_TIMEOUT for confirmation toasts when omitted", () => {
|
|
217
|
+
const onShow = jest.fn();
|
|
218
|
+
const onHide = jest.fn();
|
|
219
|
+
on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
|
|
220
|
+
on(NOTIFICATION_TOAST_EVENTS.HIDE, onHide);
|
|
221
|
+
|
|
222
|
+
notificationToastManager.showToast({
|
|
223
|
+
message: "Added to queue",
|
|
224
|
+
source: CONFIRMATION_TOAST_SOURCE,
|
|
225
|
+
});
|
|
226
|
+
|
|
227
|
+
expect(onShow).toHaveBeenCalledWith(
|
|
228
|
+
expect.objectContaining({
|
|
229
|
+
message: "Added to queue",
|
|
230
|
+
timeout: DEFAULT_TOAST_TIMEOUT,
|
|
231
|
+
}),
|
|
232
|
+
expect.any(Function)
|
|
233
|
+
);
|
|
234
|
+
|
|
235
|
+
jest.advanceTimersByTime(DEFAULT_TOAST_TIMEOUT);
|
|
236
|
+
|
|
237
|
+
expect(onHide).toHaveBeenCalledTimes(1);
|
|
238
|
+
});
|
|
239
|
+
|
|
240
|
+
it("keeps non-confirmation toasts until dismissed when timeout is omitted", () => {
|
|
241
|
+
const onShow = jest.fn();
|
|
242
|
+
const onHide = jest.fn();
|
|
243
|
+
on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
|
|
244
|
+
on(NOTIFICATION_TOAST_EVENTS.HIDE, onHide);
|
|
245
|
+
|
|
246
|
+
notificationToastManager.showToast({
|
|
247
|
+
message: "Sticky toast",
|
|
248
|
+
});
|
|
249
|
+
|
|
250
|
+
expect(onShow).toHaveBeenCalledWith(
|
|
251
|
+
expect.objectContaining({
|
|
252
|
+
message: "Sticky toast",
|
|
253
|
+
timeout: undefined,
|
|
254
|
+
}),
|
|
255
|
+
expect.any(Function)
|
|
256
|
+
);
|
|
257
|
+
|
|
258
|
+
jest.advanceTimersByTime(DEFAULT_TOAST_TIMEOUT * 5);
|
|
259
|
+
|
|
260
|
+
expect(onHide).not.toHaveBeenCalled();
|
|
261
|
+
|
|
262
|
+
notificationToastManager.dismiss();
|
|
263
|
+
|
|
264
|
+
expect(onHide).toHaveBeenCalledTimes(1);
|
|
265
|
+
});
|
|
213
266
|
});
|
|
@@ -1,16 +1,68 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Text } from "react-native";
|
|
3
|
-
import { act, fireEvent } from "@testing-library/react-native";
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
import { act, fireEvent, render } from "@testing-library/react-native";
|
|
4
|
+
import { State } from "react-native-gesture-handler";
|
|
5
|
+
import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
|
|
6
|
+
|
|
7
|
+
import {
|
|
8
|
+
CONFIRMATION_TOAST_SOURCE,
|
|
9
|
+
notificationToastManager,
|
|
10
|
+
} from "../NotificationToastManager";
|
|
7
11
|
import { NotificationToastRenderer } from "../NotificationToastRenderer";
|
|
8
12
|
|
|
9
13
|
jest.mock("react-native-safe-area-context", () => ({
|
|
10
|
-
...jest.requireActual("react-native-safe-area-context"),
|
|
11
14
|
useSafeAreaInsets: () => ({ top: 44 }),
|
|
12
15
|
}));
|
|
13
16
|
|
|
17
|
+
jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
|
|
18
|
+
useTheme: jest.fn(),
|
|
19
|
+
}));
|
|
20
|
+
|
|
21
|
+
jest.mock("react-native-gesture-handler", () => {
|
|
22
|
+
const RN = require("react-native");
|
|
23
|
+
const ReactActual = require("react");
|
|
24
|
+
const actual = jest.requireActual("react-native-gesture-handler");
|
|
25
|
+
|
|
26
|
+
const FlingGestureHandler = ReactActual.forwardRef(
|
|
27
|
+
(
|
|
28
|
+
{ children, onHandlerStateChange, enabled, direction, ...rest }: any,
|
|
29
|
+
ref: any
|
|
30
|
+
) => (
|
|
31
|
+
<RN.View
|
|
32
|
+
ref={ref}
|
|
33
|
+
testID="NotificationToastRenderer-fling-handler"
|
|
34
|
+
accessibilityState={{ disabled: !enabled }}
|
|
35
|
+
direction={direction}
|
|
36
|
+
{...rest}
|
|
37
|
+
onHandlerStateChange={onHandlerStateChange}
|
|
38
|
+
>
|
|
39
|
+
{children}
|
|
40
|
+
</RN.View>
|
|
41
|
+
)
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
return {
|
|
45
|
+
__esModule: true,
|
|
46
|
+
...actual,
|
|
47
|
+
FlingGestureHandler,
|
|
48
|
+
};
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
const mockedUseTheme = useTheme as jest.MockedFunction<typeof useTheme>;
|
|
52
|
+
|
|
53
|
+
const confirmationTheme: Partial<BaseThemePropertiesMobile> = {
|
|
54
|
+
confirmation_toast_style_background_color: "#0188FF",
|
|
55
|
+
confirmation_toast_style_color: "#EFEFEF",
|
|
56
|
+
confirmation_toast_style_ios_font_family: "SFProText-Semibold",
|
|
57
|
+
confirmation_toast_style_android_font_family: "Roboto-Medium",
|
|
58
|
+
confirmation_toast_style_ios_font_size: 14,
|
|
59
|
+
confirmation_toast_style_android_font_size: 14,
|
|
60
|
+
confirmation_toast_style_ios_line_height: 44,
|
|
61
|
+
confirmation_toast_style_android_line_height: 44,
|
|
62
|
+
confirmation_toast_style_ios_letter_spacing: -1.4,
|
|
63
|
+
confirmation_toast_style_android_letter_spacing: -1.4,
|
|
64
|
+
};
|
|
65
|
+
|
|
14
66
|
describe("NotificationToastRenderer", () => {
|
|
15
67
|
beforeAll(() => {
|
|
16
68
|
jest.spyOn(console, "log").mockImplementation(() => {});
|
|
@@ -20,6 +72,12 @@ describe("NotificationToastRenderer", () => {
|
|
|
20
72
|
(console.log as jest.Mock).mockRestore();
|
|
21
73
|
});
|
|
22
74
|
|
|
75
|
+
beforeEach(() => {
|
|
76
|
+
mockedUseTheme.mockReturnValue(
|
|
77
|
+
confirmationTheme as BaseThemePropertiesMobile
|
|
78
|
+
);
|
|
79
|
+
});
|
|
80
|
+
|
|
23
81
|
afterEach(() => {
|
|
24
82
|
// drain whatever is left showing/queued so the next test starts clean
|
|
25
83
|
for (let i = 0; i < 10; i++) {
|
|
@@ -31,7 +89,7 @@ describe("NotificationToastRenderer", () => {
|
|
|
31
89
|
});
|
|
32
90
|
|
|
33
91
|
it("renders its children", () => {
|
|
34
|
-
const { getByText } =
|
|
92
|
+
const { getByText } = render(
|
|
35
93
|
<NotificationToastRenderer>
|
|
36
94
|
<Text>child content</Text>
|
|
37
95
|
</NotificationToastRenderer>
|
|
@@ -41,7 +99,7 @@ describe("NotificationToastRenderer", () => {
|
|
|
41
99
|
});
|
|
42
100
|
|
|
43
101
|
it("shows no message before any toast is emitted", () => {
|
|
44
|
-
const { getByTestId } =
|
|
102
|
+
const { getByTestId } = render(<NotificationToastRenderer />);
|
|
45
103
|
|
|
46
104
|
expect(
|
|
47
105
|
getByTestId("NotificationToastRenderer-message").props.children
|
|
@@ -49,7 +107,7 @@ describe("NotificationToastRenderer", () => {
|
|
|
49
107
|
});
|
|
50
108
|
|
|
51
109
|
it("displays the message from a toast emitted by the manager", () => {
|
|
52
|
-
const { getByTestId } =
|
|
110
|
+
const { getByTestId } = render(<NotificationToastRenderer />);
|
|
53
111
|
|
|
54
112
|
act(() => {
|
|
55
113
|
notificationToastManager.showToast({ message: "You are offline" });
|
|
@@ -61,7 +119,7 @@ describe("NotificationToastRenderer", () => {
|
|
|
61
119
|
});
|
|
62
120
|
|
|
63
121
|
it("applies the toast's style to the message text", () => {
|
|
64
|
-
const { getByTestId } =
|
|
122
|
+
const { getByTestId } = render(<NotificationToastRenderer />);
|
|
65
123
|
|
|
66
124
|
act(() => {
|
|
67
125
|
notificationToastManager.showToast({
|
|
@@ -75,13 +133,116 @@ describe("NotificationToastRenderer", () => {
|
|
|
75
133
|
).toEqual(expect.objectContaining({ color: "#123456", fontSize: 20 }));
|
|
76
134
|
});
|
|
77
135
|
|
|
78
|
-
it("
|
|
136
|
+
it("applies Theme confirmation styles when source is confirmation", () => {
|
|
137
|
+
const { getByTestId } = render(<NotificationToastRenderer />);
|
|
138
|
+
|
|
139
|
+
act(() => {
|
|
140
|
+
notificationToastManager.showToast({
|
|
141
|
+
message: "Added to queue",
|
|
142
|
+
source: CONFIRMATION_TOAST_SOURCE,
|
|
143
|
+
});
|
|
144
|
+
});
|
|
145
|
+
|
|
146
|
+
expect(
|
|
147
|
+
getByTestId("NotificationToastRenderer-message").props.style
|
|
148
|
+
).toEqual(
|
|
149
|
+
expect.objectContaining({
|
|
150
|
+
color: "#EFEFEF",
|
|
151
|
+
fontSize: 14,
|
|
152
|
+
lineHeight: 44,
|
|
153
|
+
letterSpacing: -1.4,
|
|
154
|
+
})
|
|
155
|
+
);
|
|
156
|
+
});
|
|
157
|
+
|
|
158
|
+
it("shallow-merges style overrides onto Theme confirmation defaults", () => {
|
|
159
|
+
const { getByTestId } = render(<NotificationToastRenderer />);
|
|
160
|
+
|
|
161
|
+
act(() => {
|
|
162
|
+
notificationToastManager.showToast({
|
|
163
|
+
message: "Playlist created",
|
|
164
|
+
source: CONFIRMATION_TOAST_SOURCE,
|
|
165
|
+
style: { backgroundColor: "#00FF00", fontSize: 20 },
|
|
166
|
+
});
|
|
167
|
+
});
|
|
168
|
+
|
|
169
|
+
expect(
|
|
170
|
+
getByTestId("NotificationToastRenderer-message").props.style
|
|
171
|
+
).toEqual(
|
|
172
|
+
expect.objectContaining({
|
|
173
|
+
color: "#EFEFEF",
|
|
174
|
+
fontSize: 20,
|
|
175
|
+
lineHeight: 44,
|
|
176
|
+
})
|
|
177
|
+
);
|
|
178
|
+
});
|
|
179
|
+
|
|
180
|
+
it("does not apply Theme confirmation styles for non-confirmation toasts", () => {
|
|
181
|
+
const { getByTestId } = render(<NotificationToastRenderer />);
|
|
182
|
+
|
|
183
|
+
act(() => {
|
|
184
|
+
notificationToastManager.showToast({
|
|
185
|
+
message: "You are offline",
|
|
186
|
+
style: { color: "#abcdef" },
|
|
187
|
+
});
|
|
188
|
+
});
|
|
189
|
+
|
|
190
|
+
expect(
|
|
191
|
+
getByTestId("NotificationToastRenderer-message").props.style
|
|
192
|
+
).toEqual(
|
|
193
|
+
expect.objectContaining({
|
|
194
|
+
color: "#abcdef",
|
|
195
|
+
})
|
|
196
|
+
);
|
|
197
|
+
|
|
198
|
+
expect(
|
|
199
|
+
getByTestId("NotificationToastRenderer-message").props.style.fontSize
|
|
200
|
+
).toBeUndefined();
|
|
201
|
+
});
|
|
202
|
+
|
|
203
|
+
it("dismisses the toast on an upward fling", () => {
|
|
79
204
|
const dismissSpy = jest.spyOn(notificationToastManager, "dismiss");
|
|
80
205
|
|
|
81
|
-
const { getByTestId } =
|
|
206
|
+
const { getByTestId } = render(<NotificationToastRenderer />);
|
|
207
|
+
|
|
208
|
+
act(() => {
|
|
209
|
+
notificationToastManager.showToast({ message: "Added to queue" });
|
|
210
|
+
});
|
|
211
|
+
|
|
212
|
+
fireEvent(
|
|
213
|
+
getByTestId("NotificationToastRenderer-fling-handler"),
|
|
214
|
+
"handlerStateChange",
|
|
215
|
+
{ nativeEvent: { oldState: State.ACTIVE, state: State.END } }
|
|
216
|
+
);
|
|
217
|
+
|
|
218
|
+
expect(dismissSpy).toHaveBeenCalled();
|
|
219
|
+
});
|
|
220
|
+
|
|
221
|
+
it("dismisses the toast when the toast area is pressed", () => {
|
|
222
|
+
const dismissSpy = jest.spyOn(notificationToastManager, "dismiss");
|
|
223
|
+
|
|
224
|
+
const { getByTestId } = render(<NotificationToastRenderer />);
|
|
225
|
+
|
|
226
|
+
act(() => {
|
|
227
|
+
notificationToastManager.showToast({ message: "Added to queue" });
|
|
228
|
+
});
|
|
82
229
|
|
|
83
230
|
fireEvent.press(getByTestId("NotificationToastRenderer-touchable"));
|
|
84
231
|
|
|
85
232
|
expect(dismissSpy).toHaveBeenCalled();
|
|
86
233
|
});
|
|
234
|
+
|
|
235
|
+
it("does not dismiss when the fling handler is not active", () => {
|
|
236
|
+
const dismissSpy = jest.spyOn(notificationToastManager, "dismiss");
|
|
237
|
+
|
|
238
|
+
const { getByTestId } = render(<NotificationToastRenderer />);
|
|
239
|
+
|
|
240
|
+
fireEvent(
|
|
241
|
+
getByTestId("NotificationToastRenderer-fling-handler"),
|
|
242
|
+
"handlerStateChange",
|
|
243
|
+
{ nativeEvent: { oldState: State.BEGAN, state: State.FAILED } }
|
|
244
|
+
);
|
|
245
|
+
|
|
246
|
+
expect(dismissSpy).not.toHaveBeenCalled();
|
|
247
|
+
});
|
|
87
248
|
});
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { resolveConfirmationToastStyle } from "../resolveConfirmationToastStyle";
|
|
2
|
+
|
|
3
|
+
jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
|
|
4
|
+
// manifestKeyParser captures currentPlatform at module load from this map
|
|
5
|
+
platformSelect: jest.fn((platforms) => {
|
|
6
|
+
if (platforms?.ios === "ios" && platforms?.android === "android") {
|
|
7
|
+
return "ios";
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
return platforms?.default;
|
|
11
|
+
}),
|
|
12
|
+
}));
|
|
13
|
+
|
|
14
|
+
describe("resolveConfirmationToastStyle", () => {
|
|
15
|
+
const theme = {
|
|
16
|
+
confirmation_toast_style_background_color: "#0188FF",
|
|
17
|
+
confirmation_toast_style_color: "#EFEFEF",
|
|
18
|
+
confirmation_toast_style_ios_font_family: "SFProText-Semibold",
|
|
19
|
+
confirmation_toast_style_android_font_family: "Roboto-Medium",
|
|
20
|
+
confirmation_toast_style_ios_font_size: 14,
|
|
21
|
+
confirmation_toast_style_android_font_size: 16,
|
|
22
|
+
confirmation_toast_style_ios_line_height: 44,
|
|
23
|
+
confirmation_toast_style_android_line_height: 40,
|
|
24
|
+
confirmation_toast_style_ios_letter_spacing: -1.4,
|
|
25
|
+
confirmation_toast_style_android_letter_spacing: -0.5,
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
it("maps Theme confirmation_toast_style_* keys via getAllSpecificStyles (iOS platform)", () => {
|
|
29
|
+
expect(resolveConfirmationToastStyle(theme)).toEqual({
|
|
30
|
+
backgroundColor: "#0188FF",
|
|
31
|
+
color: "#EFEFEF",
|
|
32
|
+
fontFamily: "SFProText-Semibold",
|
|
33
|
+
fontSize: 14,
|
|
34
|
+
lineHeight: 44,
|
|
35
|
+
letterSpacing: -1.4,
|
|
36
|
+
});
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
it("ignores other-platform keys for the current platform", () => {
|
|
40
|
+
const result = resolveConfirmationToastStyle(theme);
|
|
41
|
+
|
|
42
|
+
expect(result.fontFamily).toBe("SFProText-Semibold");
|
|
43
|
+
expect(result.fontSize).toBe(14);
|
|
44
|
+
|
|
45
|
+
expect(result).not.toEqual(
|
|
46
|
+
expect.objectContaining({
|
|
47
|
+
fontFamily: "Roboto-Medium",
|
|
48
|
+
fontSize: 16,
|
|
49
|
+
})
|
|
50
|
+
);
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
it("shallow-merges override style on top of Theme defaults", () => {
|
|
54
|
+
expect(
|
|
55
|
+
resolveConfirmationToastStyle(theme, {
|
|
56
|
+
backgroundColor: "#00FF00",
|
|
57
|
+
fontSize: 20,
|
|
58
|
+
})
|
|
59
|
+
).toEqual({
|
|
60
|
+
backgroundColor: "#00FF00",
|
|
61
|
+
color: "#EFEFEF",
|
|
62
|
+
fontFamily: "SFProText-Semibold",
|
|
63
|
+
fontSize: 20,
|
|
64
|
+
lineHeight: 44,
|
|
65
|
+
letterSpacing: -1.4,
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
it("returns override fields when Theme is missing", () => {
|
|
70
|
+
expect(resolveConfirmationToastStyle(undefined, { color: "#fff" })).toEqual(
|
|
71
|
+
{
|
|
72
|
+
color: "#fff",
|
|
73
|
+
}
|
|
74
|
+
);
|
|
75
|
+
});
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
describe("resolveConfirmationToastStyle (android platform)", () => {
|
|
79
|
+
it("maps android platform Theme keys", () => {
|
|
80
|
+
jest.resetModules();
|
|
81
|
+
|
|
82
|
+
jest.doMock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
|
|
83
|
+
platformSelect: jest.fn((platforms) => {
|
|
84
|
+
if (platforms?.ios === "ios" && platforms?.android === "android") {
|
|
85
|
+
return "android";
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
return platforms?.default;
|
|
89
|
+
}),
|
|
90
|
+
}));
|
|
91
|
+
|
|
92
|
+
const {
|
|
93
|
+
resolveConfirmationToastStyle: resolveAndroid,
|
|
94
|
+
} = require("../resolveConfirmationToastStyle");
|
|
95
|
+
|
|
96
|
+
const theme = {
|
|
97
|
+
confirmation_toast_style_background_color: "#0188FF",
|
|
98
|
+
confirmation_toast_style_color: "#EFEFEF",
|
|
99
|
+
confirmation_toast_style_ios_font_family: "SFProText-Semibold",
|
|
100
|
+
confirmation_toast_style_android_font_family: "Roboto-Medium",
|
|
101
|
+
confirmation_toast_style_ios_font_size: 14,
|
|
102
|
+
confirmation_toast_style_android_font_size: 16,
|
|
103
|
+
confirmation_toast_style_ios_line_height: 44,
|
|
104
|
+
confirmation_toast_style_android_line_height: 40,
|
|
105
|
+
confirmation_toast_style_ios_letter_spacing: -1.4,
|
|
106
|
+
confirmation_toast_style_android_letter_spacing: -0.5,
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
expect(resolveAndroid(theme)).toEqual({
|
|
110
|
+
backgroundColor: "#0188FF",
|
|
111
|
+
color: "#EFEFEF",
|
|
112
|
+
fontFamily: "Roboto-Medium",
|
|
113
|
+
fontSize: 16,
|
|
114
|
+
lineHeight: 40,
|
|
115
|
+
letterSpacing: -0.5,
|
|
116
|
+
});
|
|
117
|
+
});
|
|
118
|
+
});
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
export { notificationToastManager } from "./NotificationToastManager";
|
|
2
2
|
|
|
3
|
+
export type { ToastPayload, ToastStyle } from "./NotificationToastManager";
|
|
4
|
+
|
|
5
|
+
export { CONFIRMATION_TOAST_SOURCE } from "./NotificationToastManager";
|
|
6
|
+
|
|
3
7
|
export { NotificationToastRenderer } from "./NotificationToastRenderer";
|
|
4
8
|
|
|
5
9
|
export { useNotificationHeight } from "./useNotificationHeight";
|
|
10
|
+
|
|
11
|
+
export { resolveConfirmationToastStyle } from "./resolveConfirmationToastStyle";
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { getAllSpecificStyles } from "@applicaster/zapp-react-native-utils/configurationUtils/manifestKeyParser";
|
|
2
|
+
|
|
3
|
+
import { ToastStyle } from "./NotificationToastManager";
|
|
4
|
+
|
|
5
|
+
const CONFIRMATION_TOAST_STYLE_COMPONENT = "confirmation_toast";
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Builds confirmation-toast style from Theme defaults via getAllSpecificStyles,
|
|
9
|
+
* then shallow-merges any caller override on top.
|
|
10
|
+
*
|
|
11
|
+
* Expected Theme keys follow:
|
|
12
|
+
* `confirmation_toast_style_[platform_]<style_name>`
|
|
13
|
+
* e.g. confirmation_toast_style_background_color,
|
|
14
|
+
* confirmation_toast_style_ios_font_family
|
|
15
|
+
*/
|
|
16
|
+
export function resolveConfirmationToastStyle(
|
|
17
|
+
theme: Partial<BaseThemePropertiesMobile> | null | undefined,
|
|
18
|
+
overrideStyle?: ToastStyle | null
|
|
19
|
+
): ToastStyle {
|
|
20
|
+
const outStyles: Record<string, ToastStyle> = {};
|
|
21
|
+
|
|
22
|
+
getAllSpecificStyles({
|
|
23
|
+
configuration: { ...(theme ?? {}) },
|
|
24
|
+
componentName: CONFIRMATION_TOAST_STYLE_COMPONENT,
|
|
25
|
+
subComponentName: "",
|
|
26
|
+
outStyles,
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
return {
|
|
30
|
+
...outStyles.default,
|
|
31
|
+
...overrideStyle,
|
|
32
|
+
};
|
|
33
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applicaster/quick-brick-core",
|
|
3
|
-
"version": "15.1.
|
|
3
|
+
"version": "15.1.7",
|
|
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": "15.1.
|
|
32
|
-
"@applicaster/quick-brick-core-plugins": "15.1.
|
|
33
|
-
"@applicaster/zapp-pipes-v2-client": "15.1.
|
|
34
|
-
"@applicaster/zapp-react-native-bridge": "15.1.
|
|
35
|
-
"@applicaster/zapp-react-native-redux": "15.1.
|
|
36
|
-
"@applicaster/zapp-react-native-ui-components": "15.1.
|
|
37
|
-
"@applicaster/zapp-react-native-utils": "15.1.
|
|
31
|
+
"@applicaster/applicaster-types": "15.1.7",
|
|
32
|
+
"@applicaster/quick-brick-core-plugins": "15.1.7",
|
|
33
|
+
"@applicaster/zapp-pipes-v2-client": "15.1.7",
|
|
34
|
+
"@applicaster/zapp-react-native-bridge": "15.1.7",
|
|
35
|
+
"@applicaster/zapp-react-native-redux": "15.1.7",
|
|
36
|
+
"@applicaster/zapp-react-native-ui-components": "15.1.7",
|
|
37
|
+
"@applicaster/zapp-react-native-utils": "15.1.7",
|
|
38
38
|
"atob": "^2.1.2",
|
|
39
39
|
"axios": "^0.28.0",
|
|
40
40
|
"btoa": "^1.2.1",
|