@getuserfeedback/react-native 4.0.31 → 5.0.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/README.md +12 -150
- package/dist/client.d.ts +64 -0
- package/dist/client.js +1 -0
- package/dist/core-webview-host.d.ts +0 -1
- package/dist/core-webview-host.js +2 -12
- package/dist/native-core-command-channel.d.ts +1 -0
- package/dist/native-core-command-channel.js +20 -4
- package/dist/native-provider-client-controller.d.ts +11 -0
- package/dist/native-provider-client-controller.js +38 -0
- package/dist/native-provider-client.d.ts +3 -17
- package/dist/native-provider-command-controller.d.ts +19 -0
- package/dist/native-provider-command-controller.js +79 -0
- package/dist/native-provider-flow-registry.d.ts +7 -0
- package/dist/native-provider-flow-registry.js +70 -0
- package/dist/native-provider.d.ts +32 -0
- package/dist/native-provider.js +88 -0
- package/dist/native-runtime-root.d.ts +2 -4
- package/dist/native-runtime-root.js +6 -3
- package/dist/native-view-host-projection.d.ts +1 -2
- package/dist/native-view-host-projection.js +22 -6
- package/dist/native-view-presentation-surface.js +6 -1
- package/dist/native-view-record-controller.d.ts +9 -3
- package/dist/native-view-record-controller.js +276 -50
- package/dist/native-widget-corner-radii.d.ts +1 -2
- package/dist/native-widget-corner-radii.js +1 -1
- package/dist/provider-command-helpers.d.ts +1 -11
- package/dist/provider-command-helpers.js +1 -38
- package/dist/public-api.d.ts +2 -1
- package/dist/public-api.js +2 -1
- package/dist/runtime-endpoints.d.ts +2 -0
- package/dist/runtime-endpoints.js +2 -0
- package/dist/version.js +1 -1
- package/dist/view-orchestration-runtime.js +11 -43
- package/dist/view-webview-host-controller.d.ts +1 -0
- package/dist/view-webview-host-controller.js +1 -0
- package/dist/view-webview-host.d.ts +1 -1
- package/dist/view-webview-host.js +3 -7
- package/dist/webview-document-host.d.ts +2 -3
- package/dist/webview-document-host.js +21 -33
- package/package.json +3 -3
- package/dist/host-viewport.d.ts +0 -3
- package/dist/host-viewport.js +0 -69
- package/dist/index.d.ts +0 -91
- package/dist/index.js +0 -613
- package/dist/provider-command-transport.d.ts +0 -52
- package/dist/provider-command-transport.js +0 -150
- package/dist/provider-message-queue.d.ts +0 -11
- package/dist/provider-message-queue.js +0 -23
- package/dist/provider-pending-commands.d.ts +0 -34
- package/dist/provider-pending-commands.js +0 -58
- package/dist/provider-widget-border-radius.d.ts +0 -11
- package/dist/provider-widget-border-radius.js +0 -102
- package/dist/provider-widget-frame-appearance.d.ts +0 -17
- package/dist/provider-widget-frame-appearance.js +0 -43
- package/dist/provider-widget-host-lifecycle.d.ts +0 -46
- package/dist/provider-widget-host-lifecycle.js +0 -138
- package/dist/provider-widget-host-overlay.d.ts +0 -58
- package/dist/provider-widget-host-overlay.js +0 -616
- package/dist/use-native-direct-command-session-controller.d.ts +0 -2
- package/dist/use-native-direct-command-session-controller.js +0 -21
- package/dist/webview-bridge-script.d.ts +0 -16
- package/dist/webview-bridge-script.js +0 -283
- package/dist/widget-host-lifecycle-machine.d.ts +0 -35
- package/dist/widget-host-lifecycle-machine.js +0 -37
- package/dist/widget-host.d.ts +0 -38
- package/dist/widget-host.js +0 -327
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { resolveWidgetLayoutTransitionExecution, type WidgetFrameAppearance, type WidgetLayoutComparableSizeUpdate, type WidgetLayoutSizeUpdate, type WidgetLayoutTimedCapableTransitionPlan, type WidgetLayoutTransitionPolicy, type WidgetLayoutTransitionSchedule } from "@getuserfeedback/protocol/host";
|
|
2
|
-
import { type ComponentType, type ReactElement, type ReactNode } from "react";
|
|
3
|
-
import { type NativeWidgetBoxShadowSupport } from "./native-widget-frame-shadow.js";
|
|
4
|
-
import type { WidgetHostProps } from "./widget-host.js";
|
|
5
|
-
type NativeViewComponent = ComponentType<Record<string, unknown>>;
|
|
6
|
-
export declare function toProviderWidgetResumedTransitionTiming(input: {
|
|
7
|
-
durationMs: number;
|
|
8
|
-
easing: readonly [number, number, number, number];
|
|
9
|
-
execution: ReturnType<typeof resolveWidgetLayoutTransitionExecution>;
|
|
10
|
-
}): {
|
|
11
|
-
delayMs: number;
|
|
12
|
-
durationMs: number;
|
|
13
|
-
easing: (remainingProgress: number) => number;
|
|
14
|
-
initialProgress: number;
|
|
15
|
-
};
|
|
16
|
-
export declare function toProviderWidgetSheetHostViewport(viewport: WidgetHostProps["hostViewport"], flowSize?: {
|
|
17
|
-
height?: number;
|
|
18
|
-
}): WidgetHostProps["hostViewport"];
|
|
19
|
-
export declare function toProviderWidgetSheetHostLayoutSize(viewport: WidgetHostProps["hostViewport"], flowSize?: {
|
|
20
|
-
height?: number;
|
|
21
|
-
}): WidgetHostProps["hostViewport"];
|
|
22
|
-
export declare function toProviderWidgetSheetHostLayoutUpdate(viewport: WidgetHostProps["hostViewport"], flowSize?: {
|
|
23
|
-
height?: number;
|
|
24
|
-
}): WidgetLayoutSizeUpdate | undefined;
|
|
25
|
-
export declare function toProviderWidgetSheetHostLayoutPlan(input: {
|
|
26
|
-
flowSize?: {
|
|
27
|
-
height?: number;
|
|
28
|
-
};
|
|
29
|
-
nowMs: number;
|
|
30
|
-
previous?: WidgetLayoutComparableSizeUpdate;
|
|
31
|
-
transitionPolicy?: WidgetLayoutTransitionPolicy;
|
|
32
|
-
viewport: WidgetHostProps["hostViewport"];
|
|
33
|
-
}): WidgetLayoutTimedCapableTransitionPlan | undefined;
|
|
34
|
-
export declare function toProviderWidgetHostStyle({ isVisible, webViewStyle, }: {
|
|
35
|
-
isVisible: boolean;
|
|
36
|
-
webViewStyle: unknown;
|
|
37
|
-
}): unknown;
|
|
38
|
-
export declare function toProviderWidgetSheetSurfaceStyles(input: {
|
|
39
|
-
frameAppearance?: WidgetFrameAppearance;
|
|
40
|
-
isVisible: boolean;
|
|
41
|
-
sheetHostLayoutUpdate: WidgetLayoutComparableSizeUpdate | undefined;
|
|
42
|
-
nativeBoxShadowSupport?: NativeWidgetBoxShadowSupport;
|
|
43
|
-
}): {
|
|
44
|
-
contentStyle: Record<string, unknown>;
|
|
45
|
-
frameStyle: Record<string, unknown>;
|
|
46
|
-
sheetStyle: Record<string, unknown>;
|
|
47
|
-
};
|
|
48
|
-
export declare function ProviderWidgetHostOverlay({ children, frameAppearance, isVisible, nativeView, onRequestDismiss, sheetHostLayoutUpdate, transitionSequence, transitionSchedule, }: {
|
|
49
|
-
children?: ReactNode;
|
|
50
|
-
frameAppearance?: WidgetFrameAppearance;
|
|
51
|
-
isVisible: boolean;
|
|
52
|
-
nativeView: NativeViewComponent;
|
|
53
|
-
onRequestDismiss: () => void;
|
|
54
|
-
sheetHostLayoutUpdate: WidgetLayoutComparableSizeUpdate | undefined;
|
|
55
|
-
transitionSequence?: number;
|
|
56
|
-
transitionSchedule?: WidgetLayoutTransitionSchedule;
|
|
57
|
-
}): ReactElement;
|
|
58
|
-
export {};
|
|
@@ -1,616 +0,0 @@
|
|
|
1
|
-
import { areWidgetFrameAppearancesEqual, planWidgetLayoutTransition, resolveWidgetLayoutResumedEasing, resolveWidgetLayoutTransitionExecution, toInstantWidgetLayoutSizeUpdate, } from "@getuserfeedback/protocol/host";
|
|
2
|
-
import { createElement, useCallback, useEffect, useMemo, useRef, useState, } from "react";
|
|
3
|
-
import { toNativeWidgetSupportedBoxShadow, } from "./native-widget-frame-shadow.js";
|
|
4
|
-
import { resolveNativeWidgetBoxShadowSupport } from "./native-widget-frame-shadow-support.js";
|
|
5
|
-
import { toProviderWidgetFrameAppearance } from "./provider-widget-frame-appearance.js";
|
|
6
|
-
const HIDDEN_WIDGET_HOST_STYLE = {
|
|
7
|
-
bottom: 0,
|
|
8
|
-
left: 0,
|
|
9
|
-
opacity: 0,
|
|
10
|
-
position: "absolute",
|
|
11
|
-
right: 0,
|
|
12
|
-
top: 0,
|
|
13
|
-
};
|
|
14
|
-
const WIDGET_SHEET_OVERLAY_STYLE = {
|
|
15
|
-
bottom: 0,
|
|
16
|
-
left: 0,
|
|
17
|
-
position: "absolute",
|
|
18
|
-
right: 0,
|
|
19
|
-
top: 0,
|
|
20
|
-
zIndex: 2147483647,
|
|
21
|
-
};
|
|
22
|
-
const WIDGET_SHEET_BACKDROP_STYLE = {
|
|
23
|
-
backgroundColor: "rgba(15, 23, 42, 0.36)",
|
|
24
|
-
bottom: 0,
|
|
25
|
-
left: 0,
|
|
26
|
-
position: "absolute",
|
|
27
|
-
right: 0,
|
|
28
|
-
top: 0,
|
|
29
|
-
};
|
|
30
|
-
const WIDGET_SHEET_LAYOUT_STYLE = {
|
|
31
|
-
backgroundColor: "#ffffff",
|
|
32
|
-
bottom: 0,
|
|
33
|
-
left: 0,
|
|
34
|
-
position: "absolute",
|
|
35
|
-
right: 0,
|
|
36
|
-
};
|
|
37
|
-
const WIDGET_SHEET_LEGACY_FRAME_STYLE = {
|
|
38
|
-
shadowColor: "#000000",
|
|
39
|
-
shadowOffset: { height: -4, width: 0 },
|
|
40
|
-
shadowOpacity: 0.16,
|
|
41
|
-
shadowRadius: 18,
|
|
42
|
-
elevation: 18,
|
|
43
|
-
};
|
|
44
|
-
const WIDGET_SHEET_CLEARED_FRAME_STYLE = {
|
|
45
|
-
shadowColor: "transparent",
|
|
46
|
-
shadowOffset: { height: 0, width: 0 },
|
|
47
|
-
shadowOpacity: 0,
|
|
48
|
-
shadowRadius: 0,
|
|
49
|
-
elevation: 0,
|
|
50
|
-
};
|
|
51
|
-
const WIDGET_SHEET_CONTENT_BASE_STYLE = {
|
|
52
|
-
backgroundColor: "#ffffff",
|
|
53
|
-
flex: 1,
|
|
54
|
-
overflow: "hidden",
|
|
55
|
-
};
|
|
56
|
-
const WIDGET_SHEET_FRAME_OVERLAY_STYLE = {
|
|
57
|
-
bottom: 0,
|
|
58
|
-
left: 0,
|
|
59
|
-
position: "absolute",
|
|
60
|
-
right: 0,
|
|
61
|
-
top: 0,
|
|
62
|
-
};
|
|
63
|
-
const WIDGET_SHEET_DRAG_HANDLE_TOUCH_STYLE = {
|
|
64
|
-
alignItems: "center",
|
|
65
|
-
elevation: 19,
|
|
66
|
-
height: 32,
|
|
67
|
-
justifyContent: "center",
|
|
68
|
-
left: 0,
|
|
69
|
-
position: "absolute",
|
|
70
|
-
right: 0,
|
|
71
|
-
top: 0,
|
|
72
|
-
zIndex: 1,
|
|
73
|
-
};
|
|
74
|
-
const WIDGET_SHEET_DRAG_HANDLE_INDICATOR_STYLE = {
|
|
75
|
-
backgroundColor: "rgba(15, 23, 42, 0.28)",
|
|
76
|
-
borderRadius: 2,
|
|
77
|
-
height: 4,
|
|
78
|
-
width: 36,
|
|
79
|
-
};
|
|
80
|
-
const VISIBLE_WIDGET_HOST_STYLE = {
|
|
81
|
-
flex: 1,
|
|
82
|
-
};
|
|
83
|
-
const VISIBLE_WIDGET_HOST_LAYOUT_STYLE_KEYS = new Set([
|
|
84
|
-
"alignSelf",
|
|
85
|
-
"bottom",
|
|
86
|
-
"display",
|
|
87
|
-
"end",
|
|
88
|
-
"flex",
|
|
89
|
-
"flexBasis",
|
|
90
|
-
"flexGrow",
|
|
91
|
-
"flexShrink",
|
|
92
|
-
"height",
|
|
93
|
-
"left",
|
|
94
|
-
"margin",
|
|
95
|
-
"marginBottom",
|
|
96
|
-
"marginEnd",
|
|
97
|
-
"marginHorizontal",
|
|
98
|
-
"marginLeft",
|
|
99
|
-
"marginRight",
|
|
100
|
-
"marginStart",
|
|
101
|
-
"marginTop",
|
|
102
|
-
"marginVertical",
|
|
103
|
-
"maxHeight",
|
|
104
|
-
"maxWidth",
|
|
105
|
-
"minHeight",
|
|
106
|
-
"minWidth",
|
|
107
|
-
"position",
|
|
108
|
-
"right",
|
|
109
|
-
"start",
|
|
110
|
-
"top",
|
|
111
|
-
"width",
|
|
112
|
-
]);
|
|
113
|
-
const LOADER_FLOATING_CONTAINER_MIN_HEIGHT = 120;
|
|
114
|
-
const WIDGET_SHEET_SWIPE_DISMISS_DISTANCE = 24;
|
|
115
|
-
function resolveNativePanResponder() {
|
|
116
|
-
var _a;
|
|
117
|
-
try {
|
|
118
|
-
const reactNativeModule = require("react-native");
|
|
119
|
-
return (_a = reactNativeModule.PanResponder) !== null && _a !== void 0 ? _a : null;
|
|
120
|
-
}
|
|
121
|
-
catch (_b) {
|
|
122
|
-
return null;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
function resolveNativeAnimationRuntime() {
|
|
126
|
-
try {
|
|
127
|
-
const reactNativeModule = require("react-native");
|
|
128
|
-
return reactNativeModule.Animated
|
|
129
|
-
? {
|
|
130
|
-
Animated: reactNativeModule.Animated,
|
|
131
|
-
Easing: reactNativeModule.Easing,
|
|
132
|
-
}
|
|
133
|
-
: null;
|
|
134
|
-
}
|
|
135
|
-
catch (_a) {
|
|
136
|
-
return null;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
export function toProviderWidgetResumedTransitionTiming(input) {
|
|
140
|
-
const elapsedProgress = Math.min(1, input.execution.elapsedMs / input.durationMs);
|
|
141
|
-
const initialProgress = resolveWidgetLayoutResumedEasing({
|
|
142
|
-
easing: input.easing,
|
|
143
|
-
elapsedProgress,
|
|
144
|
-
remainingProgress: 0,
|
|
145
|
-
}).initialProgress;
|
|
146
|
-
return {
|
|
147
|
-
delayMs: input.execution.delayMs,
|
|
148
|
-
durationMs: input.execution.durationMs,
|
|
149
|
-
easing: (remainingProgress) => resolveWidgetLayoutResumedEasing({
|
|
150
|
-
easing: input.easing,
|
|
151
|
-
elapsedProgress,
|
|
152
|
-
remainingProgress,
|
|
153
|
-
}).progress,
|
|
154
|
-
initialProgress,
|
|
155
|
-
};
|
|
156
|
-
}
|
|
157
|
-
function toResponderPageY(event) {
|
|
158
|
-
var _a, _b, _c;
|
|
159
|
-
const nativeEvent = event === null || event === void 0 ? void 0 : event.nativeEvent;
|
|
160
|
-
const value = (_a = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.pageY) !== null && _a !== void 0 ? _a : (_c = (_b = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.changedTouches) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.pageY;
|
|
161
|
-
return typeof value === "number" && Number.isFinite(value)
|
|
162
|
-
? value
|
|
163
|
-
: undefined;
|
|
164
|
-
}
|
|
165
|
-
export function toProviderWidgetSheetHostViewport(viewport, flowSize) {
|
|
166
|
-
return toProviderWidgetSheetHostLayoutSize(viewport, flowSize);
|
|
167
|
-
}
|
|
168
|
-
export function toProviderWidgetSheetHostLayoutSize(viewport, flowSize) {
|
|
169
|
-
if (!viewport) {
|
|
170
|
-
return undefined;
|
|
171
|
-
}
|
|
172
|
-
const measuredHeight = typeof (flowSize === null || flowSize === void 0 ? void 0 : flowSize.height) === "number" &&
|
|
173
|
-
Number.isFinite(flowSize.height) &&
|
|
174
|
-
flowSize.height > 0
|
|
175
|
-
? flowSize.height
|
|
176
|
-
: undefined;
|
|
177
|
-
return {
|
|
178
|
-
width: viewport.width,
|
|
179
|
-
height: Math.min(viewport.height, measuredHeight === undefined
|
|
180
|
-
? LOADER_FLOATING_CONTAINER_MIN_HEIGHT
|
|
181
|
-
: Math.max(LOADER_FLOATING_CONTAINER_MIN_HEIGHT, Math.ceil(measuredHeight))),
|
|
182
|
-
};
|
|
183
|
-
}
|
|
184
|
-
export function toProviderWidgetSheetHostLayoutUpdate(viewport, flowSize) {
|
|
185
|
-
const size = toProviderWidgetSheetHostLayoutSize(viewport, flowSize);
|
|
186
|
-
return size === undefined ? undefined : toInstantWidgetLayoutSizeUpdate(size);
|
|
187
|
-
}
|
|
188
|
-
export function toProviderWidgetSheetHostLayoutPlan(input) {
|
|
189
|
-
const size = toProviderWidgetSheetHostLayoutSize(input.viewport, input.flowSize);
|
|
190
|
-
if (!size) {
|
|
191
|
-
return undefined;
|
|
192
|
-
}
|
|
193
|
-
return planWidgetLayoutTransition({
|
|
194
|
-
previous: input.previous,
|
|
195
|
-
size,
|
|
196
|
-
nowMs: input.nowMs,
|
|
197
|
-
transitionPolicy: input.transitionPolicy,
|
|
198
|
-
});
|
|
199
|
-
}
|
|
200
|
-
function toVisibleWidgetHostPresentationStyle(style) {
|
|
201
|
-
if (style === undefined || style === null) {
|
|
202
|
-
return undefined;
|
|
203
|
-
}
|
|
204
|
-
if (Array.isArray(style)) {
|
|
205
|
-
const styles = style
|
|
206
|
-
.map(toVisibleWidgetHostPresentationStyle)
|
|
207
|
-
.filter((entry) => entry !== undefined && entry !== null);
|
|
208
|
-
return styles.length > 0 ? styles : undefined;
|
|
209
|
-
}
|
|
210
|
-
if (typeof style !== "object") {
|
|
211
|
-
return style;
|
|
212
|
-
}
|
|
213
|
-
const presentationStyle = {};
|
|
214
|
-
for (const [key, value] of Object.entries(style)) {
|
|
215
|
-
if (!VISIBLE_WIDGET_HOST_LAYOUT_STYLE_KEYS.has(key)) {
|
|
216
|
-
presentationStyle[key] = value;
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
return Object.keys(presentationStyle).length > 0
|
|
220
|
-
? presentationStyle
|
|
221
|
-
: undefined;
|
|
222
|
-
}
|
|
223
|
-
export function toProviderWidgetHostStyle({ isVisible, webViewStyle, }) {
|
|
224
|
-
if (!isVisible) {
|
|
225
|
-
return webViewStyle !== null && webViewStyle !== void 0 ? webViewStyle : HIDDEN_WIDGET_HOST_STYLE;
|
|
226
|
-
}
|
|
227
|
-
const visiblePresentationStyle = toVisibleWidgetHostPresentationStyle(webViewStyle);
|
|
228
|
-
return visiblePresentationStyle !== undefined
|
|
229
|
-
? [visiblePresentationStyle, VISIBLE_WIDGET_HOST_STYLE]
|
|
230
|
-
: VISIBLE_WIDGET_HOST_STYLE;
|
|
231
|
-
}
|
|
232
|
-
export function toProviderWidgetSheetSurfaceStyles(input) {
|
|
233
|
-
var _a;
|
|
234
|
-
const sheetHostViewport = (_a = input.sheetHostLayoutUpdate) === null || _a === void 0 ? void 0 : _a.size;
|
|
235
|
-
const appearance = toProviderWidgetFrameAppearance(input.frameAppearance, sheetHostViewport);
|
|
236
|
-
const radiusStyle = {
|
|
237
|
-
borderTopLeftRadius: appearance.topLeftRadius,
|
|
238
|
-
borderTopRightRadius: appearance.topRightRadius,
|
|
239
|
-
};
|
|
240
|
-
const nativeBoxShadow = appearance.shadow.kind === "legacy"
|
|
241
|
-
? undefined
|
|
242
|
-
: toNativeWidgetSupportedBoxShadow(appearance.shadow, input.nativeBoxShadowSupport);
|
|
243
|
-
const usesNativeBoxShadow = nativeBoxShadow !== undefined;
|
|
244
|
-
const sheetShadowStyle = appearance.shadow.kind === "legacy"
|
|
245
|
-
? WIDGET_SHEET_LEGACY_FRAME_STYLE
|
|
246
|
-
: appearance.shadow.kind === "resolved" && !usesNativeBoxShadow
|
|
247
|
-
? appearance.shadow.fallbackStyle
|
|
248
|
-
: WIDGET_SHEET_CLEARED_FRAME_STYLE;
|
|
249
|
-
const frameShadowStyle = nativeBoxShadow === undefined ? {} : { boxShadow: nativeBoxShadow };
|
|
250
|
-
return {
|
|
251
|
-
contentStyle: Object.assign(Object.assign({}, WIDGET_SHEET_CONTENT_BASE_STYLE), radiusStyle),
|
|
252
|
-
frameStyle: input.isVisible && sheetHostViewport !== undefined
|
|
253
|
-
? Object.assign(Object.assign(Object.assign(Object.assign({}, WIDGET_SHEET_FRAME_OVERLAY_STYLE), radiusStyle), appearance.borderStyle), frameShadowStyle) : HIDDEN_WIDGET_HOST_STYLE,
|
|
254
|
-
sheetStyle: input.isVisible && sheetHostViewport !== undefined
|
|
255
|
-
? Object.assign(Object.assign(Object.assign(Object.assign({}, WIDGET_SHEET_LAYOUT_STYLE), radiusStyle), sheetShadowStyle), { height: sheetHostViewport.height }) : HIDDEN_WIDGET_HOST_STYLE,
|
|
256
|
-
};
|
|
257
|
-
}
|
|
258
|
-
function useProviderWidgetSheetPresentation(input) {
|
|
259
|
-
var _a, _b, _c;
|
|
260
|
-
const animationRuntime = useMemo(resolveNativeAnimationRuntime, []);
|
|
261
|
-
const animatedValuesRef = useRef(null);
|
|
262
|
-
const animationRef = useRef([]);
|
|
263
|
-
const presentationAttemptRef = useRef(0);
|
|
264
|
-
// Border and shadow stay static across RN capability levels; this clock
|
|
265
|
-
// settles their swap on the same schedule as the numeric frame animation.
|
|
266
|
-
const presentationProgressRef = useRef(null);
|
|
267
|
-
const pendingFrameAppearanceRef = useRef(undefined);
|
|
268
|
-
const presentedFrameAppearanceRef = useRef(input.frameAppearance);
|
|
269
|
-
const presentedSurfaceStylesRef = useRef(input.surfaceStyles);
|
|
270
|
-
const [, setPresentationRevision] = useState(0);
|
|
271
|
-
const consumedTransitionSequenceRef = useRef(undefined);
|
|
272
|
-
const previousFrameRef = useRef(undefined);
|
|
273
|
-
const animatedSurfaceView = useMemo(() => animationRuntime
|
|
274
|
-
? animationRuntime.Animated.createAnimatedComponent(input.nativeView)
|
|
275
|
-
: input.nativeView, [animationRuntime, input.nativeView]);
|
|
276
|
-
const sheetHostViewport = (_a = input.sheetHostLayoutUpdate) === null || _a === void 0 ? void 0 : _a.size;
|
|
277
|
-
const height = sheetHostViewport === null || sheetHostViewport === void 0 ? void 0 : sheetHostViewport.height;
|
|
278
|
-
const topLeftRadius = input.surfaceStyles.sheetStyle.borderTopLeftRadius;
|
|
279
|
-
const topRightRadius = input.surfaceStyles.sheetStyle.borderTopRightRadius;
|
|
280
|
-
const frame = useMemo(() => height !== undefined &&
|
|
281
|
-
typeof topLeftRadius === "number" &&
|
|
282
|
-
typeof topRightRadius === "number"
|
|
283
|
-
? { height, topLeftRadius, topRightRadius }
|
|
284
|
-
: undefined, [height, topLeftRadius, topRightRadius]);
|
|
285
|
-
const hasPendingTimedTransition = input.transitionSequence !== undefined &&
|
|
286
|
-
consumedTransitionSequenceRef.current !== input.transitionSequence;
|
|
287
|
-
const shouldUseAnimatedStyle = animationRuntime !== null &&
|
|
288
|
-
input.isVisible &&
|
|
289
|
-
frame !== undefined &&
|
|
290
|
-
previousFrameRef.current !== undefined &&
|
|
291
|
-
((_b = input.sheetHostLayoutUpdate) === null || _b === void 0 ? void 0 : _b.transition.kind) === "timed" &&
|
|
292
|
-
(hasPendingTimedTransition || animationRef.current.length > 0);
|
|
293
|
-
const surfaceView = animationRuntime ? animatedSurfaceView : input.nativeView;
|
|
294
|
-
if (animationRuntime && frame && animatedValuesRef.current === null) {
|
|
295
|
-
animatedValuesRef.current = {
|
|
296
|
-
height: new animationRuntime.Animated.Value(frame.height),
|
|
297
|
-
topLeftRadius: new animationRuntime.Animated.Value(frame.topLeftRadius),
|
|
298
|
-
topRightRadius: new animationRuntime.Animated.Value(frame.topRightRadius),
|
|
299
|
-
};
|
|
300
|
-
presentationProgressRef.current = new animationRuntime.Animated.Value(0);
|
|
301
|
-
}
|
|
302
|
-
useEffect(() => {
|
|
303
|
-
var _a, _b, _c, _d, _e, _f;
|
|
304
|
-
const stopAnimations = (property) => {
|
|
305
|
-
var _a, _b;
|
|
306
|
-
const retained = [];
|
|
307
|
-
for (const animation of animationRef.current) {
|
|
308
|
-
if (property === undefined || animation.property === property) {
|
|
309
|
-
(_b = (_a = animation.handle).stop) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
310
|
-
}
|
|
311
|
-
else {
|
|
312
|
-
retained.push(animation);
|
|
313
|
-
}
|
|
314
|
-
}
|
|
315
|
-
animationRef.current = retained;
|
|
316
|
-
};
|
|
317
|
-
if (!animationRuntime || !frame || !input.isVisible) {
|
|
318
|
-
presentationAttemptRef.current += 1;
|
|
319
|
-
pendingFrameAppearanceRef.current = undefined;
|
|
320
|
-
stopAnimations();
|
|
321
|
-
previousFrameRef.current = undefined;
|
|
322
|
-
presentedFrameAppearanceRef.current = input.frameAppearance;
|
|
323
|
-
presentedSurfaceStylesRef.current = input.surfaceStyles;
|
|
324
|
-
return;
|
|
325
|
-
}
|
|
326
|
-
const animatedValues = animatedValuesRef.current;
|
|
327
|
-
if (!animatedValues) {
|
|
328
|
-
return;
|
|
329
|
-
}
|
|
330
|
-
const previousFrame = previousFrameRef.current;
|
|
331
|
-
previousFrameRef.current = frame;
|
|
332
|
-
const transition = (_a = input.sheetHostLayoutUpdate) === null || _a === void 0 ? void 0 : _a.transition;
|
|
333
|
-
const transitionExecution = (transition === null || transition === void 0 ? void 0 : transition.kind) === "timed"
|
|
334
|
-
? resolveWidgetLayoutTransitionExecution({
|
|
335
|
-
schedule: input.transitionSchedule,
|
|
336
|
-
durationMs: transition.durationMs,
|
|
337
|
-
nowEpochMs: Date.now(),
|
|
338
|
-
})
|
|
339
|
-
: undefined;
|
|
340
|
-
const hasNewTransitionPolicy = input.transitionSequence !== undefined &&
|
|
341
|
-
consumedTransitionSequenceRef.current !== input.transitionSequence;
|
|
342
|
-
const shouldAnimate = (transition === null || transition === void 0 ? void 0 : transition.kind) === "timed" &&
|
|
343
|
-
hasNewTransitionPolicy &&
|
|
344
|
-
(transitionExecution === null || transitionExecution === void 0 ? void 0 : transitionExecution.isComplete) !== true;
|
|
345
|
-
if (hasNewTransitionPolicy) {
|
|
346
|
-
consumedTransitionSequenceRef.current = input.transitionSequence;
|
|
347
|
-
}
|
|
348
|
-
if (previousFrame === undefined || (transition === null || transition === void 0 ? void 0 : transition.kind) === "instant") {
|
|
349
|
-
presentationAttemptRef.current += 1;
|
|
350
|
-
pendingFrameAppearanceRef.current = undefined;
|
|
351
|
-
stopAnimations();
|
|
352
|
-
presentedFrameAppearanceRef.current = input.frameAppearance;
|
|
353
|
-
presentedSurfaceStylesRef.current = input.surfaceStyles;
|
|
354
|
-
animatedValues.height.setValue(frame.height);
|
|
355
|
-
animatedValues.topLeftRadius.setValue(frame.topLeftRadius);
|
|
356
|
-
animatedValues.topRightRadius.setValue(frame.topRightRadius);
|
|
357
|
-
return;
|
|
358
|
-
}
|
|
359
|
-
const values = {
|
|
360
|
-
height: animatedValues.height,
|
|
361
|
-
topLeftRadius: animatedValues.topLeftRadius,
|
|
362
|
-
topRightRadius: animatedValues.topRightRadius,
|
|
363
|
-
};
|
|
364
|
-
if (!shouldAnimate) {
|
|
365
|
-
const hasActiveAppearanceTransition = animationRef.current.some((animation) => animation.property === "appearance");
|
|
366
|
-
const didUncoordinatedAppearanceChange = hasActiveAppearanceTransition &&
|
|
367
|
-
!areWidgetFrameAppearancesEqual(pendingFrameAppearanceRef.current, input.frameAppearance);
|
|
368
|
-
if (didUncoordinatedAppearanceChange) {
|
|
369
|
-
presentationAttemptRef.current += 1;
|
|
370
|
-
pendingFrameAppearanceRef.current = undefined;
|
|
371
|
-
stopAnimations("appearance");
|
|
372
|
-
presentedSurfaceStylesRef.current = input.surfaceStyles;
|
|
373
|
-
presentedFrameAppearanceRef.current = input.frameAppearance;
|
|
374
|
-
setPresentationRevision((revision) => revision + 1);
|
|
375
|
-
}
|
|
376
|
-
else if (!hasActiveAppearanceTransition &&
|
|
377
|
-
!areWidgetFrameAppearancesEqual(presentedFrameAppearanceRef.current, input.frameAppearance)) {
|
|
378
|
-
presentedSurfaceStylesRef.current = input.surfaceStyles;
|
|
379
|
-
presentedFrameAppearanceRef.current = input.frameAppearance;
|
|
380
|
-
setPresentationRevision((revision) => revision + 1);
|
|
381
|
-
}
|
|
382
|
-
for (const property of [
|
|
383
|
-
"height",
|
|
384
|
-
"topLeftRadius",
|
|
385
|
-
"topRightRadius",
|
|
386
|
-
]) {
|
|
387
|
-
if (previousFrame[property] !== frame[property]) {
|
|
388
|
-
stopAnimations(property);
|
|
389
|
-
values[property].setValue(frame[property]);
|
|
390
|
-
}
|
|
391
|
-
}
|
|
392
|
-
return;
|
|
393
|
-
}
|
|
394
|
-
const targetSurfaceStyles = input.surfaceStyles;
|
|
395
|
-
const targetFrameAppearance = input.frameAppearance;
|
|
396
|
-
const didFrameAppearanceChange = !areWidgetFrameAppearancesEqual(presentedFrameAppearanceRef.current, targetFrameAppearance);
|
|
397
|
-
const hasActiveAppearanceTransition = animationRef.current.some((animation) => animation.property === "appearance");
|
|
398
|
-
const shouldReplaceAppearanceTransition = didFrameAppearanceChange || hasActiveAppearanceTransition;
|
|
399
|
-
const presentationAttempt = shouldReplaceAppearanceTransition
|
|
400
|
-
? presentationAttemptRef.current + 1
|
|
401
|
-
: presentationAttemptRef.current;
|
|
402
|
-
if (shouldReplaceAppearanceTransition) {
|
|
403
|
-
presentationAttemptRef.current = presentationAttempt;
|
|
404
|
-
pendingFrameAppearanceRef.current = undefined;
|
|
405
|
-
stopAnimations("appearance");
|
|
406
|
-
}
|
|
407
|
-
const presentTargetSurfaceStyles = () => {
|
|
408
|
-
if (presentationAttemptRef.current !== presentationAttempt) {
|
|
409
|
-
return;
|
|
410
|
-
}
|
|
411
|
-
presentedFrameAppearanceRef.current = targetFrameAppearance;
|
|
412
|
-
presentedSurfaceStylesRef.current = targetSurfaceStyles;
|
|
413
|
-
pendingFrameAppearanceRef.current = undefined;
|
|
414
|
-
setPresentationRevision((revision) => revision + 1);
|
|
415
|
-
};
|
|
416
|
-
const resumedTiming = transition.easing.kind === "cubic-bezier" &&
|
|
417
|
-
transitionExecution &&
|
|
418
|
-
transitionExecution.elapsedMs > 0
|
|
419
|
-
? toProviderWidgetResumedTransitionTiming({
|
|
420
|
-
durationMs: transition.durationMs,
|
|
421
|
-
easing: transition.easing.points,
|
|
422
|
-
execution: transitionExecution,
|
|
423
|
-
})
|
|
424
|
-
: undefined;
|
|
425
|
-
const easing = (_b = resumedTiming === null || resumedTiming === void 0 ? void 0 : resumedTiming.easing) !== null && _b !== void 0 ? _b : (transition.easing.kind === "cubic-bezier"
|
|
426
|
-
? (_d = (_c = animationRuntime.Easing) === null || _c === void 0 ? void 0 : _c.bezier) === null || _d === void 0 ? void 0 : _d.call(_c, ...transition.easing.points)
|
|
427
|
-
: undefined);
|
|
428
|
-
const animate = (property, value, toValue) => {
|
|
429
|
-
var _a, _b, _c, _d;
|
|
430
|
-
return ({
|
|
431
|
-
handle: animationRuntime.Animated.timing(value, {
|
|
432
|
-
toValue,
|
|
433
|
-
duration: (_b = (_a = resumedTiming === null || resumedTiming === void 0 ? void 0 : resumedTiming.durationMs) !== null && _a !== void 0 ? _a : transitionExecution === null || transitionExecution === void 0 ? void 0 : transitionExecution.durationMs) !== null && _b !== void 0 ? _b : transition.durationMs,
|
|
434
|
-
delay: (_d = (_c = resumedTiming === null || resumedTiming === void 0 ? void 0 : resumedTiming.delayMs) !== null && _c !== void 0 ? _c : transitionExecution === null || transitionExecution === void 0 ? void 0 : transitionExecution.delayMs) !== null && _d !== void 0 ? _d : 0,
|
|
435
|
-
easing,
|
|
436
|
-
useNativeDriver: false,
|
|
437
|
-
}),
|
|
438
|
-
property,
|
|
439
|
-
});
|
|
440
|
-
};
|
|
441
|
-
const activeProperties = new Set(animationRef.current.map((animation) => animation.property));
|
|
442
|
-
const animations = [];
|
|
443
|
-
for (const property of [
|
|
444
|
-
"height",
|
|
445
|
-
"topLeftRadius",
|
|
446
|
-
"topRightRadius",
|
|
447
|
-
]) {
|
|
448
|
-
if (previousFrame[property] !== frame[property] ||
|
|
449
|
-
activeProperties.has(property)) {
|
|
450
|
-
stopAnimations(property);
|
|
451
|
-
if (((_e = transitionExecution === null || transitionExecution === void 0 ? void 0 : transitionExecution.elapsedMs) !== null && _e !== void 0 ? _e : 0) > 0 && resumedTiming) {
|
|
452
|
-
values[property].setValue(previousFrame[property] +
|
|
453
|
-
(frame[property] - previousFrame[property]) *
|
|
454
|
-
resumedTiming.initialProgress);
|
|
455
|
-
}
|
|
456
|
-
animations.push(animate(property, values[property], frame[property]));
|
|
457
|
-
}
|
|
458
|
-
}
|
|
459
|
-
if (didFrameAppearanceChange && presentationProgressRef.current !== null) {
|
|
460
|
-
presentationProgressRef.current.setValue((_f = resumedTiming === null || resumedTiming === void 0 ? void 0 : resumedTiming.initialProgress) !== null && _f !== void 0 ? _f : 0);
|
|
461
|
-
pendingFrameAppearanceRef.current = targetFrameAppearance;
|
|
462
|
-
animations.push(animate("appearance", presentationProgressRef.current, 1));
|
|
463
|
-
}
|
|
464
|
-
if (animations.length === 0) {
|
|
465
|
-
pendingFrameAppearanceRef.current = undefined;
|
|
466
|
-
presentedFrameAppearanceRef.current = targetFrameAppearance;
|
|
467
|
-
presentedSurfaceStylesRef.current = targetSurfaceStyles;
|
|
468
|
-
return;
|
|
469
|
-
}
|
|
470
|
-
animationRef.current.push(...animations);
|
|
471
|
-
for (const animation of animations) {
|
|
472
|
-
animation.handle.start((result) => {
|
|
473
|
-
animationRef.current = animationRef.current.filter((candidate) => candidate !== animation);
|
|
474
|
-
if (animation.property !== "appearance") {
|
|
475
|
-
return;
|
|
476
|
-
}
|
|
477
|
-
if ((result === null || result === void 0 ? void 0 : result.finished) !== false &&
|
|
478
|
-
presentationAttemptRef.current === presentationAttempt) {
|
|
479
|
-
presentTargetSurfaceStyles();
|
|
480
|
-
}
|
|
481
|
-
});
|
|
482
|
-
}
|
|
483
|
-
}, [
|
|
484
|
-
animationRuntime,
|
|
485
|
-
frame,
|
|
486
|
-
input.frameAppearance,
|
|
487
|
-
input.isVisible,
|
|
488
|
-
(_c = input.sheetHostLayoutUpdate) === null || _c === void 0 ? void 0 : _c.transition,
|
|
489
|
-
input.surfaceStyles,
|
|
490
|
-
input.transitionSequence,
|
|
491
|
-
input.transitionSchedule,
|
|
492
|
-
]);
|
|
493
|
-
useEffect(() => () => {
|
|
494
|
-
var _a, _b;
|
|
495
|
-
for (const animation of animationRef.current) {
|
|
496
|
-
(_b = (_a = animation.handle).stop) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
497
|
-
}
|
|
498
|
-
animationRef.current = [];
|
|
499
|
-
}, []);
|
|
500
|
-
const animatedValues = animatedValuesRef.current;
|
|
501
|
-
if (!shouldUseAnimatedStyle || animatedValues === null) {
|
|
502
|
-
return Object.assign(Object.assign({}, input.surfaceStyles), { surfaceView });
|
|
503
|
-
}
|
|
504
|
-
const presentedSurfaceStyles = presentedSurfaceStylesRef.current;
|
|
505
|
-
const animatedRadiusStyle = {
|
|
506
|
-
borderTopLeftRadius: animatedValues.topLeftRadius,
|
|
507
|
-
borderTopRightRadius: animatedValues.topRightRadius,
|
|
508
|
-
};
|
|
509
|
-
return {
|
|
510
|
-
contentStyle: Object.assign(Object.assign({}, presentedSurfaceStyles.contentStyle), animatedRadiusStyle),
|
|
511
|
-
frameStyle: Object.assign(Object.assign({}, presentedSurfaceStyles.frameStyle), animatedRadiusStyle),
|
|
512
|
-
sheetStyle: Object.assign(Object.assign(Object.assign({}, presentedSurfaceStyles.sheetStyle), animatedRadiusStyle), { height: animatedValues.height }),
|
|
513
|
-
surfaceView,
|
|
514
|
-
};
|
|
515
|
-
}
|
|
516
|
-
export function ProviderWidgetHostOverlay({ children, frameAppearance, isVisible, nativeView, onRequestDismiss, sheetHostLayoutUpdate, transitionSequence, transitionSchedule, }) {
|
|
517
|
-
const dragStartYRef = useRef(undefined);
|
|
518
|
-
const handleDragGrant = useCallback((event) => {
|
|
519
|
-
dragStartYRef.current = toResponderPageY(event);
|
|
520
|
-
}, []);
|
|
521
|
-
const handleDragRelease = useCallback((event) => {
|
|
522
|
-
const startY = dragStartYRef.current;
|
|
523
|
-
dragStartYRef.current = undefined;
|
|
524
|
-
const endY = toResponderPageY(event);
|
|
525
|
-
if (startY === undefined ||
|
|
526
|
-
endY === undefined ||
|
|
527
|
-
endY - startY < WIDGET_SHEET_SWIPE_DISMISS_DISTANCE) {
|
|
528
|
-
return;
|
|
529
|
-
}
|
|
530
|
-
onRequestDismiss();
|
|
531
|
-
}, [onRequestDismiss]);
|
|
532
|
-
const dragHandleGestureProps = useMemo(() => {
|
|
533
|
-
const panResponder = resolveNativePanResponder();
|
|
534
|
-
if (panResponder) {
|
|
535
|
-
try {
|
|
536
|
-
return panResponder.create({
|
|
537
|
-
onMoveShouldSetPanResponder: (_event, gestureState) => typeof gestureState.dy === "number" &&
|
|
538
|
-
gestureState.dy >=
|
|
539
|
-
Math.min(12, WIDGET_SHEET_SWIPE_DISMISS_DISTANCE),
|
|
540
|
-
onPanResponderGrant: handleDragGrant,
|
|
541
|
-
onPanResponderRelease: (_event, gestureState) => {
|
|
542
|
-
if (!gestureState) {
|
|
543
|
-
handleDragRelease(_event);
|
|
544
|
-
return;
|
|
545
|
-
}
|
|
546
|
-
if (typeof gestureState.dy !== "number" ||
|
|
547
|
-
gestureState.dy < WIDGET_SHEET_SWIPE_DISMISS_DISTANCE) {
|
|
548
|
-
return;
|
|
549
|
-
}
|
|
550
|
-
onRequestDismiss();
|
|
551
|
-
},
|
|
552
|
-
onStartShouldSetPanResponder: () => true,
|
|
553
|
-
}).panHandlers;
|
|
554
|
-
}
|
|
555
|
-
catch (_a) {
|
|
556
|
-
// Fall back to the plain responder/touch path below.
|
|
557
|
-
}
|
|
558
|
-
}
|
|
559
|
-
return {
|
|
560
|
-
onResponderGrant: handleDragGrant,
|
|
561
|
-
onResponderRelease: handleDragRelease,
|
|
562
|
-
onStartShouldSetResponder: () => true,
|
|
563
|
-
onTouchEnd: handleDragRelease,
|
|
564
|
-
onTouchStart: handleDragGrant,
|
|
565
|
-
};
|
|
566
|
-
}, [handleDragGrant, handleDragRelease, onRequestDismiss]);
|
|
567
|
-
const sheetHostViewport = sheetHostLayoutUpdate === null || sheetHostLayoutUpdate === void 0 ? void 0 : sheetHostLayoutUpdate.size;
|
|
568
|
-
const isSheetVisible = isVisible && sheetHostViewport !== undefined;
|
|
569
|
-
const pointerEvents = isSheetVisible ? "auto" : "none";
|
|
570
|
-
const nativeBoxShadowSupport = useMemo(resolveNativeWidgetBoxShadowSupport, []);
|
|
571
|
-
const surfaceStyles = useMemo(() => toProviderWidgetSheetSurfaceStyles({
|
|
572
|
-
frameAppearance,
|
|
573
|
-
isVisible,
|
|
574
|
-
sheetHostLayoutUpdate,
|
|
575
|
-
nativeBoxShadowSupport,
|
|
576
|
-
}), [frameAppearance, isVisible, nativeBoxShadowSupport, sheetHostLayoutUpdate]);
|
|
577
|
-
const sheetPresentation = useProviderWidgetSheetPresentation({
|
|
578
|
-
frameAppearance,
|
|
579
|
-
isVisible,
|
|
580
|
-
nativeView,
|
|
581
|
-
sheetHostLayoutUpdate,
|
|
582
|
-
surfaceStyles,
|
|
583
|
-
transitionSequence,
|
|
584
|
-
transitionSchedule,
|
|
585
|
-
});
|
|
586
|
-
return createElement(nativeView, {
|
|
587
|
-
pointerEvents,
|
|
588
|
-
style: isSheetVisible
|
|
589
|
-
? WIDGET_SHEET_OVERLAY_STYLE
|
|
590
|
-
: HIDDEN_WIDGET_HOST_STYLE,
|
|
591
|
-
testID: "gx-widget-host-overlay",
|
|
592
|
-
}, createElement(nativeView, {
|
|
593
|
-
pointerEvents,
|
|
594
|
-
style: isSheetVisible
|
|
595
|
-
? WIDGET_SHEET_BACKDROP_STYLE
|
|
596
|
-
: HIDDEN_WIDGET_HOST_STYLE,
|
|
597
|
-
testID: "gx-widget-host-backdrop",
|
|
598
|
-
}), createElement(sheetPresentation.surfaceView, {
|
|
599
|
-
pointerEvents,
|
|
600
|
-
style: sheetPresentation.sheetStyle,
|
|
601
|
-
testID: "gx-widget-host-sheet",
|
|
602
|
-
}, createElement(sheetPresentation.surfaceView, {
|
|
603
|
-
pointerEvents,
|
|
604
|
-
style: sheetPresentation.contentStyle,
|
|
605
|
-
testID: "gx-widget-host-sheet-content",
|
|
606
|
-
}, children, isSheetVisible
|
|
607
|
-
? createElement(nativeView, Object.assign(Object.assign({}, dragHandleGestureProps), { style: WIDGET_SHEET_DRAG_HANDLE_TOUCH_STYLE, testID: "gx-widget-host-drag-handle" }), createElement(nativeView, {
|
|
608
|
-
style: WIDGET_SHEET_DRAG_HANDLE_INDICATOR_STYLE,
|
|
609
|
-
testID: "gx-widget-host-drag-handle-indicator",
|
|
610
|
-
}))
|
|
611
|
-
: null), createElement(sheetPresentation.surfaceView, {
|
|
612
|
-
pointerEvents: "none",
|
|
613
|
-
style: sheetPresentation.frameStyle,
|
|
614
|
-
testID: "gx-widget-host-sheet-frame",
|
|
615
|
-
})));
|
|
616
|
-
}
|