@tamagui/sheet 1.0.1-beta.149 → 1.0.1-beta.152
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/dist/cjs/Sheet.js +386 -338
- package/dist/cjs/Sheet.js.map +2 -2
- package/dist/cjs/SheetContext.js +4 -1
- package/dist/cjs/SheetContext.js.map +1 -1
- package/dist/cjs/SheetScrollView.js +79 -79
- package/dist/cjs/SheetScrollView.js.map +1 -1
- package/dist/esm/Sheet.js +382 -337
- package/dist/esm/Sheet.js.map +2 -2
- package/dist/esm/SheetContext.js +4 -1
- package/dist/esm/SheetContext.js.map +1 -1
- package/dist/esm/SheetScrollView.js +79 -76
- package/dist/esm/SheetScrollView.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/jsx/Sheet.js +331 -300
- package/dist/jsx/Sheet.js.map +2 -2
- package/dist/jsx/SheetContext.js +4 -1
- package/dist/jsx/SheetContext.js.map +1 -1
- package/dist/jsx/SheetScrollView.js +68 -66
- package/dist/jsx/SheetScrollView.js.map +1 -1
- package/dist/jsx/index.js.map +1 -1
- package/package.json +9 -9
package/dist/cjs/Sheet.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var Sheet_exports = {};
|
|
23
26
|
__export(Sheet_exports, {
|
|
@@ -32,6 +35,7 @@ __export(Sheet_exports, {
|
|
|
32
35
|
createSheetScope: () => import_SheetContext2.createSheetScope
|
|
33
36
|
});
|
|
34
37
|
module.exports = __toCommonJS(Sheet_exports);
|
|
38
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
39
|
var import_compose_refs = require("@tamagui/compose-refs");
|
|
36
40
|
var import_core = require("@tamagui/core");
|
|
37
41
|
var import_portal = require("@tamagui/portal");
|
|
@@ -68,18 +72,20 @@ const SheetHandleFrame = (0, import_core.styled)(import_stacks.XStack, {
|
|
|
68
72
|
}
|
|
69
73
|
}
|
|
70
74
|
});
|
|
71
|
-
const SheetHandle = SheetHandleFrame.extractable(
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
});
|
|
75
|
+
const SheetHandle = SheetHandleFrame.extractable(
|
|
76
|
+
({ __scopeSheet, ...props }) => {
|
|
77
|
+
const context = (0, import_SheetContext.useSheetContext)(import_SHEET_HANDLE_NAME.SHEET_HANDLE_NAME, __scopeSheet);
|
|
78
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetHandleFrame, {
|
|
79
|
+
onPress: () => {
|
|
80
|
+
const max = context.snapPoints.length + (context.dismissOnSnapToBottom ? -1 : 0);
|
|
81
|
+
const nextPos = (context.position + 1) % max;
|
|
82
|
+
context.setPosition(nextPos);
|
|
83
|
+
},
|
|
84
|
+
open: context.open,
|
|
85
|
+
...props
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
);
|
|
83
89
|
const SHEET_OVERLAY_NAME = "SheetOverlay";
|
|
84
90
|
const SheetOverlayFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
85
91
|
name: SHEET_OVERLAY_NAME,
|
|
@@ -99,16 +105,21 @@ const SheetOverlayFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
|
99
105
|
}
|
|
100
106
|
}
|
|
101
107
|
});
|
|
102
|
-
const SheetOverlay = SheetOverlayFrame.extractable(
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
108
|
+
const SheetOverlay = SheetOverlayFrame.extractable(
|
|
109
|
+
({ __scopeSheet, ...props }) => {
|
|
110
|
+
const context = (0, import_SheetContext.useSheetContext)(SHEET_OVERLAY_NAME, __scopeSheet);
|
|
111
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetOverlayFrame, {
|
|
112
|
+
closed: !context.open || context.hidden,
|
|
113
|
+
...props,
|
|
114
|
+
onPress: (0, import_core.mergeEvent)(
|
|
115
|
+
props.onPress,
|
|
116
|
+
context.dismissOnOverlayPress ? () => {
|
|
117
|
+
context.setOpen(false);
|
|
118
|
+
} : void 0
|
|
119
|
+
)
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
);
|
|
112
123
|
const selectionStyleSheet = import_core.isClient ? document.createElement("style") : null;
|
|
113
124
|
if (selectionStyleSheet) {
|
|
114
125
|
document.head.appendChild(selectionStyleSheet);
|
|
@@ -124,323 +135,356 @@ const SheetFrameFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
|
124
135
|
overflow: "hidden",
|
|
125
136
|
pointerEvents: "auto"
|
|
126
137
|
});
|
|
127
|
-
const SheetFrame = SheetFrameFrame.extractable(
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
})
|
|
138
|
+
const SheetFrame = SheetFrameFrame.extractable(
|
|
139
|
+
(0, import_react.forwardRef)(({ __scopeSheet, ...props }, forwardedRef) => {
|
|
140
|
+
const context = (0, import_SheetContext.useSheetContext)(import_SHEET_HANDLE_NAME.SHEET_NAME, __scopeSheet);
|
|
141
|
+
const composedContentRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.contentRef);
|
|
142
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetFrameFrame, {
|
|
143
|
+
ref: composedContentRef,
|
|
144
|
+
...props
|
|
145
|
+
});
|
|
146
|
+
})
|
|
147
|
+
);
|
|
135
148
|
const HIDDEN_SIZE = 1e4;
|
|
136
|
-
const Sheet = (0, import_core.withStaticProperties)(
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
const themeName = (0, import_core.useThemeName)();
|
|
167
|
-
const contentRef = import_react.default.useRef(null);
|
|
168
|
-
const scrollBridge = (0, import_core.useConstant)(() => ({
|
|
169
|
-
enabled: false,
|
|
170
|
-
y: 0,
|
|
171
|
-
paneY: 0,
|
|
172
|
-
paneMinY: 0,
|
|
173
|
-
scrollStartY: -1,
|
|
174
|
-
drag: () => {
|
|
175
|
-
},
|
|
176
|
-
release: () => {
|
|
177
|
-
},
|
|
178
|
-
scrollLock: false
|
|
179
|
-
}));
|
|
180
|
-
const onChangeOpenInternal = (val) => {
|
|
181
|
-
var _a;
|
|
182
|
-
(_a = controller == null ? void 0 : controller.onChangeOpen) == null ? void 0 : _a.call(controller, val);
|
|
183
|
-
onChangeOpen == null ? void 0 : onChangeOpen(val);
|
|
184
|
-
};
|
|
185
|
-
const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
186
|
-
prop: (controller == null ? void 0 : controller.open) ?? openProp,
|
|
187
|
-
defaultProp: defaultOpen || true,
|
|
188
|
-
onChange: onChangeOpenInternal,
|
|
189
|
-
strategy: "most-recent-wins"
|
|
190
|
-
});
|
|
191
|
-
const [frameSize, setFrameSize] = (0, import_react.useState)(0);
|
|
192
|
-
const snapPoints = (0, import_react.useMemo)(() => dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp, [JSON.stringify(snapPointsProp), dismissOnSnapToBottom]);
|
|
193
|
-
const [position_, setPosition_] = (0, import_use_controllable_state.useControllableState)({
|
|
194
|
-
prop: positionProp,
|
|
195
|
-
defaultProp: defaultPosition || (open ? 0 : -1),
|
|
196
|
-
onChange: onChangePosition,
|
|
197
|
-
strategy: "most-recent-wins"
|
|
198
|
-
});
|
|
199
|
-
const position = open === false ? -1 : position_;
|
|
200
|
-
if (open && dismissOnSnapToBottom && position === snapPoints.length - 1) {
|
|
201
|
-
setPosition_(0);
|
|
202
|
-
}
|
|
203
|
-
const setPosition = (0, import_react.useCallback)((next) => {
|
|
204
|
-
if (dismissOnSnapToBottom && next === snapPoints.length - 1) {
|
|
205
|
-
setOpen(false);
|
|
206
|
-
} else {
|
|
207
|
-
setPosition_(next);
|
|
208
|
-
}
|
|
209
|
-
}, [dismissOnSnapToBottom, snapPoints.length, setPosition_, setOpen]);
|
|
210
|
-
const animatedNumber = driver.useAnimatedNumber(HIDDEN_SIZE);
|
|
211
|
-
const at = (0, import_react.useRef)(0);
|
|
212
|
-
driver.useAnimatedNumberReaction(animatedNumber, (value) => {
|
|
213
|
-
at.current = value;
|
|
214
|
-
scrollBridge.paneY = value;
|
|
215
|
-
});
|
|
216
|
-
const [isResizing, setIsResizing] = (0, import_react.useState)(true);
|
|
217
|
-
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
218
|
-
if (!isResizing) {
|
|
219
|
-
setIsResizing(true);
|
|
220
|
-
}
|
|
221
|
-
}, [modal]);
|
|
222
|
-
function stopSpring() {
|
|
223
|
-
animatedNumber.stop();
|
|
224
|
-
if (scrollBridge.onFinishAnimate) {
|
|
225
|
-
scrollBridge.onFinishAnimate();
|
|
226
|
-
scrollBridge.onFinishAnimate = void 0;
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
const shouldSetPositionOpen = open && position < 0;
|
|
230
|
-
(0, import_react.useEffect)(() => {
|
|
231
|
-
if (shouldSetPositionOpen) {
|
|
232
|
-
setPosition(0);
|
|
233
|
-
}
|
|
234
|
-
}, [setPosition, shouldSetPositionOpen]);
|
|
235
|
-
const positions = (0, import_react.useMemo)(() => snapPoints.map((point) => getPercentSize(point, frameSize)), [frameSize, snapPoints]);
|
|
236
|
-
const animateTo = (0, import_core.useEvent)((position2) => {
|
|
237
|
-
const current = animatedNumber.getValue();
|
|
238
|
-
if (isHidden && open)
|
|
239
|
-
return;
|
|
240
|
-
if (!current)
|
|
241
|
-
return;
|
|
242
|
-
if (frameSize === 0)
|
|
243
|
-
return;
|
|
244
|
-
const hiddenValue = frameSize === 0 ? HIDDEN_SIZE : frameSize;
|
|
245
|
-
const toValue = isHidden || position2 === -1 ? hiddenValue : positions[position2];
|
|
246
|
-
if (at.current === toValue)
|
|
247
|
-
return;
|
|
248
|
-
stopSpring();
|
|
249
|
-
if (isHidden || isResizing) {
|
|
250
|
-
if (isResizing) {
|
|
251
|
-
setIsResizing(false);
|
|
149
|
+
const Sheet = (0, import_core.withStaticProperties)(
|
|
150
|
+
(0, import_core.themeable)(
|
|
151
|
+
(0, import_react.forwardRef)(function Sheet2(props, ref) {
|
|
152
|
+
const {
|
|
153
|
+
__scopeSheet,
|
|
154
|
+
snapPoints: snapPointsProp = [80],
|
|
155
|
+
open: openProp,
|
|
156
|
+
defaultOpen,
|
|
157
|
+
children: childrenProp,
|
|
158
|
+
position: positionProp,
|
|
159
|
+
onChangePosition,
|
|
160
|
+
onChangeOpen,
|
|
161
|
+
defaultPosition,
|
|
162
|
+
dismissOnOverlayPress = true,
|
|
163
|
+
animationConfig,
|
|
164
|
+
dismissOnSnapToBottom = false,
|
|
165
|
+
disableDrag: disableDragProp,
|
|
166
|
+
modal = false,
|
|
167
|
+
handleDisableScroll = true
|
|
168
|
+
} = props;
|
|
169
|
+
if (process.env.NODE_ENV === "development") {
|
|
170
|
+
if (snapPointsProp.some((p) => p < 0 || p > 100)) {
|
|
171
|
+
console.warn(
|
|
172
|
+
`\u26A0\uFE0F Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame`
|
|
173
|
+
);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
const driver = (0, import_core.getAnimationDriver)();
|
|
177
|
+
if (!driver) {
|
|
178
|
+
throw new Error(`Must set animations in tamagui.config.ts`);
|
|
252
179
|
}
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
180
|
+
const controller = (0, import_react.useContext)(SheetControllerContext);
|
|
181
|
+
const isHidden = (controller == null ? void 0 : controller.hidden) || false;
|
|
182
|
+
const disableDrag = disableDragProp ?? (controller == null ? void 0 : controller.disableDrag);
|
|
183
|
+
const themeName = (0, import_core.useThemeName)();
|
|
184
|
+
const contentRef = import_react.default.useRef(null);
|
|
185
|
+
const scrollBridge = (0, import_core.useConstant)(() => ({
|
|
186
|
+
enabled: false,
|
|
187
|
+
y: 0,
|
|
188
|
+
paneY: 0,
|
|
189
|
+
paneMinY: 0,
|
|
190
|
+
scrollStartY: -1,
|
|
191
|
+
drag: () => {
|
|
192
|
+
},
|
|
193
|
+
release: () => {
|
|
194
|
+
},
|
|
195
|
+
scrollLock: false
|
|
196
|
+
}));
|
|
197
|
+
const onChangeOpenInternal = (val) => {
|
|
198
|
+
var _a;
|
|
199
|
+
(_a = controller == null ? void 0 : controller.onChangeOpen) == null ? void 0 : _a.call(controller, val);
|
|
200
|
+
onChangeOpen == null ? void 0 : onChangeOpen(val);
|
|
201
|
+
};
|
|
202
|
+
const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
203
|
+
prop: (controller == null ? void 0 : controller.open) ?? openProp,
|
|
204
|
+
defaultProp: defaultOpen || true,
|
|
205
|
+
onChange: onChangeOpenInternal,
|
|
206
|
+
strategy: "most-recent-wins"
|
|
256
207
|
});
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
if (disableDrag)
|
|
272
|
-
return;
|
|
273
|
-
if (!frameSize)
|
|
274
|
-
return;
|
|
275
|
-
const minY = positions[0];
|
|
276
|
-
scrollBridge.paneMinY = minY;
|
|
277
|
-
let startY = at.current;
|
|
278
|
-
function makeUnselectable(val) {
|
|
279
|
-
if (!selectionStyleSheet)
|
|
280
|
-
return;
|
|
281
|
-
if (!val) {
|
|
282
|
-
selectionStyleSheet.innerText = ``;
|
|
283
|
-
} else {
|
|
284
|
-
selectionStyleSheet.innerText = `:root * { user-select: none !important; -webkit-user-select: none !important; }`;
|
|
208
|
+
const [frameSize, setFrameSize] = (0, import_react.useState)(0);
|
|
209
|
+
const snapPoints = (0, import_react.useMemo)(
|
|
210
|
+
() => dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp,
|
|
211
|
+
[JSON.stringify(snapPointsProp), dismissOnSnapToBottom]
|
|
212
|
+
);
|
|
213
|
+
const [position_, setPosition_] = (0, import_use_controllable_state.useControllableState)({
|
|
214
|
+
prop: positionProp,
|
|
215
|
+
defaultProp: defaultPosition || (open ? 0 : -1),
|
|
216
|
+
onChange: onChangePosition,
|
|
217
|
+
strategy: "most-recent-wins"
|
|
218
|
+
});
|
|
219
|
+
const position = open === false ? -1 : position_;
|
|
220
|
+
if (open && dismissOnSnapToBottom && position === snapPoints.length - 1) {
|
|
221
|
+
setPosition_(0);
|
|
285
222
|
}
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
223
|
+
const setPosition = (0, import_react.useCallback)(
|
|
224
|
+
(next) => {
|
|
225
|
+
if (dismissOnSnapToBottom && next === snapPoints.length - 1) {
|
|
226
|
+
setOpen(false);
|
|
227
|
+
} else {
|
|
228
|
+
setPosition_(next);
|
|
229
|
+
}
|
|
230
|
+
},
|
|
231
|
+
[dismissOnSnapToBottom, snapPoints.length, setPosition_, setOpen]
|
|
232
|
+
);
|
|
233
|
+
const animatedNumber = driver.useAnimatedNumber(HIDDEN_SIZE);
|
|
234
|
+
const at = (0, import_react.useRef)(0);
|
|
235
|
+
driver.useAnimatedNumberReaction(animatedNumber, (value) => {
|
|
236
|
+
at.current = value;
|
|
237
|
+
scrollBridge.paneY = value;
|
|
238
|
+
});
|
|
239
|
+
const [isResizing, setIsResizing] = (0, import_react.useState)(true);
|
|
240
|
+
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
241
|
+
if (!isResizing) {
|
|
242
|
+
setIsResizing(true);
|
|
243
|
+
}
|
|
244
|
+
}, [modal]);
|
|
245
|
+
function stopSpring() {
|
|
246
|
+
animatedNumber.stop();
|
|
247
|
+
if (scrollBridge.onFinishAnimate) {
|
|
248
|
+
scrollBridge.onFinishAnimate();
|
|
249
|
+
scrollBridge.onFinishAnimate = void 0;
|
|
301
250
|
}
|
|
302
251
|
}
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
252
|
+
const shouldSetPositionOpen = open && position < 0;
|
|
253
|
+
(0, import_react.useEffect)(() => {
|
|
254
|
+
if (shouldSetPositionOpen) {
|
|
255
|
+
setPosition(0);
|
|
256
|
+
}
|
|
257
|
+
}, [setPosition, shouldSetPositionOpen]);
|
|
258
|
+
const positions = (0, import_react.useMemo)(
|
|
259
|
+
() => snapPoints.map((point) => getPercentSize(point, frameSize)),
|
|
260
|
+
[frameSize, snapPoints]
|
|
261
|
+
);
|
|
262
|
+
const animateTo = (0, import_core.useEvent)((position2) => {
|
|
263
|
+
const current = animatedNumber.getValue();
|
|
264
|
+
if (isHidden && open)
|
|
265
|
+
return;
|
|
266
|
+
if (!current)
|
|
267
|
+
return;
|
|
268
|
+
if (frameSize === 0)
|
|
269
|
+
return;
|
|
270
|
+
const hiddenValue = frameSize === 0 ? HIDDEN_SIZE : frameSize;
|
|
271
|
+
const toValue = isHidden || position2 === -1 ? hiddenValue : positions[position2];
|
|
272
|
+
if (at.current === toValue)
|
|
273
|
+
return;
|
|
274
|
+
stopSpring();
|
|
275
|
+
if (isHidden || isResizing) {
|
|
276
|
+
if (isResizing) {
|
|
277
|
+
setIsResizing(false);
|
|
278
|
+
}
|
|
279
|
+
animatedNumber.setValue(toValue, {
|
|
280
|
+
type: "timing",
|
|
281
|
+
duration: 0
|
|
282
|
+
});
|
|
283
|
+
at.current = toValue;
|
|
284
|
+
return;
|
|
285
|
+
}
|
|
286
|
+
const overshootClamping = at.current === HIDDEN_SIZE;
|
|
287
|
+
animatedNumber.setValue(toValue, {
|
|
288
|
+
...animationConfig,
|
|
289
|
+
type: "spring",
|
|
290
|
+
overshootClamping
|
|
291
|
+
});
|
|
310
292
|
});
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
const
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
293
|
+
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
294
|
+
animateTo(position);
|
|
295
|
+
}, [isHidden, frameSize, position, animateTo]);
|
|
296
|
+
const panResponder = (0, import_react.useMemo)(
|
|
297
|
+
() => {
|
|
298
|
+
if (disableDrag)
|
|
299
|
+
return;
|
|
300
|
+
if (!frameSize)
|
|
301
|
+
return;
|
|
302
|
+
const minY = positions[0];
|
|
303
|
+
scrollBridge.paneMinY = minY;
|
|
304
|
+
let startY = at.current;
|
|
305
|
+
function makeUnselectable(val) {
|
|
306
|
+
if (!selectionStyleSheet)
|
|
307
|
+
return;
|
|
308
|
+
if (!val) {
|
|
309
|
+
selectionStyleSheet.innerText = ``;
|
|
310
|
+
} else {
|
|
311
|
+
selectionStyleSheet.innerText = `:root * { user-select: none !important; -webkit-user-select: none !important; }`;
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
const release = ({ vy, dragAt }) => {
|
|
315
|
+
isExternalDrag = false;
|
|
316
|
+
previouslyScrolling = false;
|
|
317
|
+
makeUnselectable(false);
|
|
318
|
+
const at2 = dragAt + startY;
|
|
319
|
+
const end = at2 + frameSize * vy * 0.2;
|
|
320
|
+
let closestPoint = 0;
|
|
321
|
+
let dist = Infinity;
|
|
322
|
+
for (let i = 0; i < positions.length; i++) {
|
|
323
|
+
const position2 = positions[i];
|
|
324
|
+
const curDist = end > position2 ? end - position2 : position2 - end;
|
|
325
|
+
if (curDist < dist) {
|
|
326
|
+
dist = curDist;
|
|
327
|
+
closestPoint = i;
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
setPosition(closestPoint);
|
|
331
|
+
animateTo(closestPoint);
|
|
332
|
+
};
|
|
333
|
+
const finish = (_e, state) => {
|
|
334
|
+
release({
|
|
335
|
+
vy: state.vy,
|
|
336
|
+
dragAt: state.dy
|
|
337
|
+
});
|
|
338
|
+
};
|
|
339
|
+
let previouslyScrolling = false;
|
|
340
|
+
const onMoveShouldSet = (_e, { dy }) => {
|
|
341
|
+
const isScrolled = scrollBridge.y !== 0;
|
|
342
|
+
if (isScrolled) {
|
|
343
|
+
previouslyScrolling = true;
|
|
344
|
+
return false;
|
|
345
|
+
}
|
|
346
|
+
if (previouslyScrolling) {
|
|
347
|
+
previouslyScrolling = false;
|
|
348
|
+
return true;
|
|
349
|
+
}
|
|
350
|
+
const isDraggingUp = dy < 0;
|
|
351
|
+
const isAtTop = scrollBridge.paneY <= scrollBridge.paneMinY;
|
|
352
|
+
if (isAtTop) {
|
|
353
|
+
if (!isScrolled && isDraggingUp) {
|
|
354
|
+
return false;
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
return Math.abs(dy) > 8;
|
|
358
|
+
};
|
|
359
|
+
const grant = () => {
|
|
360
|
+
makeUnselectable(true);
|
|
361
|
+
stopSpring();
|
|
362
|
+
startY = at.current;
|
|
363
|
+
};
|
|
364
|
+
let isExternalDrag = false;
|
|
365
|
+
scrollBridge.drag = (dy) => {
|
|
366
|
+
if (!isExternalDrag) {
|
|
367
|
+
isExternalDrag = true;
|
|
368
|
+
grant();
|
|
369
|
+
}
|
|
370
|
+
const to = dy + startY;
|
|
371
|
+
animatedNumber.setValue(resisted(to, minY), { type: "direct" });
|
|
372
|
+
};
|
|
373
|
+
scrollBridge.release = release;
|
|
374
|
+
return import_react_native.PanResponder.create({
|
|
375
|
+
onMoveShouldSetPanResponder: onMoveShouldSet,
|
|
376
|
+
onPanResponderGrant: grant,
|
|
377
|
+
onPanResponderMove: (_e, { dy }) => {
|
|
378
|
+
const to = dy + startY;
|
|
379
|
+
animatedNumber.setValue(resisted(to, minY), { type: "direct" });
|
|
380
|
+
},
|
|
381
|
+
onPanResponderEnd: finish,
|
|
382
|
+
onPanResponderTerminate: finish,
|
|
383
|
+
onPanResponderRelease: finish
|
|
384
|
+
});
|
|
385
|
+
},
|
|
386
|
+
[disableDrag, animateTo, frameSize, positions, setPosition]
|
|
387
|
+
);
|
|
388
|
+
let handleComponent = null;
|
|
389
|
+
let overlayComponent = null;
|
|
390
|
+
let frameComponent = null;
|
|
391
|
+
import_react.default.Children.forEach(childrenProp, (child) => {
|
|
392
|
+
var _a, _b;
|
|
393
|
+
if ((0, import_react.isValidElement)(child)) {
|
|
394
|
+
const name = (_b = (_a = child.type) == null ? void 0 : _a["staticConfig"]) == null ? void 0 : _b.componentName;
|
|
395
|
+
switch (name) {
|
|
396
|
+
case "SheetHandle":
|
|
397
|
+
handleComponent = child;
|
|
398
|
+
break;
|
|
399
|
+
case "Sheet":
|
|
400
|
+
frameComponent = child;
|
|
401
|
+
break;
|
|
402
|
+
case "SheetOverlay":
|
|
403
|
+
overlayComponent = child;
|
|
404
|
+
break;
|
|
405
|
+
default:
|
|
406
|
+
console.warn("Warning: passed invalid child to Sheet", child);
|
|
407
|
+
}
|
|
328
408
|
}
|
|
409
|
+
});
|
|
410
|
+
const preventShown = (controller == null ? void 0 : controller.hidden) && (controller == null ? void 0 : controller.open);
|
|
411
|
+
const animatedStyle = driver.useAnimatedNumberStyle(animatedNumber, (val) => {
|
|
412
|
+
return {
|
|
413
|
+
transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : val }]
|
|
414
|
+
};
|
|
415
|
+
});
|
|
416
|
+
if (preventShown) {
|
|
417
|
+
return null;
|
|
329
418
|
}
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
});
|
|
381
|
-
const preventShown = (controller == null ? void 0 : controller.hidden) && (controller == null ? void 0 : controller.open);
|
|
382
|
-
const animatedStyle = driver.useAnimatedNumberStyle(animatedNumber, (val) => {
|
|
383
|
-
return {
|
|
384
|
-
transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : val }]
|
|
385
|
-
};
|
|
386
|
-
});
|
|
387
|
-
if (preventShown) {
|
|
388
|
-
return null;
|
|
389
|
-
}
|
|
390
|
-
const AnimatedView = driver["NumberView"] ?? driver.View;
|
|
391
|
-
const contents = /* @__PURE__ */ import_react.default.createElement(import_SheetContext.SheetProvider, {
|
|
392
|
-
modal,
|
|
393
|
-
contentRef,
|
|
394
|
-
dismissOnOverlayPress,
|
|
395
|
-
dismissOnSnapToBottom,
|
|
396
|
-
open,
|
|
397
|
-
hidden: isHidden,
|
|
398
|
-
scope: __scopeSheet,
|
|
399
|
-
position,
|
|
400
|
-
snapPoints,
|
|
401
|
-
setPosition,
|
|
402
|
-
setOpen,
|
|
403
|
-
scrollBridge
|
|
404
|
-
}, isResizing ? null : overlayComponent, /* @__PURE__ */ import_react.default.createElement(AnimatedView, {
|
|
405
|
-
ref,
|
|
406
|
-
...panResponder == null ? void 0 : panResponder.panHandlers,
|
|
407
|
-
onLayout: (e) => {
|
|
408
|
-
const next = e.nativeEvent.layout.height;
|
|
409
|
-
setFrameSize((prev) => {
|
|
410
|
-
const isBigChange = Math.abs(prev - next) > 50;
|
|
411
|
-
setIsResizing(isBigChange);
|
|
412
|
-
return next;
|
|
419
|
+
const AnimatedView = driver["NumberView"] ?? driver.View;
|
|
420
|
+
const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_SheetContext.SheetProvider, {
|
|
421
|
+
modal,
|
|
422
|
+
contentRef,
|
|
423
|
+
dismissOnOverlayPress,
|
|
424
|
+
dismissOnSnapToBottom,
|
|
425
|
+
open,
|
|
426
|
+
hidden: isHidden,
|
|
427
|
+
scope: __scopeSheet,
|
|
428
|
+
position,
|
|
429
|
+
snapPoints,
|
|
430
|
+
setPosition,
|
|
431
|
+
setOpen,
|
|
432
|
+
scrollBridge,
|
|
433
|
+
children: [
|
|
434
|
+
isResizing ? null : overlayComponent,
|
|
435
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AnimatedView, {
|
|
436
|
+
ref,
|
|
437
|
+
...panResponder == null ? void 0 : panResponder.panHandlers,
|
|
438
|
+
onLayout: (e) => {
|
|
439
|
+
const next = e.nativeEvent.layout.height;
|
|
440
|
+
setFrameSize((prev) => {
|
|
441
|
+
const isBigChange = Math.abs(prev - next) > 50;
|
|
442
|
+
setIsResizing(isBigChange);
|
|
443
|
+
return next;
|
|
444
|
+
});
|
|
445
|
+
},
|
|
446
|
+
pointerEvents: open ? "auto" : "none",
|
|
447
|
+
style: [
|
|
448
|
+
{
|
|
449
|
+
position: "absolute",
|
|
450
|
+
zIndex: 10,
|
|
451
|
+
width: "100%",
|
|
452
|
+
height: "100%"
|
|
453
|
+
},
|
|
454
|
+
animatedStyle
|
|
455
|
+
],
|
|
456
|
+
children: [
|
|
457
|
+
handleComponent,
|
|
458
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
|
|
459
|
+
enabled: open && modal && handleDisableScroll,
|
|
460
|
+
as: import_core.Slot,
|
|
461
|
+
allowPinchZoom: true,
|
|
462
|
+
shards: [contentRef],
|
|
463
|
+
removeScrollBar: false,
|
|
464
|
+
children: isResizing ? null : frameComponent
|
|
465
|
+
})
|
|
466
|
+
]
|
|
467
|
+
})
|
|
468
|
+
]
|
|
413
469
|
});
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
removeScrollBar: false
|
|
431
|
-
}, isResizing ? null : frameComponent)));
|
|
432
|
-
if (modal) {
|
|
433
|
-
return /* @__PURE__ */ import_react.default.createElement(import_portal.Portal, null, /* @__PURE__ */ import_react.default.createElement(import_core.Theme, {
|
|
434
|
-
name: themeName
|
|
435
|
-
}, contents));
|
|
470
|
+
if (modal) {
|
|
471
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, {
|
|
472
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {
|
|
473
|
+
name: themeName,
|
|
474
|
+
children: contents
|
|
475
|
+
})
|
|
476
|
+
});
|
|
477
|
+
}
|
|
478
|
+
return contents;
|
|
479
|
+
})
|
|
480
|
+
),
|
|
481
|
+
{
|
|
482
|
+
Handle: SheetHandle,
|
|
483
|
+
Frame: SheetFrame,
|
|
484
|
+
Overlay: SheetOverlay,
|
|
485
|
+
ScrollView: import_SheetScrollView.SheetScrollView
|
|
436
486
|
}
|
|
437
|
-
|
|
438
|
-
})), {
|
|
439
|
-
Handle: SheetHandle,
|
|
440
|
-
Frame: SheetFrame,
|
|
441
|
-
Overlay: SheetOverlay,
|
|
442
|
-
ScrollView: import_SheetScrollView.SheetScrollView
|
|
443
|
-
});
|
|
487
|
+
);
|
|
444
488
|
function getPercentSize(point, frameSize) {
|
|
445
489
|
if (!frameSize)
|
|
446
490
|
return 0;
|
|
@@ -469,15 +513,19 @@ const SheetController = ({
|
|
|
469
513
|
...value
|
|
470
514
|
}) => {
|
|
471
515
|
const onChangeOpen = (0, import_core.useEvent)(onChangeOpenProp);
|
|
472
|
-
const memoValue = (0, import_react.useMemo)(
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
value
|
|
480
|
-
|
|
516
|
+
const memoValue = (0, import_react.useMemo)(
|
|
517
|
+
() => ({
|
|
518
|
+
open: value.open,
|
|
519
|
+
hidden: value.hidden,
|
|
520
|
+
disableDrag: value.disableDrag,
|
|
521
|
+
onChangeOpen
|
|
522
|
+
}),
|
|
523
|
+
[onChangeOpen, value.open, value.hidden, value.disableDrag]
|
|
524
|
+
);
|
|
525
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetControllerContext.Provider, {
|
|
526
|
+
value: memoValue,
|
|
527
|
+
children
|
|
528
|
+
});
|
|
481
529
|
};
|
|
482
530
|
// Annotate the CommonJS export names for ESM import in node:
|
|
483
531
|
0 && (module.exports = {
|